Vant-好用的Vue组件库,开发更高效！

前提摘要：

在原生的JS和H5C3中，如果想要完成一个完美的输入框或者按钮，弹框等等.....都会非常繁琐，

甚至很多程序员将花了很多时间写好的方法封装成了一个接口以便后续开发调用。但是，有没有一个可以让我们不需要写繁琐的代码，可以直接导入调用的组件呢？答案是一定的。

高效的组件库-Vant

可以登录Vant组件库进行浏览相应的组件，在这里做简要介绍。

Vant Weapp - 轻量、可靠的小程序 UI 组件库

vant组件库提供了Vue2和Vue3都可以使用的丰富组件

丰富的组件让整个开发变得更加简介

如何使用？

以下介绍Vue2中如何使用Vant组件

首先，我们需要安装Vant组件库

建议大家在全局配置中导入组件库，并且按需导入避免资源加载浪费。

以下是我在全局中main.js的配置

import Vue from 'vue'
import App from './App.vue'
import router from './router'
import store from './store'
import '@/utils/vant-ui'
import '@/style/common.less'
import { Search, Swipe, SwipeItem, Grid, GridItem, ActionSheet, Dialog, Checkbox, CheckboxGroup } from 'vant'

import CountBox from './components/CountBox.vue'

Vue.use(Checkbox)
Vue.use(CheckboxGroup)

Vue.use(ActionSheet)

Vue.use(GridItem)
Vue.use(Search)
Vue.use(Swipe)
Vue.use(SwipeItem)
Vue.use(Grid)
Vue.use(CountBox)
Vue.use(Dialog)
// import { Toast } from 'vant'
// // Toast('hh')

new Vue({
  router,
  store,
  render: h => h(App)
}).$mount('#app')

在全局导入并且注册后，就可以进行使用了

可以参照官网的使用说明，例如：

在yarn serve运行服务器后会看到

那么这样一个简单的Vue组件就被封装好了，还有更多好玩的组件可以使用，这里仅介绍Vue2的使用方法，其余的留给大家去探索啦~

欢迎大家进行开发经验的探讨交流，下一篇文章见啦~