官方文档:Vant 2 - Mobile UI Components built on Vue
方式一:自动按需引入组件
第一步:安装vant-ui
yarn add vant@latest-v2
第二步:引入vant-ui
//安装按需引入插件
yarn add babel-plugin-import -D
在babel.config.js中配置
// 在 babel.config.js 中配置(vant按需引入的插件配置)
module.exports = {
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
};
在/src/main.js中引入
//按需引入vant-ui组件
import { Button, Rate } from 'vant';
//引入CSS
import 'vant/lib/index.css';
Vue.use(Button).use(Rate);
第三步:打开官网复制代码,粘贴到需要用组件的地方
方式二: 导入所有组件
直接在/src/main.js中引入
import Vue from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';
Vue.use(Vant);