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