vue-cli4构建移动端页面记录

1. 使用vue-cli生成项目,选择vuex + vue-router + eslint + pritter

   vue vreate mobile-project
   

2. 添加vue.config.js

3. assets文件夹中添加适配文件hotcss用于适配不同屏幕尺寸。 (eslint会对hotcss里面的正则报错，可以在.eslintrc.js中添加"no-useless-escape": "off"规避报错)

4. 添加px2rem-exclude，px自动转换为rem。

   npm install px2rem-exclude -D
   

   vue.config.js

   module.exprots = {
       css: {
           loaderOptions: {
               postcss: {
                   plugins: [
                       require("px2rem-exclude")({
                           remUnit: 67.5,//换算基数，设计图宽度除以16，例：1080/16 = 67.5
                           exclude: /node_modules/, //不包括的文件夹，放便接入第三方插件
                           remPrecision: 9, //转换小数点精度，默认6
                       }), 
                       require("autoprefixer")({
                           overrideBrowserslist: ["Android >= 4.0"],//适配手机型号配置
                       }),
                   ],
               },
           },
       },
   }
   

至此，页面样式就可以按照1:1完美还原设计图效果了

问题记录：

1. alias引入第三方文件导致eslint报错：No ESLint configuration found in (......)

   解决方法： 新建.eslintignore文件，配置需要忽略的文件夹。