vue-cli3创建的vue项目 使用 lib-flexible 和 px2rem-loader

1. vue-cli3 和 vue-cli2 创建的 vue 项目目录的差异

用 vue-cli3 创建的 vue 项目目录如下：

用 vue-cli2 创建的 vue 项目目录如下：(该图片摘自：https://blog.csdn.net/weixin_36185028/article/details/78637528)

会发现用 vue-cli3 创建的 vue 项目目录没有 ‘build’ 和 ‘config’ 文件夹（注意这跟下面 vue 中引用 px2rem-loader 有很大联系）

2. vue 使用 lib-flexible

1）项目中安装 lib-flexible

npm install lib-flexible --save

2）在项目的入口 main.js 中引入 lib-flexible     

import 'lib-flexible/flexible.js'

3）检查一下 index.html 的 head 中，如果有 <meta name="viewport" ...> 标签，需要将他去掉，因为如果有这个标签的话，lib-flexible 就会默认使用这个标签。而我们要使用 lib-flexible 自己生成的 <meta name="viewport" ...> 来达到高清适配的效果。

通过以上三步，就完成了在 vue 项目使用 lib-flexible 来解决移动端适配了。

lib-flexible会自动在html的head中添加一个meta name="viewport"的标签，同时会自动设置html的font-size为屏幕宽度除以10，也就是1rem等于html根节点的font-size。假如设计稿的宽度是750px，此时1rem应该等于75px。假如量的某个元素的宽度是150px，那么在css里面定义这个元素的宽度就是 width: 2rem

注意：

    1.检查一下html文件的head中，如果有 meta name="viewport" 标签，需要将他注释掉，因为如果有这个标签的话，lib-flexible就会默认使用这个标签。而我们要使用 lib-flexible 自己生成的 meta name="viewport" 来达到高清适配的效果。

    2.因为 html 的 font-size 是根据屏幕宽度除以 10 计算出来的，所以我们需要设置页面的最大宽度是10rem。

    3.如果每次从设计稿量出来的尺寸都手动去计算一下rem，就会导致我们效率比较慢，还有可能会计算错误，所以我们可以使用px2rem-loader自动将css中的px转成rem

（该段摘录于：https://blog.csdn.net/yanzhi_2016/article/details/80461951）

3. vue 使用 px2rem-loader 自动将css中的px转换成rem

1）在项目中安装 px2rem-loader

npm install px2rem-loader --save-dev

2）配置px2rem-loader

     注意：因为 用 vue-cli3 创建的 vue 项目目录没有 ‘build’ 和 ‘config’ 文件，所以两者生成的项目配置px2rem-loader对应的文件不同！！！

 a. 用 vue-cli3 以下版本 创建的 vue 项目配置 px2rem-loader 如下：

   a.1 打开build/utils.js文件，找到 cssLoader 方法下添加如下代码

const cssLoader = {
    loader: 'css-loader',
    options: {
      sourceMap: options.sourceMap,
      importLoader: 5 // 在加载cssLoader之前加载的loader个数
    }
}

//添加如下代码
const px2remLoader = {
    loader: 'px2rem-loader',
    options: {
      emUnit: 75 // 设计稿的1/10
    }
}

    a.2 修改 generateLoaders 方法

function generateLoaders(loader, loaderOptions) {
    const loaders = options.usePostCSS ? [cssLoader, postcssLoader, px2remLoader] : [cssLoader, px2remLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
    })
}

 b. 用 vue-cli3 创建的 vue 项目配置 px2rem-loader 如下：

    找到文件 node_modules/@vue/cli-service/lib/config/css.js，添加规则：   

rule
    .use('px2rem-loader')
    .loader('px2rem-loader')
    .options({emUnit: 75})

    然后重新运行项目，打开控制台可以看到代码中的px已经被转成了rem 

注意：使用 px2rem-loader 后再使用px上有些不同：
    直接写 px ，编译后会直接转化成rem —— 除开下面两种情况，其他长度用这个
    在 px 后面添加 /*no*/ ，不会转化 px，会原样输出。 —— 一般border需用这个
    在 px 后面添加 /*px*/ ，会根据 dpr 的不同，生成三套代码。—— 一般字体需用这个