vue 中安装插件实现 rem 适配

vue 项目实现页面自适应，可以安装插件实现。

postcss-pxtorem 是 PostCSS 的插件，用于将像素单元生成 rem 单位。

autoprefixer 浏览器前缀处理插件。

amfe-flexible 可伸缩布局方案替代了原先的 lib-flexible 选用了当前众多浏览器兼容的 viewport。

1. 安装插件。

   npm i postcss-pxtorem  
   npm i autoprefixer
   npm i  amfe-flexible
   

2. 在根目录新建 postcss.config.js，并根据需要做下面配置。

   module.exports = {plugins: {autoprefixer: {overrideBrowserslist: ["Android 4.1","iOS 7.1","Chrome > 31","ff > 31","ie >= 8","last 10 versions" // 所有主流浏览器最近10版本用],grid: true},"postcss-pxtorem": {rootValue: 192, // 设计稿宽度的1/ 10propList: ["*", "!border"], // 除 border 外所有px 转 remselectorBlackList: [".el-"] // 过滤掉.el-开头的class，不进行rem转换}}
   };
   

3. 在 main.js 中引入 amfe-flexible。

   import 'amfe-flexible/index.js';