Vant入門

時間 2019-11-13

標籤 vant 入門简体版

原文原文鏈接

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框架
https://blog.csdn.net/qq_36538012/article/details/82152052git

特性

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