今天主要讲一下vant和vue是怎么融合使用的。
之前有跟大家简单介绍过vant，这是通过一个刚认识的朋友介绍的这个框架，后来看了它的官网等，感觉很友好，所以今天就跟大家一块学习一下如何将vant应用到vue中去，以便提高我们的编程效率。
首先先介绍一下vant:
Vant是有赞前端团队基于有赞统一的规范实现的Vue 组件库，提供了一整套UI 基础组件和业务组件。通过Vant，可以快速搭建出风格统一的页面，提升开发效率。目前已有超过50个组件。
vant特性：
- 组件都是来源于有赞的微商城业务，并且经过有赞业务的检验，更靠谱
- 完善详实的 中文文档
- 专门的设计师团队维护视觉规范，统一而优雅
- 支持 babel-plugin-import
- 单测覆盖率超过90%
我们可以看一下它的github上的star数已经达到6000多，而且可以看到他们的更新也是很勤快的。如果大家还没有找到一个合适的UI框架与VUE结合的话，Vant是一个不错的选择。
用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的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方，欢迎给我留言，我会第一时间回复。
就到这里了，休息休息一会儿吧：）明天继续加油噢！
版权声明：本文内容由互联网用户自发贡献，该文观点仅代表作者本人。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容， 请发送邮件至 举报，一经查实，本站将立刻删除。