菜鸟看前端（vant ui的按需引入）

vant-ui按需引入

1. 安装vant-ui
   vant-ui官网

2. 要实现按需引入我们先要安装一个插件

npm i babel-plugin-import -D

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

3. 然后再 babel.config.js里面配置代码如下

 "plugins": [
    ["import", {
     
      "libraryName": "vant",
      "libraryDirectory": "es",
      "style": true
    }]
  ]

4. 新建一个vant文件夹里面新建index.js

import Vue from 'vue'; // 引入vue实例
// 引入所需要的组件
import {
      Search, Swipe, SwipeItem ,Tabbar,TabbarItem} from 'vant';
// 把引入的组件注册到vue实例上
Vue.use(Swipe);
Vue.use(SwipeItem);
Vue.use(Search);
Vue.use(Tabbar);
Vue.use(TabbarItem);

5. 在main.js中引入vant ui的css样式，把vant文件夹下的index.js引入

// 按需引入vant
import 'vant/lib/icon/local.css'
import '../src/vant/index.js'