vue-cli3移动端自适应配置 Vant组件库

Vant：轻量、可靠的移动端 Vue 组件库 （推荐使用）
通过vue-cli搭建完项目后开始进行Vant配置

第一步：安装vant

npm i vant -S

yarn add vant

第二步：引入组件 （推荐自动按需引入组件）
① 安装babel-plugin-import插件
babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式

npm i babel-plugin-import -D

②

import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

Vue.use(Vant);

第三步：Rem 适配
①安装插件
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，需要安装postcss-pxtorem、lib-flexible两个插件
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

npm install postcss-pxtorem@4.0 --save-dev
npm i -S amfe-flexible

②postcss 配置：
第一种配置方式：在postcss.config.js文件中配置：

module.exports = () => ({
  plugins: [
    require('autoprefixer')(),
    // require('postcss-px2rem')({ remUnit: 75 })
    require('postcss-pxtorem')({
      rootValue: 37.5,
      propList: ['*']
    })
  ]
})

第二种配置方式：创建vue.config.js配置：

const autoprefixer = require('autoprefixer');
const pxtorem = require('postcss-pxtorem');
module.exports = {
    css: {
        loaderOptions: {
            postcss: {
                plugins: [
                    autoprefixer(),
                    pxtorem({
                        rootValue: 37.5,
                        propList: ['*'],
                        selectorBlackList: ['van-circle__layer']
                    })
                ]
            }
        }
    }
};

这段配置就算是css的预加载配置。rootValue 中设置37.5的值结合UI设计稿2x的设计图开发，引用的时候css直接写宽375px就相当于100％，它会自动根据屏幕进行计算成rem。如果rootValue 设置为75，则引用时写宽750px就相当于100％（这是因为Vant组件默认10rem为100%）。selectorBlackList中写不想被转成rem的类名。

第四步：在main.js中引入amfe-flexible

import 'amfe-flexible';