依赖
项目基础配置使用 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;
}
至此，我们就创建了一个移动端自适应的项目。
