Vue2 组件库 之 vant 组件库使用详解

一、vant 组件库

目标：认识第三方 Vue组件库 vant-ui
组件库：第三方 封装 好了很多很多的 组件，整合到一起就是一个组件库。
https://vant-contrib.gitee.io/vant/v2/#/zh-CN/

二、其他 Vue 组件库

目标：了解其他 Vue 组件库
Vue的组件库并不是唯一的，vant-ui 也仅仅只是组件库的一种。
一般会按照不同平台进行分类：

① PC端：

element-ui  Element - The world's most popular Vue UI frameworkElement，一套为开发者、设计师和产品经理准备的基于 Vue 2.0 的桌面端组件库https://element.eleme.cn/#/zh-CN

(element-plus)

快速开始 | Element PlusA Vue 3 based component library for designers and developershttps://element-plus.gitee.io/zh-CN/guide/quickstart.html

ant-design-vue

Ant Design VueAn enterprise-class UI components based on Ant Design and Vuehttps://2x.antdv.com/docs/vue/introduce-cn

② 移动端：

vant-ui

Vant 2 - Mobile UI Components built on VueMobile UI Components built on Vuehttps://vant-contrib.gitee.io/vant/v2/#/zh-CN/

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)