vant 组件库按需引用

文档

官网

安装vant

npm i vant -S

自动按需引入组件 （推荐）

babel-plugin-import 是一款 babel 插件，它会在编译过程中将 import 的写法自动转换为按需引入的方式。

1、安装 babel-plugin-import

npm i babel-plugin-import -D

2、将 babel.config.js文件修改为

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

3、创建按需加载lazy_use.js文件

import Vue from 'vue';
import { Toast } from 'vant';
import { Cell, CellGroup } from 'vant';
import { IndexBar, IndexAnchor } from 'vant';
import { NoticeBar } from 'vant';
import { Search } from 'vant';
import { Button } from 'vant';
import { ActionSheet } from 'vant';
import { Loading } from 'vant';
import { Empty } from 'vant';
import { Popup } from 'vant';
import { Picker } from 'vant';
import { Form } from 'vant';
import { Field } from 'vant';
import { Tag } from 'vant';
import { Uploader } from 'vant';
Vue.use(Toast);
Vue.use(Cell);
Vue.use(CellGroup);
Vue.use(IndexBar);
Vue.use(IndexAnchor);
Vue.use(NoticeBar);
Vue.use(Search);
Vue.use(Button);
Vue.use(ActionSheet);
Vue.use(Loading);
Vue.use(Empty);
Vue.use(Popup);
Vue.use(Picker);
Vue.use(Form);
Vue.use(Field);
Vue.use(Tag);
Vue.use(Uploader);

4、在main.js文件中引用lazy_use.js

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'

import './less/base.less'
import './utils/lazy_use'

Vue.config.productionTip = false

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