移动端使用vant-ui，局部引入方案

安装

安装方式就不赘述了，按照官网方法。

问题

我是在vue-cli3.0基础上创建的项目，但是最后在配置PostCSS时出问题了，打包时报错：Invalid options in vue.config.js: "plugins" is not allowed，这个问题是在vue.config.js中配置需要通过pluginOptions中去配置。

// vue.config.js
module.exports = {
  pluginOptions: {
    'autoprefixer': {
      browsers: ['Android >= 4.0', 'iOS >= 7']
    },
    'postcss-pxtorem': {
      rootValue: 37.5,
      propList: ['*']
    }
  }
}

局部引入组件

由于移动端用不到多少vant中的组件，如果将组件全部打包进去，SPA页面本来就首页加载比较慢（不包括SSR开发方式），所以就进行了局部引入,这样就不用在每个组件中去引入（过于繁琐），全部引入（打包过大，没必要）

// main.js
import Vue from 'vue'
import App from './App.vue'
import { Button, Toast } from 'vant'

Vue.config.productionTip = false

Vue.use(Button, Toast)

new Vue({
  render: h => h(App),
}).$mount('#app')

这样就可以在组件中直接使用vant的组件了

// test.vue