今天主要讲一下vant和vue是怎么融合使用的。
之前有跟大家简单介绍过vant,这是通过一个刚认识的朋友介绍的这个框架,后来看了它的凯发体育官方app官网等,感觉很友好,所以今天就跟大家一块学习一下如何将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
当当当,效果直接就出来了!
随着我们使用频率起来越高,我们应用vant的效率也会越来越快的!加油!
工作流效率概念
可能我的视频是会罗嗦一些,只是为了让所有刚步入前端学习vue的小伙伴们都能明白。如果有什么建议或者有哪些不懂的地方,欢迎给我留言,我会第一时间回复。
就到这里了,休息休息一会儿吧:)明天继续加油噢!
凯发体育官方app的版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。