Vant入门

Vant是有赞开源的一套基于Vue2.0的Mobile组件库。通过Vant,可以快速搭建出风格统一的页面,提升开发效率。目前已有近50个组件,这些组件被广泛使用于有赞的各个移动端业务中。Vant旨在更快、更简单地开发基于Vue的美观易用的移动站点。特性组件都是来源于有赞的微商城业务,并且经过有赞业务的检验,更靠谱完善详实的中文文档专门的设计师团队维护视觉规范,统一而优雅支持babel-plugin-import单测覆盖率超过90%建议搭配webpack,babel使用Vant。

流行度

流行度怎样?坦白说,我也不知道,但是根据不怎么好。因为不可能统计到多少人在用,只能通过github上的star、各大技术论坛、博客的出现频率来判断流行度。

我百度搜索“vue.js ui库”,出现了很多ui库,但都没有见vant的踪影,主要是element、vux、ivew等这些。不过,既然项目在用,学习一下也是很好的。

  • 50+ 个经过有赞线上业务检验的组件
  • 单元测试覆盖率超过 80%
  • 完善的中英文文档和示例
  • 支持 babel-plugin-import
  • 支持 TypeScript
  • 支持 SSR

简介里说的很清楚,vant是mobile的,也就是适用于手机移动端的vue,如果你开发的是pc端的vue,那就可能就用不了vant组件库。

Vant(/ˈvænt/)

英语并没有vant这个单词。

开原协议

MIT。
所以可以放心用。

vue.js环境

因为vant是基于vue的,所以默认你应该已经安装好vue的开发环境。包括nodejs、npm等。

安装vant

npm i vant -S

yarn add vant

<!-- 引入样式 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@1.5/lib/index.css"> <!-- 引入组件 --> <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@1.5/lib/vant.min.js"></script> 

官网列出了三种安装方法(不是三个步骤,一步步完成哦)。我一般还是使用npm来安装。

yarn是什么?
官网介绍:快速、可靠、安全的依赖管理工具。可以理解为包管理器。与npm相似。目前已经有部分人从npm转向了yarn。
官网:https://yarnpkg.com/zh-Hans/
github:https://github.com/yarnpkg/yarn/
目前有34201个star。
中文网?:https://yarn.bootcss.com
某博客对yarn的简介:
Yarn发布于2016年10月,并在Github上迅速拥有了2.4万个Star。而npm只有1.2万个Star。这个项目由一些高级开发人员维护,包括了Sebastian McKenzie(Babel.js)和Yehuda Katz(Ember.js、Rust、Bundler等)。

目前(19-1-5)最新的版本是1.5.1
版本的更新比较频繁,看得出比较活跃。每个月至少2个版本,多的有差不多10个版本。
官网列出每个版本的内容,和对应的PR(pull request)编号。
最老的列出了0.5.2版本(2017.4.26)。下面列出三个重要版本。

2019-01-01
Improvements
Card: 新增 price、num 插槽 #2416
Slider: 新增 button 插槽 #2373
Slider: 新增 active-color、inactive-color 属性 #2374
Tabbar: 新增 active-color 属性 #2372
Sku: 新增 sku-selected 事件 #2386

Bug Fixes
修复 Card 描述过长时的样式问题 #2414
修复 ContactList 未注册依赖的 button 组件的问题 #2415
修复 Icon 在 file 协议网页下无法展示的问题 #2385

2018-03-19

Breaking changes
新增 List 组件 #682
新增 Collapse 组件 #674
构建: 升级至 webpack 4,优化构建配置 #693
Popup: 新增 lock-scroll 属性,废弃 lock-on-scroll、prevent-scroll 属性 #688
Waterfall 组件不再维护,推荐使用 List 组件代替 #683

Improvements
AddressEdit: 新增 show-delete 属性 #716
SwipeCell: 优化 Swipe 动画流畅度 #685
Field: 支持配置 au为size 最大/最小高度 #718
Locale: 精简 i18n 配置文档 #701
PullRefresh: 支持手动触发 loading 动画 #684
Switch: 新增 size 属性,支持自定义尺寸 #723
Sku: 新增头部金额插槽 #705
Sku: 优化 DOM 结构 #704
Tab: 支持通过滑动手势进行切换 #694 #695
Tag: 调整标签样式 #689
Toast: 支持通过 Vue.use 注册 #690

Bug Fixes
修复 Actionsheet 下边框未展示的问题 #686
修复 AddressEdit 在数据变更时未正确选中省市区的问题 #680
修复 Stepper value 溢出的问题 #691
修复 Badge 选中时字体粗细 #687

2017-04-26
Improvements
新增 Picker 组件测试用例 #20
新增 Col & Row 组件测试用例 #16
新增 Uploader 单元测试 #9

Bug Fixes
修复 Webpack 打包错误 #21
修复 Toast 关闭时未移除 Dom 节点的问题 #19
修复组件样式问题 #5

2019.1.5

原文链接:https://www.cnblogs.com/ouyida3/p/10225567.html

原创文章,作者:优速盾-小U,如若转载,请注明出处:https://www.cdnb.net/bbs/archives/5250

(0)
上一篇 2022年7月30日 22:12
下一篇 2022年7月30日 22:12

相关推荐

发表回复

您的电子邮箱地址不会被公开。 必填项已用*标注

优速盾注册领取大礼包www.cdnb.net
/sitemap.xml