基于 vue-cli 配置手淘的 lib-flexible + rem，实现移动端自适应

1. 安装 flexible

   npm install lib-flexible --save

2. 引入 flexible

   在项目入口文件 main.js 中添加如下代码，引入 flexible

   import 'lib-flexible'

3. px 转 rem

   使用 webpack 的 px2rem-loader, 自动将 px 转换为 rem

4. 安装 px2rem-loader

   npm install px2rem-loader --save-dev

5. 配置 px2rem-loader

   在 vue-cli 生成的文件中, 找到以下文件 build/utils.js, 如下添加配置

   const px2remLoader = {loader: 'px2rem-loader',options: {      remUnit: 75  // 1rem=多少像素 这里的设计稿是750px。    }}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            })          })        }    }

6. px2rem 用法

   安装 px2rem 后，再使用 px 上有些不同,下面简单介绍一下。

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

   示例代码

   /** 编译前 **/.selector {    width: 150px;    height: 64px; /*px*/    font-size: 28px; /*px*/    border: 1px solid #ddd; /*no*/}/** 编译后（打包后的代码）**/.selector {    width: 2rem;    border: 1px solid #ddd;}[data-dpr="1"] .selector {    height: 32px;    font-size: 14px;}[data-dpr="2"] .selector {    height: 64px;    font-size: 28px;}[data-dpr="3"] .selector {    height: 96px;    font-size: 42px;}

   重启项目，就可以愉快的用设计稿上的 px 了。

   注意：
   不能在 index.html 的头部加 name 为 viewport 的 meta 标签，flexible 会自动为我们添加！