Vant是什麼
簡介
Vant是有贊開源的一套基於Vue2.0的Mobile組件庫。經過Vant,能夠快速搭建出風格統一的頁面,提高開發效率。目前已有近50個組件,這些組件被普遍使用於有讚的各個移動端業務中。Vant旨在更快、更簡單地開發基於Vue的美觀易用的移動站點。特性組件都是來源於有讚的微商城業務,而且通過有贊業務的檢驗,更靠譜完善詳實的中文文檔專門的設計師團隊維護視覺規範,統一而優雅支持babel-plugin-import單測覆蓋率超過90%建議搭配webpack,babel使用Vant。css
有贊
看完，你可能會問，「有贊」是什麼鬼？ 好像是一個微商城，幫你搭建微商網站的好像，並且在香港已上市，好像是浙江的公司，看官網的網址註冊2012年就有了，不過我以前沒聽過。 既然是搭建平臺的公司，因此技術應該還能夠。 官網：https://www.youzan.com/?from_source=baidu_pz_shouye_0html
流行度
流行度怎樣？坦白說，我也不知道，可是根據不怎麼好。由於不可能統計到多少人在用，只能經過github上的star、各大技術論壇、博客的出現頻率來判斷流行度。前端
我百度搜索「vue.js ui庫」，出現了不少ui庫，但都沒有見vant的蹤跡，主要是element、vux、ivew等這些。不過，既然項目在用，學習一下也是很好的。vue
推薦21個頂級的Vue UI庫！ http://blog.talkingdata.com/?p=5993node
推薦10個經常使用的Vue UI庫 https://www.sohu.com/a/239663533_468707webpack
2018年九個很受歡迎的vue前端UI框架 http://www.javashuo.com/article/p-ecvhxtem-ks.htmlgit
特性
- 50+ 個通過有贊線上業務檢驗的組件
- 單元測試覆蓋率超過 80%
- 完善的中英文文檔和示例
- 支持 babel-plugin-import
- 支持 TypeScript
- 支持 SSR
重要
簡介裏說的很清楚，vant是mobile的，也就是適用於手機移動端的vue，若是你開發的是pc端的vue，那就可能就用不了vant組件庫。github
另外，它除了了mobile組件，還有專門的小程序組件庫，官網地址是： https://youzan.github.io/vant-weapp/#/introweb
Vant的基本知識
讀法
Vant(/ˈvænt/)npm
英語並無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