vue cli4.0搭建项目+(vw适配)+在vw适配下ios图

首先我们开始第一步

vue create 你的项目名字

image.png

default是默认配置，Manually select features是自定义配置
我选择自定义配置

第二步是项目需要配置的架子，我选择的是这些

Babel：用于编写下一代JavaScript的编译器，必须的吧
TypeScript：JavaScript的一个超集，很火，不会，又多了一项要学的东西！！！
Progressive Web App (PWA) Support：PWA渐进式wabapp,个人理解类似国内微信小程序、快应用
Router：路由
Vuex：状态管理
CSS Pre-processors：css预处理
Linter/Formatter：代码风格
Unit Testing：单元测试
E2E Testing：端到端测试

image.png

第三步是使用 类 风格的组件语法

image.png

第四步是 Use Babel alongside TypeScript for auto-detected polyfills?：用Babel与TypeScript一起用于自动检测polyfills

image.png

第五第六步是
Use history mode for router?：路由使用history模式
Pick a CSS pre-processor：CSS预编译选择

第七步是选择代码风格控制

image.png

第八步是
Lint on save：保存的时候检测
Lint and fix on commit (requires Git)：提交的时候检测，需要Git

第九步是
Where do you prefer placing config for Babel, PostCSS, ESLint, etc.?：你更喜欢将Babel、PostCSS、ESLint等配置放到那
In dedicated config files：各自专用的文件
In package.json：放在package.json文件中

最后是Save this as a preset for future projects?：将以上配置保存，以后可以直接用

image.png

接下来是适配vw移动端的，如果不需要可以忽略以下内容

//安装以下内容
npm i postcss-aspect-ratio-mini postcss-px-to-viewport postcss-write-svg postcss-cssnext postcss-viewport-units cssnano --S

vue cli4.0需要安装下面两个

npm install postcss-url

npm install postcss-import

然后在根目录下新建.postcssrc.js文件,内容如下，这样剧大功告成了！

module.exports = {
    plugins: {
      'postcss-import': {},
      'postcss-url': {},
      'postcss-aspect-ratio-mini': {},
      'postcss-write-svg': {
        utf8: false
      },
      'postcss-cssnext': {},
      'postcss-px-to-viewport': {
        viewportWidth: 750, //  视窗的宽度，对应的是我们设计稿的宽度，移动端一般是750，如果是pc端那就是类似1920这样的尺寸
        viewportHeight: 1344, // 视窗的高度，移动端一般指定1334，也可以不配置
        unitPrecision: 3, // 指定`px`转换为视窗单位值的小数位数（很多时候无法整除）
        viewportUnit: 'vw', // 指定需要转换成的视窗单位，建议使用vw
        selectorBlackList: ['.ignore', '.hairlines'], // 指定不转换为视窗单位的类，可以自定义，可以无限添加,建议定义一至两个通用的类名
        minPixelValue: 1, // 小于或等于`1px`不转换为视窗单位，你也可以设置为你想要的值
        mediaQuery: false // 允许在媒体查询中转换`px`
      },
      'postcss-viewport-units': {},
      cssnano: {
        preset: 'default', // 设置成default将不会启用autoprefixer
        'postcss-zindex': false
      }
    }
  }

vw适配下ios图片不显示在APP.vue加上即可

img{
  content: normal !important
}