依赖

项目基础配置使用 vue-cli 生成

移动端自适应方案核心：阿里可伸缩布局方案 - lib-flexible

px 转 rem：px2rem，它有 webpack 的 loader：px2rem-loader

使用

首先，我们使用 vue 的脚手架 vue-cli 来初始化一个 webpack 项目

没有安装过 vue-cli 的请先安装 vue-cli

1. 安装所需依赖后安装 lib-flexible 和 px2rem-loader

npm i lib-flexible -S

npm i px2rem-loader -D

2. 找到 build/utils.js

在 cssLoader 后再加上一个 px2remLoader 即可，px2rem-loader 的 remUnit 选项意思是 1rem=多少像素，结合 lib-flexible 的方案，我们将 px2remLoader 的 options.remUnit 设置成设计稿宽度的 1/10，这里我们假设设计稿宽为 750px

// utils.js
const cssLoader = {
  loader: 'css-loader',
  options: {
    minimize: process.env.NODE_ENV === 'production',
    sourceMap: options.sourceMap
  }
}

const px2remLoader = {
  loader: 'px2rem-loader',
  options: {
    remUnit: 75      //设计稿宽度/10
  }
}
// ...

并放进 loaders 数组中

// utils.js
function generateLoaders(loader, loaderOptions) {
    const loaders = [cssLoader, px2remLoader]
    // ...

3. 在项目入口文件 main.js 里 引入 lib-flexible

// main.js

import 'lib-flexible'

修改配置后 npm run dev，然后我们就可以在.vue 里直接用px，这样写起来就舒服多了。

关于字体大小

不推荐用rem作为单位, lib-flexible会在html（也就是document.documentElement）上增加一个data-dpr属性，所以对于字体的设置，仍旧使用px作为单位，并配合用data-dpr属性来区分不同dpr下的的大小。

例如：

div {
  width: 1rem; 
  height: 0.4rem;
  font-size: 12px; // 默认写上dpr为1的fontSize
}

[data-dpr="2"] div {
  font-size: 24px;
}

[data-dpr="3"] div {
  font-size: 36px;
}

至此，我们就创建了一个移动端自适应的项目。