Vant ( \ˈvænt\ ) 是有贊前端團隊基於有贊統一的規範實現的 Vue 元件庫，提供了一整套 UI 基礎元件和業務元件。通過 Vant，可以快速搭建出風格統一的頁面，提升開發效率。目前已有近50個元件，這些元件被廣泛使用於有讚的各個移動端業務中。我們會在此基礎上不斷完善，開發更多實用的元件。
我們的目標是更快、更簡單開發基於 Vue 的美觀易用的移動站點。如果你需要開發一個移動商城，用 Vant 就再合適不過了。
一、特性
- 元件都是來源於有讚的微商城業務，並且經過有贊業務的檢驗，更靠譜
- 完善詳實的 中文文件
- 專門的設計師團隊維護視覺規範，統一而優雅
- 支援 babel-plugin-import
- 單測覆蓋率超過90%
建議搭配 webpack，babel 使用 Vant，這樣可以使用 webpack 提供的豐富外掛和個性化配置。Vant 支援了 babel-plugin-import，通過 babel 外掛使用 Vant，可以優化程式碼體積，提高前端效能。
Vant 提供了詳細的文件，每個元件各個功能點都有詳細的說明和程式碼示例。如果需要使用對應功能，直接複製文件上的程式碼即可。
當然，這些只能讓 Vant 成為一個優秀的 Vue UI 元件。那麼，Vant 相比其它 Vue UI 元件庫的優勢在哪裡？
二、豐富實用的業務元件
Vant 不只是提供基礎的UI元件，為了方便開發者快速構建移動商城，Vant 增加了許多移動商城內常用的業務元件。類似於sku選擇，優惠券選擇，省市縣選擇 等。
Vant 之後會不斷豐富業務元件。從下面的不完整規劃圖可以看到，我們會把適用於不同業務場景的元件進行整理，逐漸完善成一個大的電商商城元件體系。羅列的大部分元件都已經在整理，近期會補充到 Vant 中。
1、SKU 選擇元件
在商品頁，選擇商品規格進行購買是一個常見的業務場景。商品可以有多層級多種類sku，再考慮常見的限購、庫存展示、購買留言、sku對應展示圖片等功能，整個商品規格選擇過程會變得很複雜。Vant 提供的 Sku 元件，通過指定資料傳入後，即可滿足上述所有需求。
常見的購買過程中，數量選擇只支援通過點按加減來更改購買數量。但是在需要大量購買的場景下，手動輸入購買數量會更方便使用者操作，我們將 Sku 元件的購買數量支援了使用者直接輸入數字。同時，在使用者輸入時，會根據限購數量自動判斷是否可以購買，並進行購買數量調節。
商品留言方面，Sku 元件提供了各種形式的商品留言支援，包括身份證、文字、電話、日期、時間、郵件。支援必填商品留言的展示與校驗。
2、Area 省市縣選擇
Vant 提供了常見的省市縣選擇功能，將指定資料格式的省市縣列表資料傳入後，即可展示。Area 支援少於三列的選擇方式，引數 columnsNum 可指定 Area 需要展示的列數，滿足特殊場景下，只需要選擇省或者省市的情況。
Area 對外提供了 cancel，confirm 事件。開發者在程式碼中監聽此事件，即可捕捉到使用者的操作，並進行相應的處理。
3、Coupon 優惠券選擇器
優惠券選擇器提供了優惠券單元格和優惠券選擇功能。
優惠券單元格只需傳入優惠券列表和當前使用的優惠券即可正確展示。使用 editable 引數可以控制優惠券單元格是否展示右側箭頭，這個可以用於提醒使用者能否切換優惠券。
優惠券選擇模組功能較多。優惠券選擇支援優惠碼兌換功能，使用者在填入優惠碼以後，點選兌換，即會觸發 exchange 事件。開發者在程式碼中監聽此事件，可以實現自己的優惠碼兌換。同時，優惠券選擇列表支援優惠券可用和不可用的展示，對優惠券不同狀態不同的展示，對使用者更加友好。
在近期，優惠券選擇器會支援開發者自由替換優惠券選擇列表中，每項優惠券的展示方式。
Next: 地址選擇大元件 Address
近期，我們會發布地址選擇元件，完善 Vant 元件在地址管理方面的功能。
Demo
以下是一個基於 Vant 搭建的商城 demo，資料通過mock，生成的完整的購物流程。搭配優惠促銷活動和使用者管理介面，一個簡單的買家商城就完成了。
三、展望
Vant 現在還有很多不足。業務元件才剛起步，不夠完善，需要補充更多業務元件到 Vant 中。缺乏英文文件以及對 flow / typescript 的支援。期望得到大家的批評和建議，一起建立一個更好的 Vant。
本文首發於有贊技術部落格。