在vue中使用amfe-flexible和postcss-pxtorem实现适配

rem布局是适配不同屏幕的一个好方法，一些插件在这方面已经做得非常完善。记录一下用amfe-flexible和postcss-pxtorem实现适配的过程。

一、 插件了解

1. amfe-flexible
   可以进行HTML根节点的初始化、屏幕自适应。
2. postcss-pxtorem
   实现将px转成rem。

二、技术实现

1. 安装amfe-flexible&postcss-pxtorem

npm install postcss-pxtorem -S
npm install amfe-flexible -S

2. 在main.js中引入amfe-flexible

import  "amfe-flexible";

3. 在vue.config.js、.postcssrc.js、postcss.config.js其中之一做如下配置

module.exports = {
  "plugins": {
    "postcss-import": {},
    "postcss-url": {},
    // to edit target browsers: use "browserslist" field in package.json
    "autoprefixer": {},
    "postcss-pxtorem": { // 此处为添加部分
      rootValue: 192.0,//rootValue根据设计稿宽度除以10进行设置，这边假设设计稿为1920，即rootValue设为192.0；
      unitPrecision: 5,
      propList: ['*'],
      selectorBlackList: ['el-',], //
      replace: true,
      mediaQuery: false,
      minPixelValue: 0
    }
  }
}

注意：

1. rootValue根据设计稿宽度除以10
   进行设置，这边假设设计稿为1920，即rootValue设为192.0；
2. selectorBlackListfont过滤掉.el-开头的class，不进行rem转换

三、实现效果