今天主要讲一下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的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，我会第一时间回复。
就到这里了，休息休息一会儿吧：）明天继续加油噢！
网友评论