Vue3中引入使用vant組件的教程詳解

更新時間：2023年10月05日 08:16:15 作者：Saga Two

Vant是一個強大的移動端組件庫,目前Vant 官方提供了 Vue 2 版本,Vue 3 版本和微信小程序版本,本文主要為大家介紹vue3中的vant組件引入使用的方法,希望對大家有所幫助

1.安裝

vue3中使用如下命令通過 npm 安裝（本人項目使用的安裝方式）

# Vue 3 項目，安裝最新版 Vant
npm i vant

也可以使用其他的包管理起進行安裝：

# 通過 yarn 安裝
yarn add vant
# 通過 pnpm 安裝
pnpm add vant
# 通過 Bun 安裝
bun add vant

2.引入

Vant分為全局引入和按需引入兩種方式，一般在工程項目中，由于全局引入會導致不必要的資源加載，為提升項目性能，建議進行按需引入。以下我們對兩種引入方式進行介紹。

2.1 全局引入

全局引入就是在項目入口（main.ts）文件直接引入組件以及組件全部的樣式文件；代碼如下所示：

// main.ts
import { createApp } from 'vue';
// 1. 引入你需要的組件
import { Button } from 'vant';
// 2. 引入組件樣式
import 'vant/lib/index.css';
const app = createApp();
// 3. 注冊你需要的組件
app.use(Button);
app.mount('#app')

2.2 按需引入

在vue3中按需引入Vant，需要使用其他的插件輔助，需要安裝自動引入組件插件unplugin-vue-components 和Vant 官方提供的自動導入樣式的解析器 @vant/auto-import-resolver這兩款插件；安裝方法如下：

npm install -D unplugin-vue-components @vant/auto-import-resolver

然后再vite或者webpack配置中添加相應的配置，如下所示：

2.2.1 vite項目:vite.config.js

// vite.config.ts
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { VantResolver } from '@vant/auto-import-resolver';
export default defineConfig({
  // ...
  plugins: [
    // ...
    AutoImport({
        resolvers: [VantResolver()],
    }),
      Components({
        resolvers: [VantResolver()],
    }),
  ],
})

2.2.2 Webpack項目：webpack.config.js

// webpack.config.js
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { VantResolver } = require('@vant/auto-import-resolver');
module.exports = {
  // ...
  plugins: [
    AutoImport({
        resolvers: [VantResolver()],
    }),
      Components({
        resolvers: [VantResolver()],
    }),
  ],
}

2.2.3 配置在vue.config.js中

導入方法相同：

const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { VantResolver } = require('@vant/auto-import-resolver');
module.exports = defineConfig({
  configureWebpack: {
  	plugins: [
        AutoImport({
          resolvers: [VantResolver()],
        }),
        Components({
          resolvers: [VantResolver()],
        }),
      ],
  }
})

3.使用

引入完畢之后，unplugin-vue-components 會解析模板并自動注冊對應的組件, @vant/auto-import-resolver 會自動引入對應的組件樣式。我們可進行按需引入需要使用的組件，使用方法如下，引入input組件和button組件

<template>
    <div>
        <label>vant示例</label>
        <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
            <van-swipe-item>vant-swipe</van-swipe-item>
            <van-swipe-item class="dif">2</van-swipe-item>
            <van-swipe-item>3</van-swipe-item>
            <van-swipe-item>4</van-swipe-item>
        </van-swipe>
    </div>
</template>
<style>
.my-swipe .van-swipe-item {
    color: #fff;
    font-size: 20px;
    line-height: 150px;
    text-align: center;
    background-color: #39a9ed;
  }
.my-swipe .dif {
  background-color: #ccdba3;
}
</style>

效果如下：