Vant的导入与使用
Vant 全部导入
目标:阅读文档,,掌握全部导入的基本使用
官网:Vant 2 - Mobile UI Components built on Vue
1.安装vant-ui
yarn add vant@latest-v2
2.main.js中注册
import Vant from 'vant'
import 'vant/lib/index.css'
//把vant中所有的组件都导入
Vue.use(Vant)
3.使用测试
<vant-button type="primary">注意按钮</vant-button>
<vant-button type="info">信息按钮</vant-button>
vant按需导入(配合模块化管理)
目标:阅读文档,掌握按需导入的基本使用
按需导入:
1.安装vant-ui(已安装)
yarn add vant@latest-v2
2.安装插件
yarn add babel-plugin-import -D
3.babel.config.js中配置
moodule.exports={
presets:[
'@vue/cli-plugin-babel/preset'
],
plugins:[
['import',{
libraryName:'vant',
libraryDirectory:'es',
style:true
},'vant']
]
}
4.main.js按需导入注册
import Vue from 'vue'
import {Button} from 'vant'
Vue.use(Button);
5.测试使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
注意:这边样式没显示,需要项目重启
模块化开发
1.在src下创建utils文件存放vant-ui.js用于存放导入的vant组件
src/utils/vant-ui.js
import Vue from 'vue';
import { Tabbar, TabbarItem } from 'vant';
Vue.use(Tabbar);
Vue.use(TabbarItem);
2.在main.js中导入vant-ui.js全局注册
//mian.js
import '@/utils/vant-ui'