vue-cli3 vant rem适配

1、首先我们要安装vant
yarn add vant

2、安装自动按需引入组件
yarn add babel-plugin-import --save

3、配置文件，在babel.config.js

module.exports = {
  presets: [
    '@vue/cli-plugin-babel/preset'
  ],
  plugins: [
    ['import', {
      libraryName: 'vant',
      libraryDirectory: 'es',
      style: true
    }, 'vant']
  ]
}

4、在组件中使用
<template>
  <div class="home">
    <van-button type="info">信息按钮</van-button>
 </div>
</template>

<script>
import { Button } from 'vant'
export default {
  name: 'Home',
  components: {
    [Button.name]: Button
  },
  created () {
    console.log(process.env.NODE_ENV)
  }
}
</script>

5、接着我们解决vant和rem的适配问题
Vant 中的样式默认使用px作为单位，如果需要使用rem单位，需要安装已下两个插件
postcss-pxtorem 是一款 postcss 插件，用于将单位转化为 rem
lib-flexible 用于设置 rem 基准值

yarn add postcss-pxtorem --save
yarn add amfe-flexible --save

安装完成之后需要全局配置
首先在main.js引入amfe-flexible
import 'amfe-flexible/index.js'


还要在vue.config.js中添加配置

// 先引入
const autoprefixer = require('autoprefixer')
const pxtorem = require('postcss-pxtorem')

在moudle.exports中添加一下配置
css: {
    loaderOptions: {
      postcss: {
        plugins: [
          autoprefixer({
            overrideBrowserslist: [
              'Android 4.1',
              'iOS 7.1',
              'Chrome > 31',
              'ff > 31',
              'ie >= 8'
            ]
          }),
          pxtorem({
            rootValue: 37.5,
            propList: ['*']
          })
        ]
      }
    }
  }