快速上手 Ant Design Vue：构建企业级应用的利器

引言：告别繁琐，拥抱高效与美观

在前端开发的浩瀚宇宙中，构建一致、美观且用户体验优秀的界面始终是一项核心挑战。尤其是在企业级应用开发中，对界面组件的质量、可维护性、一致性以及开发效率都有着极高的要求。从零开始构建一套完整的组件库不仅耗时耗力，而且难以保证设计和交互的专业性。

正是在这样的背景下，各种优秀的前端 UI 组件库应运而生。而 Ant Design 作为由蚂蚁金服（现蚂蚁集团）推出的企业级产品设计体系，凭借其严谨的设计规范、高质量的组件实现和完善的配套资源，在全球范围内赢得了广泛的认可。

Ant Design Vue，顾名思义，是 Ant Design 设计体系的 Vue 版本实现。它继承了 Ant Design 的设计精髓和组件特性，为 Vue.js 生态的开发者提供了一套开箱即用的高质量 UI 组件库。使用 Ant Design Vue，开发者可以极大地提升开发效率，专注于业务逻辑的实现，同时确保最终产品的界面具有专业的视觉效果和良好的用户体验。

本文旨在为 Vue 开发者提供一份详尽的快速上手指南。我们将从项目创建、Ant Design Vue 的安装与配置，到核心组件的使用以及常见的定制化需求，一步步带领你领略 Ant Design Vue 的强大之处，让你能够快速地将它应用于实际项目中。

准备工作：开始前的必要条件

在踏上 Ant Design Vue 的学习之旅前，请确保你的开发环境已准备就绪。你需要：

Node.js 环境： Ant Design Vue 的安装和项目构建依赖于 Node.js。请确保你的系统中已安装 Node.js（建议使用 LTS 版本）。可以通过在终端运行 node -v 和 npm -v 或 yarn -v 来检查版本。
Vue.js 基础： 本文假定你已经对 Vue.js 的核心概念（如组件、模板语法、props、events、生命周期、单文件组件 SFC 等）有基本的了解。Ant Design Vue 是基于 Vue 构建的，熟练掌握 Vue 是使用它的前提。
包管理器： 通常使用 npm 或 yarn 或 pnpm 来管理项目依赖。选择其中一种即可。

准备好这些，我们就可以开始构建第一个 Ant Design Vue 应用了。

第一步：创建你的 Vue 项目

最常见的创建 Vue 项目的方式是使用官方提供的脚手架工具：Vue CLI (适用于 Webpack) 或 create-vue (适用于 Vite)。考虑到目前 Vite 的流行以及在构建速度上的优势，我们将主要以 Vite 为例进行讲解，但也简要提及 Vue CLI 的情况。

使用 create-vue (推荐，基于 Vite)

打开你的终端或命令行工具，运行以下命令创建一个新的 Vue 3 项目：

“`bash

使用 npm

npm create vue@latest

或者使用 yarn

yarn create vue@latest

或者使用 pnpm

pnpm create vue@latest
“`

按照提示进行配置。对于快速上手，你可以选择默认选项，或者根据需要启用 TypeScript, Vue Router, Pinia, ESlint 等。例如：

“`
✔ Project name: … ant-design-vue-demo
✔ Add TypeScript? … No / Yes (建议选择 Yes，AnV 对 TS 支持友好)
✔ Add JSX Support? … No
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No
✔ Add an End-to-End Testing Solution? … No
✔ Add ESLint with Prettier? … No / Yes

Scaffolding project in /path/to/your/ant-design-vue-demo…

Done. Now run:

cd ant-design-vue-demo
npm install # 或者 yarn install / pnpm install
npm run dev # 或者 yarn dev / pnpm dev
“`

进入项目目录并安装依赖：

bash cd ant-design-vue-demo npm install # 或 yarn install 或 pnpm install

运行项目：

bash npm run dev # 或 yarn dev 或 pnpm dev

你的第一个 Vue 项目就运行起来了。

使用 Vue CLI (基于 Webpack)

如果你仍然在使用 Vue CLI 或需要基于 Webpack 的项目，可以这样创建：

bash npm install -g @vue/cli # 如果没有安装过 Vue CLI vue create ant-design-vue-demo-cli

选择 Vue 3 预设或手动配置。然后进入项目目录并运行：

bash cd ant-design-vue-demo-cli npm run serve

接下来的 Ant Design Vue 安装步骤将根据你使用的构建工具（Vite 或 Webpack）有所不同，尤其是在按需加载方面。

第二步：安装 Ant Design Vue

项目创建并进入目录后，下一步就是安装 Ant Design Vue 库本身：

“`bash

在项目目录下运行

npm install ant-design-vue –save

或

yarn add ant-design-vue

或

pnpm add ant-design-vue
“`

--save 或不加参数都会将 ant-design-vue 添加到项目的 dependencies 中。安装完成后，可以在 package.json 文件的 dependencies 中看到 ant-design-vue 及其版本号。

第三步：引入 Ant Design Vue

引入 Ant Design Vue 有两种主要方式：完整引入和按需引入。对于生产环境的项目，强烈建议使用按需引入，以减小最终的打包体积。

方式一：完整引入 (不推荐用于生产环境)

这种方式最简单，但会引入 Ant Design Vue 的所有组件的 JavaScript 代码和样式，导致打包体积较大。适用于快速原型开发或小型项目。

在你的应用入口文件 main.js 或 main.ts 中（通常在 src 目录下）：

“`javascript
// src/main.js
import { createApp } from ‘vue’;
import App from ‘./App.vue’;

// 引入 Ant Design Vue 库
import Antd from ‘ant-design-vue’;
// 引入 Ant Design Vue 样式文件 (CSS 或 Less)
import ‘ant-design-vue/dist/antd.css’; // 或者 antd.less 如果你的项目配置了 Less

const app = createApp(App);

// 将 Ant Design Vue 注册为 Vue 插件
app.use(Antd);

app.mount(‘#app’);
“`

如果你使用 TypeScript (main.ts)，代码类似：

“`typescript
// src/main.ts
import { createApp } from ‘vue’;
import App from ‘./App.vue’;
import Antd from ‘ant-design-vue’;
import ‘ant-design-vue/dist/antd.css’; // 或 antd.less

const app = createApp(App);

app.use(Antd);

app.mount(‘#app’);
“`

这种方式下，你可以在任何组件的模板中直接使用 Ant Design Vue 提供的组件，例如 <a-button>, <a-input> 等，无需单独 import。组件名都带有 a- 前缀，这是 Ant Design Vue 的命名约定。

方式二：按需引入 (推荐用于生产环境)

按需引入只打包你实际使用的组件，可以显著减小项目体积。实现按需引入通常需要借助额外的构建工具插件。

实现按需引入主要有两种流行方法，取决于你的项目使用的是 Webpack (Vue CLI) 还是 Vite：

方法 2.1: 基于 Webpack 的按需加载 (使用 `babel-plugin-import`)

如果你使用 Vue CLI 或基于 Webpack 的自定义配置，可以使用 babel-plugin-import 插件来实现组件和样式的自动按需加载。

安装插件：

“`bash
npm install babel-plugin-import –save-dev

或

yarn add babel-plugin-import –dev

或

pnpm add babel-plugin-import -D
“`
配置 Babel：
在项目根目录找到 babel.config.js 文件（如果没有，可能在 package.json 的 babel 字段中，或者需要手动创建）。添加 babel-plugin-import 配置：

javascript // babel.config.js module.exports = { presets: [ '@vue/cli-plugin-babel/preset' ], plugins: [ [ 'import', { libraryName: 'ant-design-vue', libraryDirectory: 'es', // 或者 'lib'，取决于你的 antdv 版本和需求，es 是 ES Modules 版本 style: true // 或 'css'，ture 表示引入 less 文件，需要配置 less 环境 }, 'ant-design-vue' // 名字不能重复，如果有其他库也用了 babel-plugin-import ] ] };

这里的 style: true 表示引入 Less 文件，这样可以在后续进行主题定制。如果不需要主题定制，或者不想配置 Less，可以改为 style: 'css' 来引入 CSS 文件。
在组件中手动引入：
在这种配置下，你需要在每个使用 Ant Design Vue 组件的 .vue 文件中手动 import 需要的组件。例如：

“`vue

```

babel-plugin-import 会自动将 import { Button, Input } from 'ant-design-vue'; 转换成类似 import Button from 'ant-design-vue/lib/button'; import 'ant-design-vue/lib/button/style/css'; import Input from 'ant-design-vue/lib/input'; import 'ant-design-vue/lib/input/style/css'; 的形式，从而实现按需加载。

注意： 这种方法需要在每个组件中手动引入 Ant Design Vue 组件，这有时会显得重复。

方法 2.2: 基于 Vite 的按需加载 (使用 `unplugin-vue-components` 和 `unplugin-auto-import`)

对于使用 Vite 的项目（例如通过 create-vue 创建的），社区提供了更现代、更便利的按需加载方案，可以实现自动按需引入。

安装插件：

```bash
npm install -D unplugin-vue-components unplugin-auto-import @ant-design-vue/auto-import-resolver

或

yarn add -D unplugin-vue-components unplugin-auto-import @ant-design-vue/auto-import-resolver

或

pnpm add -D unplugin-vue-components unplugin-auto-import @ant-design-vue/auto-import-resolver
```
- unplugin-vue-components: 自动导入组件，包括 UI 库组件。
- unplugin-auto-import: 自动导入 Composition API 函数或其他模块。
- @ant-design-vue/auto-import-resolver: 为 Ant Design Vue 提供组件解析器，确保正确导入。
配置 Vite：
在项目根目录找到 vite.config.js 或 vite.config.ts 文件。添加插件配置：

```javascript
// vite.config.js
import { fileURLToPath, URL } from 'node:url';
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';

// 引入 unplugin-vue-components 和 unplugin-auto-import
import AutoImport from 'unplugin-auto-import/vite';
import Components from 'unplugin-vue-components/vite';
// 引入 Ant Design Vue 的解析器
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

// https://vitejs.dev/config/
export default defineConfig({
plugins: [
vue(),
// 配置 Components 插件
Components({
resolvers: [
AntDesignVueResolver({
// importStyle: 'css', // 样式按 CSS 引入
importStyle: 'less', // 样式按 Less 引入，需要配置 Less 环境
resolveIcons: true // 可选，按需加载 icon
})
]
}),
// 可选：配置 AutoImport 插件，如果需要自动引入 Composition API 函数
AutoImport({
imports: ['vue', 'vue-router'], // 需要自动导入的库
dts: 'src/auto-imports.d.ts', // TypeScript 声明文件生成路径
}),
],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
},
css: {
preprocessorOptions: {
less: {
// 自定义主题变量（如果 style: 'less'）
// modifyVars: {
// 'primary-color': '#1DA57A',
// 'link-color': '#1DA57A',
// 'border-radius-base': '2px',
// },
javascriptEnabled: true,
},
},
},
});
```

这里的关键是 Components 插件及其 AntDesignVueResolver 配置。importStyle: 'less' (或 'css') 决定了引入样式的方式。resolveIcons: true 可以让你使用 <a-icon-xxx /> 形式的图标，但需要额外安装 @ant-design/icons-vue。
直接在模板中使用组件：
配置完成后，在任何 .vue 文件的模板中，你可以直接使用 Ant Design Vue 组件，无需手动 import：

```vue

```

这种方式极大地简化了开发流程，是 Vite 环境下推荐的按需加载方案。

总结引入方式：

完整引入： 最快启动，体积最大，不推荐生产环境。
Webpack + babel-plugin-import： 按需加载 JS 和样式，需要手动引入组件，需要配置 Babel。
Vite + unplugin-vue-components： 自动按需加载 JS 和样式，无需手动引入组件（推荐），需要配置 Vite 插件。

选择适合你项目构建工具的按需加载方案，能确保你在享受 Ant Design Vue 便利的同时，控制最终的应用体积。

第四步：开始使用组件

成功引入 Ant Design Vue 后，你就可以在你的 Vue 组件中开始使用它提供的丰富组件了。组件的使用方式遵循 Vue 的基本规则，通过 props 传递数据和配置，通过 events 响应用户交互。

Ant Design Vue 的组件名称都以 a- 为前缀。例如，按钮是 a-button，输入框是 a-input，布局组件是 a-layout 等。

我们来看一些常用组件的简单示例：

示例 1: 按钮 (Button)

```vue

```

这里使用了 type prop 来改变按钮的样式，danger prop 使按钮显示为危险状态。

示例 2: 输入框 (Input)

```vue

```

这里使用了 v-model:value 进行双向数据绑定。Ant Design Vue 的输入框组件支持 v-model，但在 Vue 3 中，prop 名称变更为 value，因此是 v-model:value（等价于 :value="message" @update:value="newValue => message = newValue"）。

示例 3: 布局 (Layout)

布局是构建页面结构的基础。Ant Design Vue 提供了 a-layout, a-layout-header, a-layout-sider, a-layout-content, a-layout-footer 等组件。

```vue

```

这个例子展示了一个带有侧边栏和顶部的基本布局。注意 a-layout-sider 等是 a-layout 的子组件，可以直接通过 Layout.Sider 的方式获取（如果使用完整引入或非自动按需引入），或者在按需引入配置中正确设置后直接使用 <a-layout-sider />。图标需要额外安装 @ant-design/icons-vue 库并引入。

这只是 Ant Design Vue 庞大组件库的冰山一角。从基础的排版、图标、按钮，到复杂的表单、表格、树形控件、数据可视化等，几乎涵盖了企业级应用所需的各种 UI 元素。掌握 Ant Design Vue 组件的最佳方式是查阅其官方文档，每个组件都有详细的 API 说明（props, events, slots）和丰富的示例。

第五步：主题定制 (Customization)

Ant Design Vue 默认提供了一套漂亮且专业的视觉风格，但这套风格可能不完全符合你的品牌或设计需求。Ant Design 体系基于 Less 进行样式开发，因此提供了灵活的主题定制能力，允许你修改 Less 变量来调整组件的外观。

核心原理：修改 Less 变量

Ant Design Vue 组件的样式是通过 Less 编写的，许多关键的视觉属性（如主色、字体大小、边框半径、间距等）都被定义为 Less 变量。通过在构建过程中覆盖这些变量的默认值，就可以改变组件的样式。

要进行主题定制，你的项目需要配置 Less 环境。

配置 Less 环境

如果你在按需引入时选择了 style: 'less' 或 style: true，就需要配置 Less。

安装 Less 和 Less Loader：

```bash
npm install less less-loader --save-dev

或

yarn add less less-loader --dev

或

pnpm add less less-loader -D
```
配置 Less Loader：
- Vite: 在 vite.config.js 或 vite.config.ts 的 css.preprocessorOptions.less 中配置 Less Loader：
  
  javascript // vite.config.js export default defineConfig({ // ... 其他配置 css: { preprocessorOptions: { less: { // 自定义主题变量在这里修改 modifyVars: { 'primary-color': '#1DA57A', // 你想设置的主题色 'link-color': '#1DA57A', 'border-radius-base': '2px', // ... 其他变量 }, javascriptEnabled: true, // 允许 Less 中使用 JavaScript }, }, }, });
  
  modifyVars 对象中的键值对就是要覆盖的 Less 变量。
- Webpack (Vue CLI): 在 vue.config.js 中配置 Less Loader：
  
```javascript
// vue.config.js
const { defineConfig } = require('@vue/cli-service');

module.exports = defineConfig({
transpileDependencies: true,
css: {
loaderOptions: {
less: {
lessOptions: {
modifyVars: {
'primary-color': '#1DA57A',
'link-color': '#1DA57A',
'border-radius-base': '2px',
},
javascriptEnabled: true,
},
},
},
},
});
```

修改 modifyVars 后，重新运行开发服务器，你会发现 Ant Design Vue 组件的主题色等样式已经发生了变化。

查找可定制变量

Ant Design 提供了大量的 Less 变量用于主题定制。你可以在 Ant Design 官方文档中找到完整的变量列表，或者直接查看 Ant Design 或 Ant Design Vue 在 GitHub 仓库中的 less/variable.less 文件。常用的变量包括：

@primary-color: 主题色
@link-color: 链接颜色
@success-color: 成功色
@warning-color: 警告色
@error-color: 错误色
@font-size-base: 基础字体大小
@border-radius-base: 基础圆角半径
@box-shadow-base: 基础阴影

等等。通过调整这些变量，你可以实现符合自己需求的视觉风格。

常见问题与进阶技巧

1. CSS 样式冲突

有时你自己的全局 CSS 样式可能会覆盖 Ant Design Vue 组件的样式，或者 Ant Design Vue 的样式影响到你的自定义元素。

使用 Scoped CSS: 在你的 .vue 文件中使用 <style scoped>，可以确保你的样式只作用于当前组件，减少全局污染。
增加 CSS Specificity: 如果需要覆盖 Ant Design Vue 的样式，使用更具体的 CSS 选择器来提高你的样式的优先级。
利用 Less 变量: 优先考虑使用 Less 变量进行主题定制，这是官方推荐且最安全的方式。
Override Component Styles: 对于特定的组件，可以使用其提供的类名或结构，编写独立的样式文件来覆盖，并确保引入顺序正确（你的样式在 antdv 样式之后）。

2. 图标的使用

Ant Design Vue 的图标组件 @ant-design/icons-vue 是一个单独的库，需要额外安装：

```bash
npm install @ant-design/icons-vue --save

或

yarn add @ant-design/icons-vue
```

然后在使用时引入：

```vue

```

如果使用 Vite + unplugin-vue-components 并配置了 resolveIcons: true，通常可以直接在模板中使用 <SearchOutlined /> 或 <a-icon-search /> 这样的形式（具体取决于配置）。

3. 版本兼容性

确保你使用的 Ant Design Vue 版本与 Vue.js 版本兼容。

Ant Design Vue v1.x 系列支持 Vue 2.x。
Ant Design Vue v3.x/v4.x 系列支持 Vue 3.x。

随着 Vue 3 的普及，推荐在新项目中使用 Vue 3 和 Ant Design Vue v3/v4。在升级项目时，务必查阅 Ant Design Vue 的版本迁移指南。

4. TypeScript 支持

Ant Design Vue 对 TypeScript 有很好的支持。如果你使用 TypeScript，可以享受到组件属性、事件等的类型提示和检查，这有助于提高开发效率和减少错误。按需引入方案通常也能很好地与 TypeScript 集成。

5. 国际化 (Internationalization)

Ant Design Vue 提供了国际化支持。你可以通过 ConfigProvider 组件来配置应用的语言。

```vue

```

将应用内容包裹在 a-config-provider 中，并设置 locale prop 即可。对于日期类组件，由于 Ant Design Vue 内部使用了 dayjs，你可能还需要单独引入 dayjs 的语言包并设置全局 locale。

进一步学习资源

本篇文章提供了一个快速上手的路径。要深入掌握 Ant Design Vue，以下资源是必不可少的：

Ant Design Vue 官方文档: https://next.antdv.com/ （Vue 3 版本）或 https://antdv.com/ （Vue 2 版本）这是最权威、最全面的学习资料。包括组件的 API、示例、设计规范等。
Ant Design 设计规范: https://ant.design/ 了解 Ant Design 的设计理念和原则，有助于更好地使用组件库。
GitHub 仓库: https://github.com/vueComponent/ant-design-vue 查看源代码、提交 issues、了解最新进展。
社区讨论: 参与社区讨论可以解决遇到的问题，学习其他开发者的经验。可以关注 Ant Design Vue 的官方社区或论坛。

总结：开启你的企业级应用构建之旅

恭喜你！通过本文的学习，你应该已经掌握了快速上手 Ant Design Vue 的核心步骤：从项目创建、安装引入（特别是推荐的按需加载方案），到基本组件的使用，再到主题定制。

Ant Design Vue 提供的是一套经过精心设计和打磨的组件，它不仅仅是简单的 UI 元素的集合，更体现了一种企业级应用的设计哲学。使用它，你可以：

大幅提升开发效率： 无需重复造轮子，快速搭建页面骨架和常用功能。
保证界面一致性： 遵循统一的设计规范，提供一致的视觉和交互体验。
享受高质量组件： 组件经过严格测试，考虑了可访问性、国际化等企业级应用的需求。
灵活定制主题： 满足不同品牌和项目的主题需求。

当然，任何框架或库的真正掌握都离不开实践。现在，是时候在你自己的项目中尝试使用 Ant Design Vue，构建出令人惊艳的企业级应用界面了。

祝你开发愉快！

快速上手 Ant Design Vue：构建企业级应用的利器

引言：告别繁琐，拥抱高效与美观

准备工作：开始前的必要条件

第一步：创建你的 Vue 项目

使用 create-vue (推荐，基于 Vite)

使用 npm

或者使用 yarn

或者使用 pnpm

使用 Vue CLI (基于 Webpack)

第二步：安装 Ant Design Vue

在项目目录下运行

或

或

第三步：引入 Ant Design Vue

方式一：完整引入 (不推荐用于生产环境)

方式二：按需引入 (推荐用于生产环境)

方法 2.1: 基于 Webpack 的按需加载 (使用 babel-plugin-import)

或

或

方法 2.2: 基于 Vite 的按需加载 (使用 unplugin-vue-components 和 unplugin-auto-import)

或

或

第四步：开始使用组件

示例 1: 按钮 (Button)

示例 2: 输入框 (Input)

示例 3: 布局 (Layout)

第五步：主题定制 (Customization)

核心原理：修改 Less 变量

配置 Less 环境

或

或

查找可定制变量

常见问题与进阶技巧

1. CSS 样式冲突

2. 图标的使用

或

3. 版本兼容性

4. TypeScript 支持

5. 国际化 (Internationalization)

进一步学习资源

总结：开启你的企业级应用构建之旅

发表评论 取消回复

方法 2.1: 基于 Webpack 的按需加载 (使用 `babel-plugin-import`)

方法 2.2: 基于 Vite 的按需加载 (使用 `unplugin-vue-components` 和 `unplugin-auto-import`)

发表评论取消回复