Vant是一套輕量、可靠的主要為移動端網站開發的開源的移動端組件庫，通過Vant，可以快速搭建出風格統一的頁面，提升開發效率，Vant對內承載了有贊所有核心業務，對外服務十多萬開發者，是業界主流的移動端組件庫之一。

使用方法

一、vant安裝以及使用經歷

1.vant安裝

在Vue 2 項目，安裝 Vant 2.x 版本： npm i vant -S

在Vue 3 項目，安裝 Vant 3.x 版本： npm i vant@next -S

2.vant引用

vant可以全局引用或者按需引用

全局引用：在main.js里引用，如圖所示

import Vant from'vant';

import'vant/lib/index.css';

Vue.use(Vant);

2.手動按需引入組件：在所要使用組件的頁面中引入（下面是手動引入button組件）

import Button from'vant/lib/button';

import'vant/lib/button/style';

二、在項目中使用的vant組件

1.swipe組件

這個組件就是我們平時所用的輪播圖

如果是用的全局導入就可以直接使用，如果是手動按需引入使用上面的方法引入對應文件

<van-swipe :autoplay="3000">
<van-swipe-item><img src=""/></van-swipe-item>
<van-swipe-item><img src=""/></van-swipe-item>
<van-swipe-item><img src=""/></van-swipe-item>
<van-swipe-item><img src=""/></van-swipe-item>
</van-swipe>

自動輪播間隔，單位為 ms: autoplay

是否開啟循環播放:loop

是否為縱向滾動:vertical

是否可以通過手勢滑動:touchable

下面是我在demo中使用循環寫的


2.Tab 標簽頁

可以用來做tab切換

<van-tabs v-model="active"swipeable animated sticky>
<van-tab v-for="index in 4":title="'標簽' + index">   
  內容 
</van-tab>
</van-tabs>

是否禁用標簽：disabled

圖標右上角徽標的內容：badge

是否開啟手勢滑動切換：swipeable

底部條寬度，默認單位 px：line-width

底部條高度，默認單位 px ：line-height

是否開啟切換標簽內容時的轉場動畫：animated

下面是在demo中的實踐

Vant功能

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

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

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

完善的中英文文檔和示例

支持 Vue 2 & Vue 3

支持按需引入

支持主題定制

支持國際化

支持 TypeScript

Vant特色

輕量
做為手機端組件庫，Vant一直將輕量做為關鍵開發理念。為了能均衡日益豐富多樣的性能和輕量的矛盾關聯，Vant內部應用了不少的提升方法，包含支持部件按需加載、公共性控制模塊重復使用、部件編譯程序業務流程優化等。
在運用一系列的升級方式以后，現階段Vant的部件均值容積只有8.8KB，Uglify+Gzip后約1KB。
豐富多彩好用的業務組件
Vant不僅僅提供基礎的UI組件，為了更好地開發人員迅速搭建移動積分商城，Vant增強了很多移動積分商城內常見的業務組件。類似詳細地址管理方法、優惠劵、省市縣挑選等。

以上便是KKX小編給大家分享介紹的移動端組件庫——Vant！