02按需导入vant;rem适配;阿里图标

按需引入vant

https://vant-contrib.gitee.io/vant/#/zh-CN/quickstart

plugins/vant.js文件然后在main.js引入

import './plugins/vant'

import Vue from "vue";
import { Button, Loading, Overlay, Toast, Grid, GridItem,Swipe, SwipeItem ,Lazyload  } from 'vant';  // 按需引入
Vue.use(Lazyload);
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Grid);
Vue.use(GridItem);
Vue.use(Button)
Vue.use(Loading)
Vue.use(Overlay)
Vue.use(Toast)

View Code

rem适配

yarn add amfe-flexible

yarn add postcss-pxtorem -D

main.js

import 'amfe-flexible/index.js'

根目录下新建 postcss.config.js

设计稿/10=remUnit

const autoprefixer = require('autoprefixer');

const pxtorem = require('postcss-pxtorem');

module.exports = ({ file }) => {
  let remUnit
  if (file && file.dirname && file.dirname.indexOf('vant') > -1) remUnit = 37.5
  else remUnit = 75

  return {
    plugins:
      [autoprefixer(),
      pxtorem({ rootValue: remUnit, propList: ['*'], selectorBlackList: ['van-circle__layer'] })
      ]
  }
}