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: ['*']
          })
        ]
      }
    }
  }