移动端页面适配(px2rem)

1、安装

引入lib-flexible . 

　　安装lib-flexible：　　npm i lib-flexible --save

　　在项目的入口main.js文件中引入lib-flexible: import 'lib-flexible'

一定不要忘了是在main.js中

2、使用和安装px2rem　　

使用postcss-px2rem自动将css中的px转换成rem（真的是大大提升了我们的工作效率，棒棒的，不用自己去瞎算啊）

　　安装postcss-px2rem ：　　npm install postcss-px2rem --save-dev

3. 移除public中index.html中关于viewport的meta标签 好像不移除也没事

根目录下新建vue.config.js，加入配置项 (cli4中好像不移除也没事) 改了设计稿，需要重新启动服务 

module.exports = {

    // devServer: {

    //   proxy: {

    //     '/ajax': {

    //       target: 'http://m.maoyan.com',

    //       // ws: true,

    //       changeOrigin: true

    //     },

    //     '/foo': {

    //       target: '<other_url>'

    //     }

    //   }

    // },

    lintOnSave: false ,



    css: {

        loaderOptions: {

               css: {

                       // options here will be passed to css-loader

               },

         postcss: {

                    // options here will be passed to postcss-loader

                    plugins: [require('postcss-px2rem')({

                              remUnit:75,//设计稿的 十分之一

                              "exclude": /node_modules/i

                    })]

               }

          }

      }

  }