Vue 移动端适配方案，淘宝弹性布局方案（lib-flexible + px2rem-loader）

一、Vue使用淘宝弹性布局方案 lib-flexible

    1. 项目安装lib-flexible插件

        npm install lib-flexible --save

    2. 在main.js中引入插件

        import 'lib-flexible/flexible'

    3. 在public/index.html文件中删除默认的<meta name="viewport" content="width=device-width,initial-scale=1.0">，因为lib-flexible会自动生成此标签来达到适配的效果，如果此默认标签不删除，则无法达到适配效果。

   *完成以上这3个步骤，就已经自适应移动端分辨率了。

    需要注意的是：

    默认生成的<meta>标签会自动设置html的font-size为屏幕宽度除于10，也就是10rem就是屏幕的宽度。例如设计稿是以iPhone 6宽度设计的750px，则1rem等于75px，350px等于5rem。

    但这样就会导致每次都需要手动去计算px等于多少rem，所以可以使用px2rem-loader插件来将css中的px自动转换为rem。

二、使用px2rem-loader插件将px转换为rem

    1. 安装px2rem-loader插件

        npm install px2rem-loader --save-dev

    2. 在项目根目录新建vue.config.js文件，复制以下代码

        module.exports = {

            chainWebpack: config => {

                config.module

                .rule('css')

                 .test(/\.css$/)

                 .oneOf('vue')

                 .resourceQuery(/\?vue/)

                 .use('px2rem')

                 .loader('px2rem-loader')

                 .options({

                    remUnit: 75       // 75就是对应你设计稿的宽度/10

                 })

            }

        }

    注意： 如果Vue项目中使用了scss预处理则需要使用这段代码

        module.exports = {

         chainWebpack: config => {

     config.module

     .rule('scss')

     .oneOf('vue')

     .use('px2rem-loader')

     .loader('px2rem-loader')

     .before('postcss-loader') // this makes it work.

     .options({

         remUnit: 75,

         remPrecision: 8

     })

     .end()

         }

        }