vue教程系列第第四十五节-vant与vue的完美结合

今天主要讲一下vant和vue是怎么融合使用的。

之前有跟大家简单介绍过vant，这是通过一个刚认识的朋友介绍的这个框架，后来看了它的官网等，感觉很友好，所以今天就跟大家一块学习一下如何将vant应用到vue中去，以便提高我们的编程效率。

WX20181015-195309@2x.png

首先先介绍一下vant:

Vant是有赞前端团队基于有赞统一的规范实现的Vue 组件库，提供了一整套UI 基础组件和业务组件。通过Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有超过50个组件。

vant特性：

• 组件都是来源于有赞的微商城业务，并且经过有赞业务的检验，更靠谱
  完善详实的 中文文档
• 专门的设计师团队维护视觉规范，统一而优雅
• 支持 babel-plugin-import
• 单测覆盖率超过90%

• 我们可以看一下它的github上的star数已经达到6000多，而且可以看到他们的更新也是很勤快的。如果大家还没有找到一个合适的UI框架与VUE结合的话，Vant是一个不错的选择。

  
  WX20181015-195309@2x.png

安装

用npm包安装Vant:

npm install vant --save-dev

引入组件

在main.js里导入所有组件：

import Vant from 'vant'
import 'vant/lib/vant-css/index.css'
Vue.use(Vant);

接下来我们就可以在我们的页里面大摇大摆地使用Vant了。我们可以做个测试，比如我们在About.vue里添加一下button

<van-button type="default">默认按钮</van-button>
<van-button type="primary">主要按钮</van-button>

当当当，效果直接就出来了！

随着我们使用频率起来越高，我们应用Vant的效率也会越来越快的！加油！

可能我的视频是会罗嗦一些，只是为了让所有刚步入前端学习vue的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，我会第一时间回复。

就到这里了，休息休息一会儿吧：）明天继续加油噢！