Vant是什么
简介
Vant是有赞开源的一套基于Vue2.0的Mobile组件库。经过Vant,能够快速搭建出风格统一的页面,提高开发效率。目前已有近50个组件,这些组件被普遍使用于有赞的各个移动端业务中。Vant旨在更快、更简单地开发基于Vue的美观易用的移动站点。特性组件都是来源于有赞的微商城业务,而且通过有赞业务的检验,更靠谱完善详实的中文文档专门的设计师团队维护视觉规范,统一而优雅支持babel-plugin-import单测覆盖率超过90%建议搭配webpack,babel使用Vant。css
有赞
看完，你可能会问，“有赞”是什么鬼？ 好像是一个微商城，帮你搭建微商网站的好像，并且在香港已上市，好像是浙江的公司，看官网的网址注册2012年就有了，不过我以前没听过。 既然是搭建平台的公司，因此技术应该还能够。 官网：https://www.youzan.com/?from_source=baidu_pz_shouye_0html
流行度
流行度怎样？坦白说，我也不知道，可是根据不怎么好。由于不可能统计到多少人在用，只能经过github上的star、各大技术论坛、博客的出现频率来判断流行度。前端
我百度搜索“vue.js ui库”，出现了不少ui库，但都没有见vant的踪迹，主要是element、vux、ivew等这些。不过，既然项目在用，学习一下也是很好的。vue
推荐21个顶级的Vue UI库！ http://blog.talkingdata.com/?p=5993node
推荐10个经常使用的Vue UI库 https://www.sohu.com/a/239663533_468707webpack
2018年九个很受欢迎的vue前端UI框架 http://www.javashuo.com/article/p-ecvhxtem-ks.htmlgit
特性
- 50+ 个通过有赞线上业务检验的组件
- 单元测试覆盖率超过 80%
- 完善的中英文文档和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
重要
简介里说的很清楚，vant是mobile的，也就是适用于手机移动端的vue，若是你开发的是pc端的vue，那就可能就用不了vant组件库。github
另外，它除了了mobile组件，还有专门的小程序组件库，官网地址是： https://youzan.github.io/vant-weapp/#/introweb
Vant的基本知识
读法
Vant(/ˈvænt/)npm
英语并无vant这个单词。
官网
https://youzan.github.io/vant/#/zh-CN/intro
github地址： https://github.com/youzan/vant/blob/HEAD/README.zh-CN.md 默认是英文版，能够点击中文版。目前(2019-1-5)已经有7108个star。
开原协议
MIT。 因此能够放心用。
开始写代码
vue.js环境
由于vant是基于vue的，因此默认你应该已经安装好vue的开发环境。包括nodejs、npm等。
安装vant
NPM
npm i vant -S
YARN
yarn add vant
CDN
<!-- 引入样式 --> <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等）。
组件
50多个组件，每个组件官方都有详细的示例代码，最值得一赞的是右侧有相应的UI展现，很是人性化，因此学习起来比较直观容易。好比button组件： https://youzan.github.io/vant/#/zh-CN/button
后记
写代码以前，都应该先多看看vue.js官网的风格指南，它会指南你更好的编码方式，包括组件的命名规范等，我参考资料里列出了地址。vant里也是推荐这种风格（见：https://youzan.github.io/vant/#/zh-CN/style-guide）。虽然可能有人会说：很差的风格，代码运行起来看上去同样的：(
附录
版本
目前(19-1-5)最新的版本是1.5.1 版本的更新比较频繁，看得出比较活跃。每月至少2个版本，多的有差很少10个版本。 官网列出每一个版本的内容，和对应的PR(pull request)编号。 最老的列出了0.5.2版本（2017.4.26）。下面列出三个重要版本。
v1.5.1
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
v1.0.0
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
v0.5.2
2017-04-26 Improvements 新增 Picker 组件测试用例 #20 新增 Col & Row 组件测试用例 #16 新增 Uploader 单元测试 #9
Bug Fixes 修复 Webpack 打包错误 #21 修复 Toast 关闭时未移除 Dom 节点的问题 #19 修复组件样式问题 #5
参考资料
vant官网 vant github官网 vuejs官网-风格指南 一文看懂npm、yarn、pnpm之间的区别
2019.1.5