vue3中Vant的使用

最新推荐文章于 2025-10-28 10:17:20 发布

原创最新推荐文章于 2025-10-28 10:17:20 发布 · 6.2k 阅读

16 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js #npm #javascript

本文指导如何在Vue3项目中安装和使用Vant组件库，包括npm安装、unplugin-vue-components插件配置，以及按需引入组件的方法。适合开发者快速集成流行移动UI框架。

一. 安装Vant组件库

1.通过npm安装

# Vue 3 项目，安装最新版 Vant
npm i vant

# Vue 2 项目，安装 Vant 2
npm i vant@latest-v2

二. 引入组件（推荐）

在基于 vite、webpack 或 vue-cli 的项目中使用 Vant 时，推荐安装 unplugin-vue-components 插件，它可以自动按需引入组件

1.安装插件

# 通过 npm 安装
npm i unplugin-vue-components -D

# 通过 yarn 安装
yarn add unplugin-vue-components -D

# 通过 pnpm 安装
pnpm add unplugin-vue-components -D

2.配置插件

基于 vue-cli 的项目，在 vue.config.js 文件中配置插件：

const { VantResolver } = require('unplugin-vue-components/resolvers');
const ComponentsPlugin = require('unplugin-vue-components/webpack');

module.exports = {
  configureWebpack: {
    plugins: [
      ComponentsPlugin({
        resolvers: [VantResolver()],
      }),
    ],
  },
};

三. 引入组件

完成以上两步，就可以直接使用 Vant 组件了：

import { createApp } from 'vue';
import { Button } from 'vant';

const app = createApp();
app.use(Button);

另外还有两种方法：

1. 导入所有组件（不推荐）

Vant 支持一次性导入所有组件，引入所有组件会增加代码包体积，因此不推荐这种做法。

import { createApp } from 'vue';
import Vant from 'vant';
import 'vant/lib/index.css';

const app = createApp();
app.use(Vant);

2.手动按需引入组件（不推荐）

在不使用任何构建插件的情况下，可以手动引入需要使用的组件和样式。

// 引入组件脚本
import Button from 'vant/es/button/index';
// 引入组件样式
// 若组件没有样式文件，则无须引入
import 'vant/es/button/style/index';

这些都是根据官方文档给出的使用方法，详情可见官方 :Vant 3 - Mobile UI Components built on Vue