vue 使用 lib-flexible/amfe-flexible + postcss-pxtorem + vant ui 解决移动端使用第三方UI库适配问题

解决vue移动端适配问题，vue-cli3+vant-ui等第三方UI组件引入适配

1. 安装amfe-flexible/lib-flexible

npm install amfe-flexible --save 或者 npm install lib-flexible --save

2.在入口文件main.js中引入

import 'amfe-flexible' 或者 import 'lib-flexible'

3.修改根目录的index.html 的头部加入手机端适配的meta代码

<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, minimum-scale=1, user-scalable=no">

4.安装postcss-pxtorem是一款 postcss 插件，用于将单位转化为 rem

npm i postcss-pxtorem --save-dev

5. 添加配置信息（二选一）

1）如果脚手架工具没有创建这个 .postcssrc.js 文件，那就在根目录下新建.postcssrc.js，并添加以下配置。

module.exports = {  
"plugins": {       
    postcss-pxtorem': {    
      rootValue: 75,    
      propList: ['*', '!font-size'],
      exclude: /node_modules|folder_name/i
    }
  }
}

2）在vue.config.js中配置

module.exports = {
  css: {
    loaderOptions: {
      postcss: {
        plugins: [
          require('postcss-pxtorem')({
            rootValue: 75,
            propList: ['*', '!font-size'],
            exclude: /node_modules|folder_name/i
          })
        ]
      }
    }
  }};

温馨提示： rootValue这个配置项的数值是多少呢？？？通常我们是根据设计图来定这个值，原因很简单，便于开发。假如设计图给的宽度是750，我们通常就会把rootValue设置为75，这样我们写样式时，可以直接按照设计图标注的宽高来1:1还原开发。（iPhone界面尺寸：320 * 480、640 * 960、640 * 1136、750 * 1334、1080 * 1920等。）
那为什么你在这里写成了37.5呢？？？
之所以设为37.5，是为了引用像vant、mint-ui这样的第三方UI框架，因为第三方框架没有兼容rem，用的是px单位，将rootValue的值设置为设计图宽度（这里为750px）75的一半，即可以1:1还原vant、mint-ui的组件，否则会样式会有变化，例如按钮会变小。
既然设置成了37.5 那么我们必须在写样式时，也将值改为设计图的一半（比如设计稿尺寸是750px，字体大小是22px的话，css的样式字体大小就写12px）。然后添加 exclude 忽略掉引入的 UI 框架，还可以添加 propList 可以不转换你所希望的值，比如 'font-size'，要添加多个以逗号隔开。