Vue3 Vant3 安装及配置

最新推荐文章于 2025-11-13 10:27:54 发布

原创最新推荐文章于 2025-11-13 10:27:54 发布 · 1.7k 阅读

1 ·

CC 4.0 BY-SA版权

文章标签：

#前端

vue3 同时被 2 个专栏收录

6 篇文章

订阅专栏

vant3

1 篇文章

订阅专栏

本文介绍了如何在Vue3项目中通过npm安装并配置Vant UI组件库，包括全局安装、组件引入、配置unplugin-vue-components插件，以及在模板中实际使用的范例。

Vant 3 - Mobile UI Components built on Vue

1. 通过 npm 安装

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

npm i vant

2. 引入组件

1. 安装插件

# 通过 npm 安装

npm i 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()],
      }),
    ],
  },
};

3. 测试

页面引用

<template>
    <div>
        <van-button type="primary">主要按钮</van-button>
        <van-button type="success">成功按钮</van-button>
        <van-button type="default">默认按钮</van-button>
        <van-button type="warning">警告按钮</van-button>
        <van-button type="danger">危险按钮</van-button>

    </div>
</template>