Vant - 高效的Vue 組件庫，再造一個有贊移動商城也不在話下
Vant ( ˈvænt )是有贊前端團隊基於有贊統一的規範實現的Vue組件庫，提供了一整套UI基礎組件和業務組件。通過Vant，可以快速搭建出風格統一的頁面，提升開發效率。目前已有近50個組件，這些組件被廣泛使用於有讚的各個移動端業務中。我們會在此基礎上不斷完善，開發更多實用的組件。
我們的目標是更快、更簡單開發基於Vue 的美觀易用的移動站點。如果你需要開發一個移動商城，用Vant 就再合適不過了。
一、特性
- 48+ 個經過有贊線上業務檢驗的組件
- 單測覆蓋率超過90%
- 完善詳實的中英文文檔
- 專門的設計師團隊維護視覺規範，統一而優雅
- 支持babel-plugin-import
- 支持TypeScript
建議搭配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。
