Vant入门

Vant是什么

简介

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

有赞

看完，你可能会问，“有赞”是什么鬼？

好像是一个微商城，帮你搭建微商网站的好像，而且在香港已上市，好像是浙江的公司，看官网的网址注册2012年就有了，不过我之前没听过。

既然是搭建平台的公司，所以技术应该还可以。

官网：https://www.youzan.com/?from_source=baidu_pz_shouye_0

流行度

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

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

推荐21个顶级的Vue UI库！

http://blog.talkingdata.com/?p=5993

推荐10个常用的Vue UI库

https://www.sohu.com/a/239663533_468707

2018年九个很受欢迎的vue前端UI框架

https://blog.csdn.net/qq_36538012/article/details/82152052

特性

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

重要

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

另外，它除了了mobile组件，还有专门的小程序组件库，官网地址是：

https://youzan.github.io/vant-weapp/#/intro

Vant的基本知识

读法

Vant(/ˈvænt/)

英语并没有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