Vant组件库的三种引用方式
官网地址 https://vant-contrib.gitee.io/vant/#/zh-CN
一、全局引入所有组件
main.js中配置以下代码
import Vant from 'vant'
import 'vant/lib/index.css' //引入vant所有组件样式
Vue.use(Vant) //全局注册
页面使用
<van-button type="primary" @click="btn">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
二、手动按需引入组件
代码如下
import { Button } from 'vant';//button组件
import 'vant/lib/button/style' //button样式
//注册
components: {
//注册button组件
VanButton: Button
// 等价于
// [Button.name]: Button,
}
页面使用
<van-button type="primary" @click="btn">主要按钮</van-button>
<van-button type="success">成功按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-button type="warning">警告按钮</van-button>
<van-button type="danger">危险按钮</van-button>
三、全局自动按需引入组件
1.全局下载babel-plugin-import (Vant 4.0 版本开始,将不再支持)
yarn add babel-plugin-import
2.babel-plugin-import配置相关配置,然后重启服务器
//babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
3.main.js中全局按需引入某个组件 Vue.use全局注册
import { Button, Form, Field, CellGroup } from 'vant';//button组件
Vue.use(Button) //真正注册的组件名叫VanButton
Vue.use(Form)
Vue.use(Field)
Vue.use(CellGroup)