簡(jiǎn)介
輕量、可靠的移動(dòng)端 Vue 組件庫(kù)，MIT協(xié)議, 目前github star 數(shù)9k
推薦理由
- 55 個(gè)組件
- 90% 單元測(cè)試覆蓋率
- 完善的中英文文檔和示例
- 支持按需引入
- 支持主題定制
- 支持國(guó)際化
- 支持 TS
- 支持 SSR
瀏覽器支持
現(xiàn)代瀏覽器以及 Android 4.0 , iOS 6
本地開發(fā)
- 安裝
# 通過 npm 安裝npm i vant -S# 通過 yarn 安裝yarn add vant
- 快速上手
- 導(dǎo)入所有組件
import Vue from \’vue\’;import { Button } from \’vant\’;import \’vant/lib/index.css\’;Vue.use(Button);
- 通過 CDN 引入
<!– 引入樣式 –><link rel=\”stylesheet\” href=\”https://cdn.jsdelivr.net/npm/vant@2.0/lib/index.css\”><!– 引入組件 –><script src=\”https://cdn.jsdelivr.net/npm/vue/dist/vue.min.js\”></script><script src=\”https://cdn.jsdelivr.net/npm/vant@2.0/lib/vant.min.js\”></script><script>var Vue = window.Vue;var vant = window.vant;// 注冊(cè)組件Vue.use(vant);// 調(diào)用函數(shù)式組件vant.Toast(\’提示\’);</script>
- 自動(dòng)按需引入組件 (推薦)
babel-plugin-import 是一款 babel 插件，它會(huì)在編譯過程中將 import 的寫法自動(dòng)轉(zhuǎn)換為按需引入的方式。
# 安裝插件npm i babel-plugin-import -D// 在.babelrc 中添加配置// 注意：webpack 1 無需設(shè)置 libraryDirectory{ \”plugins\”: [ [\”import\”, { \”libraryName\”: \”vant\”, \”libraryDirectory\”: \”es\”, \”style\”: true }] ]}// 對(duì)于使用 babel7 的用戶，可以在 babel.config.js 中配置module.exports = { plugins: [ [\’import\’, { libraryName: \’vant\’, libraryDirectory: \’es\’, style: true }, \’vant\’] ]};// 接著你可以在代碼中直接引入 Vant 組件// 插件會(huì)自動(dòng)將代碼轉(zhuǎn)化為方式二中的按需引入形式import { Button } from \’vant\’;
官方示例工程
Vant-demo.截圖如下：
版權(quán)聲明：本文內(nèi)容由互聯(lián)網(wǎng)用戶自發(fā)貢獻(xiàn)，該文觀點(diǎn)僅代表作者本人。本站僅提供信息存儲(chǔ)空間服務(wù)，不擁有所有權(quán)，不承擔(dān)相關(guān)法律責(zé)任。如發(fā)現(xiàn)本站有涉嫌抄襲侵權(quán)/違法違規(guī)的內(nèi)容， 請(qǐng)發(fā)送郵件至 舉報(bào)，一經(jīng)查實(shí)，本站將立刻刪除。
