vue中使用rem

vue中使用rem 写移动端页面 
借助两个插件，将px进行转化为rem。
lib-flexible 用于设置 rem 基准值。由淘宝手机前端开发团队编写的。postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem。
主要步骤：
a、npm i -S amfe-flexible 
b、import 'amfe-flexible';  //main.js引入rem自适应
c、在index.html中添加meta标签<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
d、npm install postcss-pxtorem --save-dev
e、更改配置
在vue-cli2下，根目录中的 .postcss.js (没有，就新建一个)
module.exports = {  "plugins": {    "postcss-import": {},    "postcss-url": {},    // to edit target browsers: use "browserslist" field in package.json    "autoprefixer": {},    "postcss-pxtorem": { // 此处为添加部分      rootValue: 37.5, // 对应16px 适配移动端750px宽度      unitPrecision: 5,      propList: ['*'],      selectorBlackList: [],      replace: true,      mediaQuery: false,      minPixelValue: 0    }  }}
在vue-cli3/4下,根目录中的 vue.config.js (没有，就新建一个)
module.exports = {  css: {    loaderOptions: {      postcss: {        plugins: [          require('postcss-pxtorem')({ // 把px单位换算成rem单位            rootValue: 37.5, // 换算的基数(设计图750的根字体为32)            selectorBlackList: ['weui', 'mu'], // 忽略转换正则匹配项            propList: ['*']          })        ]      }    }  }}
在编辑器里安装pxtorem的编辑器插件  pxtorem在编辑器的配置里 把1rem的换算值填上  750px的设计稿 1rem = 75px
然后发现运行报错  这里是安装的rem的插件版本太高 npm i postcss-pxtorem@5.1.1 回车
重启项目