Vant - 高效的 Vue 组件库，再造一个有赞移动商城也不在话下

Vant ( \ˈvænt\ ) 是有赞前端团队基于有赞统一的规范实现的 Vue 组件库，提供了一整套 UI 基础组件和业务组件。经过 Vant，能够快速搭建出风格统一的页面，提高开发效率。目前已有近50个组件，这些组件被普遍使用于有赞的各个移动端业务中。咱们会在此基础上不断完善，开发更多实用的组件。

咱们的目标是更快、更简单开发基于 Vue 的美观易用的移动站点。若是你须要开发一个移动商城，用 Vant 就再合适不过了。

1、特性

• 组件都是来源于有赞的微商城业务，而且通过有赞业务的检验，更靠谱
• 完善详实的 中文文档
• 专门的设计师团队维护视觉规范，统一而优雅
• 支持 babel-plugin-import
• 单测覆盖率超过90%

建议搭配 webpack，babel 使用 Vant，这样可使用 webpack 提供的丰富插件和个性化配置。Vant 支持了 babel-plugin-import，经过 babel 插件使用 Vant，能够优化代码体积，提升前端性能。

Vant 提供了详细的文档，每一个组件各个功能点都有详细的说明和代码示例。若是须要使用对应功能，直接复制文档上的代码便可。

固然，这些只能让 Vant 成为一个优秀的 Vue UI 组件。那么，Vant 相比其它 Vue UI 组件库的优点在哪里？

2、丰富实用的业务组件

Vant 不仅是提供基础的UI组件，为了方便开发者快速构建移动商城，Vant 增长了许多移动商城内经常使用的业务组件。相似于sku选择，优惠券选择，省市县选择 等。

Vant 以后会不断丰富业务组件。从下面的不完整规划图能够看到，咱们会把适用于不一样业务场景的组件进行整理，逐渐完善成一个大的电商商城组件体系。罗列的大部分组件都已经在整理，近期会补充到 Vant 中。

一、SKU 选择组件

在商品页，选择商品规格进行购买是一个常见的业务场景。商品能够有多层级多种类sku，再考虑常见的限购、库存展现、购买留言、sku对应展现图片等功能，整个商品规格选择过程会变得很复杂。Vant 提供的 Sku 组件，经过指定数据传入后，便可知足上述全部需求。

常见的购买过程当中，数量选择只支持经过点按加减来更改购买数量。可是在须要大量购买的场景下，手动输入购买数量会更方便用户操做，咱们将 Sku 组件的购买数量支持了用户直接输入数字。同时，在用户输入时，会根据限购数量自动判断是否能够购买，并进行购买数量调节。

商品留言方面，Sku 组件提供了各类形式的商品留言支持，包括身份证、文本、电话、日期、时间、邮件。支持必填商品留言的展现与校验。

二、Area 省市县选择

Vant 提供了常见的省市县选择功能，将指定数据格式的省市县列表数据传入后，便可展现。Area 支持少于三列的选择方式，参数 columnsNum 可指定 Area 须要展现的列数，知足特殊场景下，只须要选择省或者省市的状况。

Area 对外提供了 cancel，confirm 事件。开发者在代码中监听此事件，便可捕捉到用户的操做，并进行相应的处理。

三、Coupon 优惠券选择器

优惠券选择器提供了优惠券单元格和优惠券选择功能。

优惠券单元格只需传入优惠券列表和当前使用的优惠券便可正确展现。使用 editable 参数能够控制优惠券单元格是否展现右侧箭头，这个能够用于提醒用户可否切换优惠券。

优惠券选择模块功能较多。优惠券选择支持优惠码兑换功能，用户在填入优惠码之后，点击兑换，即会触发 exchange 事件。开发者在代码中监听此事件，能够实现本身的优惠码兑换。同时，优惠券选择列表支持优惠券可用和不可用的展现，对优惠券不一样状态不一样的展现，对用户更加友好。

在近期，优惠券选择器会支持开发者自由替换优惠券选择列表中，每项优惠券的展现方式。

Next: 地址选择大组件 Address

近期，咱们会发布地址选择组件，完善 Vant 组件在地址管理方面的功能。

Demo

如下是一个基于 Vant 搭建的商城 demo，数据经过mock，生成的完整的购物流程。搭配优惠促销活动和用户管理界面，一个简单的买家商城就完成了。

3、展望

Vant 如今还有不少不足。业务组件才刚起步，不够完善，须要补充更多业务组件到 Vant 中。缺少英文文档以及对 flow / typescript 的支持。指望获得你们的批评和建议，一块儿创建一个更好的 Vant。

完整代码请移步 github，使用指南请移步文档网站。

本文首发于有赞技术博客。