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
