Vue 3 配置 Ant Design Vue 的核心步骤是：安装依赖、引入样式与插件、验证使用；需区分 Vite 或 Vue CLI 项目，支持全局引入和按需导入两种方式，最后通过按钮组件验证集成成功。

Vue 3 项目中配置 Ant Design Vue，核心是三步：安装组件库、引入样式与插件、验证使用。关键要看你用的是 Vite 还是 Vue CLI 创建的项目，两者配置方式略有差异，但逻辑一致。

安装 ant-design-vue 依赖

进入你的 Vue 3 项目根目录，执行：

• 若用 npm：npm install ant-design-vue --save
• 若用 pnpm：pnpm install ant-design-vue --save
• 若需图标支持（推荐）：npm install @ant-design/icons-vue --save

全局引入（适合中小型项目）

在 src/main.ts（或 src/main.js）中添加：

Springboot Vue Builder

从零开始编排 SpringBoot+Vue 全栈项目工作流，适用于新建全栈项目或完整脚手架请求，触发后依次调用 product‑spec‑builder（需求调研）等模块。

下载

• 导入 Antd 和 CSS：import Antd from 'ant-design-vue'; import 'ant-design-vue/dist/antd.css';
• 注册插件：app.use(Antd);
• 如用了图标，再加全局注册（可选但实用）：
  import * as Icons from '@ant-design/icons-vue';
  Object.keys(Icons).forEach(key => { app.component(key, Icons[key as keyof typeof Icons]); });

按需导入（推荐用于生产环境）

减小打包体积，需配合构建工具插件：

• 安装插件：npm install unplugin-vue-components -D（Vite）或 npm install babel-plugin-import --save-dev（Vue CLI）
• Vite 用户在 vite.config.ts 中添加：
  import Components from 'unplugin-vue-components/vite';
  import { AntDesignVueResolver } from 'ant-design-vue/resolver';
  components({ resolvers: [AntDesignVueResolver()] })
• Vue CLI 用户在 babel.config.js 中配置：
  ['import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', style: 'css' }]

快速验证是否生效

打开任意组件（如 src/App.vue），写一段测试代码：

• Hello Ant Design
• 运行 npm run dev，页面应显示带样式的按钮
• 控制台无报错、按钮可点击，说明集成成功

前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！