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，使用指南請移步文檔網站。

本文首發於有贊技術博客。