vant-ui按需引入
-
安装vant-ui
vant-ui官网 -
要实现按需引入我们先要安装一个插件
npm i babel-plugin-import -D
babel-plugin-import 是一款 babel 插件,它会在编译过程中将 import 的写法自动转换为按需引入的方式
- 然后再 babel.config.js里面配置代码如下
"plugins": [
["import", {
"libraryName": "vant",
"libraryDirectory": "es",
"style": true
}]
]
- 新建一个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);
- 在main.js中引入vant ui的css样式,把vant文件夹下的index.js引入
// 按需引入vant
import 'vant/lib/icon/local.css'
import '../src/vant/index.js'