怎么在Vue3项目中引入Vant组件库并使用？

前言

在Vue 3项目中，Vant是一个轻量、可靠的移动端Vue组件库，它基于Vue 3开发，提供了一套丰富的UI组件，非常适合用于构建移动端的应用。以下是如何在Vue 3项目中引入和使用Vant组件库的步骤：

---

一、项目中使用步骤

1.安装：

代码如下（示例）：

# Vue 3 项目，安装最新版 Vant
npm i vant
# 通过 yarn 安装
yarn add vant
# 通过 pnpm 安装
pnpm add vant

2.样式的导入（2种方法）

2.1 main.ts全局导入（平常自己的项目用的这个全局）

代码如下（示例）：

import { createApp } from 'vue'
import App from './App.vue'
import pinia from './stores'
import router from './router'
// 样式全局使用
import 'vant/lib/index.css'
import './styles/main.scss'

const app = createApp(App)

app.use(pinia)
app.use(router)
app.mount('#app')

2.2 按需引入组件样式 (简单介绍一下)

在基于 Rsbuild、Vite、webpack 或 vue-cli 的项目中使用 Vant 时，可以使用 unplugin-vue-components 插件，它可以自动引入组件。

Vant 官方基于 unplugin-vue-components 提供了自动导入样式的解析器 @vant/auto-import-resolver，两者可以配合使用。

相比于常规用法，这种方式可以按需引入组件的 CSS 样式，从而减少一部分代码体积，但使用起来会变得繁琐一些。如果业务对 CSS 的体积要求不是特别极致，我们推荐使用更简便的常规用法。

1.安装插件

# 通过 npm 安装
npm i @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 通过 yarn 安装
yarn add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 通过 pnpm 安装
pnpm add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

# 通过 bun 安装
bun add @vant/auto-import-resolver unplugin-vue-components unplugin-auto-import -D

2.配置插件

如果是基于 Vite 的项目，在 vite.config.js 文件中配置插件：
配置完成后，unplugin-auto-import 会自动导入对应的 Vant API 以及样式。

import vue from '@vitejs/plugin-vue';
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
import { VantResolver } from '@vant/auto-import-resolver';

export default {
  plugins: [
    vue(),
    AutoImport({
      resolvers: [VantResolver()],
    }),
    Components({
      resolvers: [VantResolver()],
    }),
  ],
};

3.组件按需使用：App.vue

<script setup lang="ts">
import { Button as VanButton } from 'vant'
</script>

<template>
  <van-button>按钮</van-button>
</template>

<style scoped></style>

---

总结

现在，你已经成功地在Vue 3项目中引入了Vant组件库，你可以开始在你的组件中使用这些组件了。例如，你可以使用Vant提供的按钮、对话框、列表等组件来构建你的用户界面。