簡介
輕量、可靠的移動端 Vue 組件庫，MIT協議, 目前github star 數9k
推薦理由
- 55 個組件
- 90% 單元測試覆蓋率
- 完善的中英文文檔和示例
- 支持按需引入
- 支持主題定制
- 支持國際化
- 支持 TS
- 支持 SSR
瀏覽器支持
現代瀏覽器以及 Android 4.0 , iOS 6
本地開發
- 安裝
# 通過 npm 安裝npm i vant -S# 通過 yarn 安裝yarn add vant
- 快速上手
- 導入所有組件
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;// 注冊組件Vue.use(vant);// 調用函數式組件vant.Toast(\’提示\’);</script>
- 自動按需引入組件 (推薦)
babel-plugin-import 是一款 babel 插件，它會在編譯過程中將 import 的寫法自動轉換為按需引入的方式。
# 安裝插件npm i babel-plugin-import -D// 在.babelrc 中添加配置// 注意：webpack 1 無需設置 libraryDirectory{ \”plugins\”: [ [\”import\”, { \”libraryName\”: \”vant\”, \”libraryDirectory\”: \”es\”, \”style\”: true }] ]}// 對于使用 babel7 的用戶，可以在 babel.config.js 中配置module.exports = { plugins: [ [\’import\’, { libraryName: \’vant\’, libraryDirectory: \’es\’, style: true }, \’vant\’] ]};// 接著你可以在代碼中直接引入 Vant 組件// 插件會自動將代碼轉化為方式二中的按需引入形式import { Button } from \’vant\’;
官方示例工程
Vant-demo.截圖如下：
版權聲明：本文內容由互聯網用戶自發貢獻，該文觀點僅代表作者本人。本站僅提供信息存儲空間服務，不擁有所有權，不承擔相關法律責任。如發現本站有涉嫌抄襲侵權/違法違規的內容， 請發送郵件至 舉報，一經查實，本站將立刻刪除。
