一、vant 组件库
目标:认识第三方 Vue组件库 vant-ui
组件库:第三方 封装 好了很多很多的 组件,整合到一起就是一个组件库。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/
二、其他 Vue 组件库
目标:了解其他 Vue 组件库
Vue的组件库并不是唯一的,vant-ui 也仅仅只是组件库的一种。
一般会按照不同平台进行分类:
① PC端:
(element-plus)
ant-design-vue
② 移动端:
vant-ui
Mint UI (饿了么)
Mint UIhttps://mint-ui.github.io/#!/zh-cn
Cube UI (滴滴)
cube-ui Documenthttps://didi.github.io/cube-ui/#/zh-CN
三、全部导入
官网:Vant 2 - Mobile UI Components built on Vue
全部导入:
① 安装 vant-ui
yarn add vant@latest-v2
② main.js 中注册
import Vant from 'vant'
import 'vant/lib/index.css'
// 把vant中所有的组件都导入了
Vue.use(Vant)
③ 使用测试 (App.vue/vue组件)
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
四、局部导入
自动按需导入:
① 安装 vant-ui (已安装)
yarn add vant@latest-v2
② 安装插件
npm i babel-plugin-import -D
(或者 我上面的报错了 下面的没报错)yarn add babel-plugin-import -D
③ babel.config.js 中配置
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
['import', {
libraryName: 'vant',
libraryDirectory: 'es',
style: true
}, 'vant']
]
}
④ main.js 按需导入注册
// 按需导入
import { Button, Switch } from 'vant'
Vue.use(Button)
Vue.use(Switch)
⑤ 测试使用
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
⑥ 提取到 vant-ui.js 中,main.js 导入
// 导入按需导入的配置文件
import '@/utils/vant-ui'
例:
main.js
import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/utils/vant-ui'
// 全部导入
// import Vant from 'vant'
// import 'vant/lib/index.css'
// // 插件安装初始化:内部会将所有vant组件进行导入注册
// Vue.use(Vant)
Vue.config.productionTip = false
new Vue({
router,
store,
render: h => h(App)
}).$mount('#app')
App.vue
<template>
<div id="app">
<!-- 测试代码 -->
<van-button type="primary">主要按钮</van-button>
<van-button type="info">信息按钮</van-button>
<van-button type="default">默认按钮</van-button>
<van-switch v-model="checked" />
<van-rate v-model="score" />
<router-view/>
</div>
</template>
<script>
export default {
data () {
return {
checked: true,
score: 5
}
}
}
</script>
<style lang="less">
</style>
vant-ui.js
import Vue from 'vue'
// 按需导入
import { Button, Switch, Rate } from 'vant'
Vue.use(Button)
Vue.use(Switch)
Vue.use(Rate)