Vant是有贊前端團隊開源的移動端組件庫，對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端組件庫之一。提供了豐富的組件插槽，通過插槽可以對組件的某一部分進行個性化定制。同時用戶可以自己定制主題，打造屬于自己風格的主題界面。

軟件特色

提供 60 多個高質量組件，覆蓋移動端各類場景

性能極佳，組件平均體積不到 1kb（min+gzip）

單元測試覆蓋率 90%+，提供穩定性保障

完善的中英文文檔和示例

支持 Vue 2 & Vue 3

支持按需引入

支持主題定制

支持國際化

支持 TypeScript

支持 SSR

安裝方法

通過 npm 安裝

在現有項目中使用 Vant 時，可以通過 npm 或 yarn 進行安裝：

# Vue 2 項目，安裝 Vant 2： npm i vant -S # Vue 3 項目，安裝 Vant 3： npm i vant@next -S

通過 CDN 安裝

使用 Vant 最簡單的方法是直接在 html 文件中引入 CDN 鏈接，之后你可以通過全局變量 vant 訪問到所有組件。

<!-- 引入樣式文件 --> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/vant@2.12/lib/index.css" /> <!-- 引入 Vue 和 Vant 的 JS 文件 --> <script src="https://cdn.jsdelivr.net/npm/vue@2.6/dist/vue.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/vant@2.12/lib/vant.min.js"></script> <script> // 在 #app 標簽下渲染一個按鈕組件 new Vue({ el: '#app', template: `<van-button>按鈕</van-button>`, }); // 調用函數組件，彈出一個 Toast vant.Toast('提示'); // 通過 CDN 引入時不會自動注冊 Lazyload 組件 // 可以通過下面的方式手動注冊 Vue.use(vant.Lazyload); </script>

通過腳手架安裝

在新項目中使用 Vant 時，推薦使用 Vue 官方提供的腳手架 Vue Cli 創建項目并安裝 Vant。

# 安裝 Vue Cli npm install -g @vue/cli # 創建一個項目 vue create hello-world # 創建完成后，可以通過命令打開圖形化界面，如下圖所示 vue ui

在圖形化界面中，點擊 依賴 -> 安裝依賴，然后將 vant 添加到依賴中即可。

更新內容

新增 finish-icon 插槽

新增 finish-icon 屬性

修復 v-model 為 null 時初始值不正確的問題

修復 linearGradient id 可能導致沖突的問題