Vue-cli 3.0 px转rem移动端适配方案

在Vue-cli 3.0搭建的项目中，对于移动端的适配使用到lib-flexible 和 postcss-pxtorem 这两个插件

使用方法

1. cnpm install lib-flexible postcss-pxtorem --save

2. 在main.js 文件中引入import 'lib-flexible/flexible.js'

3. 在package.json文件中添加

"postcss": {
    "plugins": {
      "autoprefixer": {},
      "postcss-pxtorem": {
        "rootValue": 37.5,
        "propList": [
          "*","!font-size*"
        ],
        "selectorBlackList": ["van-"]
      }
    }
  }

注：

• rootValue是设计稿宽度的1/10
• propList是需要做转化处理的属性，如hight、width、margin等，*表示全部,"!font-size*"表示排除的属性
• selectorBlackList匹配黑名单，规则是class中包含的字符串，如vant中所有的class前缀都是van-，也可以是正则
• 不想转换的可以使用PX