---

Ant Design Vue 新手完全介绍：从零开始构建优雅界面

欢迎来到 Ant Design Vue 的世界！如果你是一位 Vue.js 开发者，并且渴望为你的项目带来专业、美观且功能丰富的用户界面，那么 Ant Design Vue 绝对是你不可错过的重要工具。本文将为你提供一个从零开始的完全介绍，带你一步步了解 Ant Design Vue 是什么、为什么使用它、如何开始以及如何利用其强大的组件库构建你的应用界面。

什么是 Ant Design Vue？

首先，让我们来理解 Ant Design Vue 的核心概念。

Ant Design（简称 AntD）是一套企业级的 UI 设计语言和 React 实现。它源自阿里巴巴，是一套深受开发者和设计师喜爱的成熟设计系统。Ant Design 提供了大量的预设组件、设计模式和一份清晰的设计规范，旨在帮助开发者快速构建一致性高、用户体验优秀的复杂应用界面。

Ant Design Vue 则是 Ant Design 在 Vue.js 生态中的完美“移植”和实现。它严格遵循 Ant Design 的设计规范，并提供了大量高质量的 Vue 组件，让 Vue 开发者能够轻松享受到 Ant Design 带来的便利和强大。简单来说，它就是 Vue.js 版本的 Ant Design 组件库。

核心特点：

1. 企业级 UI 组件： 提供丰富的组件，涵盖了从基础的按钮、输入框到复杂的数据表格、表单、日历等，能够满足绝大多数企业级应用的界面需求。
2. 遵循 Ant Design 设计规范： 组件外观和交互体验都严格按照 Ant Design 的标准实现，保证了界面的一致性和专业性。
3. 高质量代码： 组件代码经过精心设计和实现，具备良好的可维护性和性能。
4. 完善的文档和社区支持： 拥有详细的官方文档和活跃的社区，遇到问题时可以方便地查找资料和寻求帮助。
5. 国际化支持： 内置了多语言支持，方便开发面向全球用户的应用。
6. 主题定制能力： 允许开发者根据项目需求调整主题颜色、字体等样式。

为什么选择 Ant Design Vue？

市面上有许多 Vue UI 组件库，如 Element UI、Vuetify 等，为什么你可能会选择 Ant Design Vue 呢？

1. 设计品质和一致性： 如果你追求的是一种沉稳、专业、统一的企业级设计风格，Ant Design 是一个非常好的选择。它的设计规范久经考验，能够确保你的应用在视觉上呈现出高度的一致性。
2. 组件丰富度和强大功能： Ant Design Vue 提供了非常全面的组件，尤其是数据录入和数据展示类组件（如 Form、Table、Tree、Select 等）功能非常强大，内置了许多常用功能，能显著减少开发工作量。
3. 生态成熟度： Ant Design 作为一套设计系统在业界影响广泛，不仅仅有 Vue 版本，还有 React、Angular 等版本，这使得跨技术栈的项目也能保持设计风格的统一。
4. 适合中后台应用： Ant Design 的设计理念和组件库特别适合开发中后台管理系统、数据看板、企业应用等。
5. 与 Vue 完美集成： 作为为 Vue.js 量身打造的库，它能与 Vue 的各项特性（如组件化、响应式、单文件组件等）无缝集成，开发体验流畅。

选择哪一个 UI 库最终取决于你的项目需求、团队偏好以及所需的设计风格。但如果你看重专业性、一致性和强大的组件功能，Ant Design Vue 无疑是一个非常有竞争力的选择。

开始之前：你需要准备什么？

在深入 Ant Design Vue 之前，你需要确保你已经具备以下基础知识和环境：

1. Vue.js 基础： 了解 Vue.js 的核心概念，如组件（Components）、模板语法（Template Syntax）、数据绑定（Data Binding）、指令（Directives 如 v-model）、计算属性（Computed Properties）、侦听器（Watchers）、组件通信（Props 和 Events）以及单文件组件（Single File Components – .vue 文件）。
2. JavaScript、HTML、CSS 基础： 这是前端开发的基础。
3. Node.js 和 npm/yarn： Ant Design Vue 是通过 npm 或 yarn 进行安装和管理的，你需要安装 Node.js（包含 npm）或者 yarn。
4. 现代浏览器： 用于开发和测试。

如果你对 Vue.js 还不熟悉，建议先花时间学习其核心概念，这会极大地帮助你理解如何使用 Ant Design Vue。

安装与配置 Ant Design Vue

好了，万事俱备，现在我们开始将 Ant Design Vue 集成到你的 Vue 项目中。

1. 创建一个 Vue 项目

如果你还没有 Vue 项目，可以使用官方提供的构建工具快速创建一个。目前主流的有两种方式：Vue CLI (for Vue 2/3) 和 Vite (推荐 for Vue 3)。

使用 Vue CLI (如果你正在使用 Vue 2 或更旧的 Vue 3 项目):

“`bash

安装 Vue CLI (如果尚未安装)

npm install -g @vue/cli

或者使用 yarn

yarn global add @vue/cli

创建一个新项目

vue create my-antdv-project

进入项目目录

cd my-antdv-project
“`

创建过程中，选择你的 Vue 版本（Vue 3 是推荐的）。

使用 Vite (推荐 for Vue 3):

“`bash

使用 npm

npm create vite@latest my-antdv-project –template vue

或者使用 yarn

yarn create vite my-antdv-project –template vue

或者使用 pnpm

pnpm create vite my-antdv-project –template vue

进入项目目录

cd my-antdv-project

安装依赖

npm install

或者 yarn

或者 pnpm install

“`

使用 Vite 创建项目更快，并且对 Vue 3 支持更好。

2. 安装 Ant Design Vue

进入你创建的项目目录后，使用 npm 或 yarn 安装 Ant Design Vue：

“`bash

使用 npm

npm install ant-design-vue –save

或者使用 yarn

yarn add ant-design-vue
“`

3. 配置按需加载 (强烈推荐!)

Ant Design Vue 提供了大量的组件和样式。如果直接全部导入，会显著增加你的应用打包体积，影响性能。因此，强烈推荐使用按需加载的方式。这意味着你只导入和使用你实际需要的组件。

配置按需加载的方式取决于你使用的构建工具 (Vue CLI 或 Vite)。

对于 Vue CLI (通常使用 Babel)

如果你使用 Vue CLI，可以通过配置 Babel 插件来实现按需加载样式和组件。

首先，安装必要的 Babel 插件：

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

或者 yarn

yarn add babel-plugin-import –dev
“`

然后，修改你的 Babel 配置文件 (babel.config.js)。在 plugins 数组中添加以下配置：

javascript
// babel.config.js
module.exports = {
presets: [
'@vue/cli-plugin-babel/preset'
],
plugins: [
[
'import',
{
libraryName: 'ant-design-vue',
libraryDirectory: 'es', // 或者 'lib'，取决于你的 ant-design-vue 版本和项目配置
style: 'css' // 或者 'less'，如果需要主题定制则使用 less
}
]
]
}

• libraryName: 指定库的名称。
• libraryDirectory: 指定库的目录结构。通常是 es (使用 ES Modules) 或 lib (使用 CommonJS Modules)。对于现代项目，es 更常见。如果配置后发现组件或样式有问题，可以尝试切换 es 和 lib。
• style: 指定导入样式的方式。css 只导入组件对应的 CSS 文件，less 导入 Less 文件，如果需要 Less 变量覆盖进行主题定制，必须选择 less。选择 less 需要额外配置 Less 加载器。

完成配置后，你就可以在 .vue 文件中直接导入和使用 Ant Design Vue 组件，而无需在 main.js 中全局注册。例如：

“`vue

“`

对于 Vite (推荐使用 Unplugin 自动导入)

对于 Vite 项目，更推荐使用 unplugin-vue-components 和 unplugin-auto-import 这两个插件，它们能够实现组件和 API 的自动导入，非常方便。

首先，安装插件：

“`bash
npm install -D unplugin-vue-components unplugin-auto-import

或者 yarn

yarn add -D unplugin-vue-components unplugin-auto-import
“`

然后，修改你的 Vite 配置文件 (vite.config.js 或 vite.config.ts)：

“`javascript
// vite.config.js
import { defineConfig } from ‘vite’
import vue from ‘@vitejs/plugin-vue’
import Components from ‘unplugin-vue-components/vite’;
import { AntDesignVueResolver } from ‘unplugin-vue-components/resolvers’;
import AutoImport from ‘unplugin-auto-import/vite’ // 如果你想自动导入 Vue Composition API 等

export default defineConfig({
plugins: [
vue(),
AutoImport({ // 如果需要自动导入 Vue Composition API 等
imports: [‘vue’],
dts: ‘./auto-imports.d.ts’, // 生成 TypeScript 声明文件
}),
Components({
resolvers: [
AntDesignVueResolver({
cc: true, // 开启驼峰命名转换，例如 button -> AButton
resolveIcons: true, // 如果需要自动导入 antdv icon 组件
importStyle: ‘css’, // 或者 ‘less’，如果需要主题定制则使用 less
})
],
dts: ‘./components.d.ts’, // 生成 TypeScript 声明文件
}),
],
})
“`

• Components 插件负责自动导入组件。
• AntDesignVueResolver 是 unplugin-vue-components 针对 Ant Design Vue 的解析器，它会查找你的模板中使用的 Ant Design Vue 组件（如 <a-button>），然后自动在后台帮你导入对应的组件代码和样式。
• cc: true 表示你可以直接在模板中使用驼峰命名（如 <a-button> 或 <aButton>)，解析器会处理。
• importStyle: 'css' (或 'less') 控制样式导入方式。

配置完成后，你就可以在 .vue 文件中直接使用 Ant Design Vue 组件，无需任何手动导入或注册步骤：

“`vue

```

这种方式极大地简化了开发过程，是 Vite 项目中使用 Ant Design Vue 的首选方案。

4. 运行项目

安装和配置完成后，运行你的项目：

```bash
npm run serve # for Vue CLI

或者 yarn serve

npm run dev # for Vite

或者 yarn dev

```

打开浏览器，访问项目地址，如果一切顺利，你应该能看到你的 Vue 应用以及你添加的 Ant Design Vue 组件。

探索 Ant Design Vue 的核心概念与组件

现在你已经成功将 Ant Design Vue 集成到你的项目中，是时候开始使用它来构建界面了。理解 Ant Design Vue 组件的使用方式至关重要。

组件的使用：Props, Events, Slots

每一个 Ant Design Vue 组件都是一个独立的 Vue 组件。它们遵循 Vue 组件的标准使用模式：

1. Props (属性): 用于向组件传递数据或配置其行为和外观。在模板中通过 HTML 属性的方式传递。例如，<a-button type="primary" size="large"> 中的 type 和 size 都是 a-button 组件的 props。你可以在 Ant Design Vue 官方文档中找到每个组件支持的所有 props。
2. Events (事件): 用于组件与其父组件之间的通信。当组件内发生某个交互（如点击、输入改变等），它会触发一个事件，父组件可以通过 @ 语法监听并响应。例如，<a-button @click="handleClick"> 中的 @click 监听了按钮的点击事件。
3. Slots (插槽): 用于向组件内部插入自定义内容。大多数组件的内容都是通过默认插槽传递的。例如，<a-button>保存</a-button> 中的 "保存" 就是通过默认插槽插入到按钮内部的。有些组件支持具名插槽（Named Slots）和作用域插槽（Scoped Slots），用于插入特定位置或访问组件内部的数据。

示例：一个简单的按钮

```vue

```

组件分类概览

Ant Design Vue 提供了丰富的组件，通常按功能分为以下几类：

1. 通用 (General):
   • Button (按钮): 用于触发操作。
   • Icon (图标): 用于增强视觉表达和交互指引。
2. 布局 (Layout):
   • Grid (栅格): 基于 24 栅格系统的布局组件，用于快速构建页面骨架。
   • Layout (布局): 用于构建页面的整体结构，包含 Header, Footer, Sider, Content 等组件。
   • Space (间距): 用于设置元素之间的统一间距。
   • Divider (分割线): 用于分隔内容。
3. 导航 (Navigation):
   • Menu (菜单): 导航菜单。
   • Pagination (分页): 用于数据分页。
   • Breadcrumb (面包屑): 显示当前页面的层级路径。
   • Dropdown (下拉菜单): 下拉操作菜单。
   • Steps (步骤条): 用于引导用户完成一系列步骤。
4. 数据录入 (Data Entry):
   • Input (输入框): 文本输入。
   • InputNumber (数字输入框): 只允许输入数字。
   • Select (选择器): 下拉选择。
   • TreeSelect (树选择): 树形结构的下拉选择。
   • Cascader (级联选择): 多层级数据的选择。
   • Checkbox (多选框): 多选框。
   • Radio (单选框): 单选框。
   • Switch (开关): 开关按钮。
   • Slider (滑动输入条): 滑动选择数值。
   • DatePicker (日期选择框): 日期和时间选择。
   • TimePicker (时间选择框): 时间选择。
   • Upload (上传): 文件上传。
   • Rate (评分): 评分组件。
   • Form (表单): 包含了上述多种录入组件，用于构建表单和进行校验，非常重要。
5. 数据展示 (Data Display):
   • Table (表格): 展示结构化数据，功能强大（排序、过滤、分页等），非常重要。
   • Tag (标签): 用于标记和分类。
   • Badge (徽标数): 显示新消息或提醒的数量。
   • Progress (进度条): 显示操作进度。
   • Popover (气泡卡片): 鼠标移入或点击时显示的卡片。
   • Tooltip (文字提示): 简单的文字提示气泡框。
   • Card (卡片): 内容区域的划分。
   • Carousel (走马灯): 旋转木马。
   • Tree (树形控件): 树形结构的数据展示。
   • Statistic (统计数值): 用于突出显示重要的数字。
   • Descriptions (描述列表): 展示键值对列表。
   • List (列表): 通用的列表结构。
6. 反馈 (Feedback):
   • Alert (警告提示): 显示警告信息。
   • Message (全局提示): 全局显示成功、警告、错误等信息。
   • Modal (对话框): 弹出式对话框。
   • Notification (通知提醒框): 系统右上角弹出的通知。
   • Progress (进度条): 除了数据展示，也用于反馈操作进度。
   • Popconfirm (气泡确认框): 类似 Popover，但用于确认操作。
   • Spin (加载中): 用于页面或区域的加载状态。
7. 其他 (Other):
   • Anchor (锚点): 页面内部的锚点链接。
   • BackTop (回到顶部): 返回页面顶部的按钮。
   • Calendar (日历): 日历展示。

作为新手，你不需要立即掌握所有组件，可以先从最常用的开始：Button, Input, Form, Table, Layout, Menu, Message, Modal 等。

主题定制

Ant Design Vue 基于 Less 构建样式，这使得主题定制变得相对容易。你可以通过修改 Less 变量来改变组件的默认样式（如主色、字体大小、圆角等）。

如果你在配置按需加载时选择了 style: 'less'，那么你需要在你的构建工具中配置 Less 和 Less 变量覆盖。

对于 Vue CLI:

修改 vue.config.js (如果文件不存在则创建)：

```javascript
// vue.config.js
const path = require('path');

module.exports = {
css: {
loaderOptions: {
less: {
lessOptions: {
// modifyVars 用于覆盖 Less 变量
modifyVars: {
'primary-color': '#1DA57A', // 修改主色
'link-color': '#1DA57A', // 修改链接颜色
'border-radius-base': '2px', // 修改圆角大小
// ... 更多变量参考 antdv 文档
},
javascriptEnabled: true, // 允许 JavaScript 在 Less 中使用
},
},
},
},
};
```

对于 Vite:

修改 vite.config.js (或 vite.config.ts)：

```javascript
// vite.config.js
import { defineConfig } from 'vite';
import vue from '@vitejs/plugin-vue';
import Components from 'unplugin-vue-components/vite';
import { AntDesignVueResolver } from 'unplugin-vue-components/resolvers';

export default defineConfig({
plugins: [
vue(),
Components({
resolvers: [
AntDesignVueResolver({
cc: true,
resolveIcons: true,
importStyle: 'less', // 确保这里是 less
})
],
dts: './components.d.ts',
}),
],
css: {
preprocessorOptions: {
less: {
// modifyVars 用于覆盖 Less 变量
modifyVars: {
'primary-color': '#1DA57A', // 修改主色
'link-color': '#1DA57A', // 修改链接颜色
'border-radius-base': '2px', // 修改圆角大小
// ... 更多变量参考 antdv 文档
},
javascriptEnabled: true,
},
},
},
});
```

配置完成后，重启项目，你会看到你修改的 Less 变量已经生效，组件样式发生了变化。完整的可覆盖变量列表可以在 Ant Design Vue 的官方文档中找到。

国际化 (i18n)

如果你的应用需要支持多语言，Ant Design Vue 也提供了完善的国际化支持。

1. 在 main.js (或 main.ts) 中导入所需的语言包：

   ```javascript
   // main.js
   import { createApp } from 'vue';
   import App from './App.vue';
   import Antd from 'ant-design-vue';
   import 'ant-design-vue/dist/antd.css'; // 或 antd.less
   import zhCN from 'ant-design-vue/es/locale/zh_CN'; // 导入中文语言包
   import moment from 'moment';
   import 'moment/dist/locale/zh-cn'; // 导入 moment 的中文语言包

   moment.locale('zh-cn'); // 设置 moment 语言

   const app = createApp(App);

   app.use(Antd); // 如果是按需加载，这里不需要全局注册 Antd

   // 配置语言
   app.mixin({
   data() {
   return {
   locale: zhCN, // 将语言包设置到 Vue 实例数据中
   };
   },
   });

   app.mount('#app');
   ```

   注意：上面示例为了简单，使用了全局注册 Antd，如果你使用按需加载，只需导入语言包和 moment，然后在根组件或需要设置语言的组件中通过 <a-config-provider :locale="locale"> 包裹你的内容。

2. 在你的根组件或其他需要国际化的组件中，使用 <a-config-provider> 组件并绑定 locale prop：

   ```vue
   

   
   ```

这样，被 <a-config-provider> 包裹的 Ant Design Vue 组件就会根据 locale prop 的值显示相应的语言。

动手实践：构建一个简单的布局和输入框

理论知识讲了不少，现在我们来动手构建一个简单的页面布局，包含一个头部、内容区域和一个输入框和按钮。

```vue

```

在这个例子中，我们使用了：

• a-layout, a-layout-header, a-layout-content, a-layout-footer: 构建页面的整体框架。
• a-menu: 构建顶部的导航菜单。
• a-breadcrumb: 显示当前位置。
• a-space: 用于快速设置元素之间的水平或垂直间距。
• a-input: 创建一个输入框，并使用 v-model:value 进行双向绑定。
• a-button: 创建一个主要按钮，监听其 @click 事件。
• message: Ant Design Vue 提供的全局消息提示方法，使用时需要单独导入（如果不是全局注册 Antd 的话）。

这个例子展示了如何组合不同的 Ant Design Vue 组件来构建一个基本的页面结构和交互功能。

进阶使用与技巧

当你熟悉了基础组件的使用后，可以进一步探索：

• Form 组件: 学习如何使用 a-form, a-form-item 来构建复杂表单和进行数据校验。这是企业应用中非常常用的功能。
• Table 组件: 掌握如何展示数据列表、配置列、实现分页、排序、过滤等功能。
• Modal & Drawer: 学习如何使用对话框和抽屉来展示额外信息或进行复杂操作。
• 自定义组件: 了解如何基于 Ant Design Vue 的组件创建你自己的定制组件。
• 性能优化: 确保你正确配置了按需加载，并关注大型组件（如 Table）的性能。

遇到问题怎么办？

作为新手，在使用任何新库时都会遇到问题。以下是一些获取帮助的途径：

1. 官方文档: Ant Design Vue 官方文档是最好的学习资源，它包含了所有组件的详细用法、API 说明和示例代码。访问：https://next.antdv.com/components/button-cn (Vue 3 版本文档)
2. GitHub 仓库: 查看 Ant Design Vue 的 GitHub 仓库，你可以在 Issues 中搜索是否有人遇到过类似问题，也可以提交新的 Issue。
3. 社区论坛/Stack Overflow: 在相关的 Vue.js 社区或 Stack Overflow 上提问，很可能有其他开发者遇到并解决了类似的问题。
4. 在线示例: 许多组件文档都提供了 CodeSandbox 或 CodePen 的在线示例，你可以直接在上面修改和运行代码来理解组件的使用。

总结

恭喜你迈出了学习 Ant Design Vue 的第一步！通过本文，你应该已经了解了：

• Ant Design Vue 是什么，以及为什么它是构建企业级 Vue 应用界面的强大选择。
• 如何创建一个 Vue 项目并安装 Ant Design Vue。
• 最重要的，如何配置按需加载以优化应用性能（Vue CLI 和 Vite 的不同方式）。
• Ant Design Vue 组件的基本使用方法：Props, Events, Slots。
• 对主要的组件类别有一个概览。
• 如何进行基本的主题定制和国际化配置。
• 通过一个简单的示例代码动手实践了布局和基础组件的使用。

Ant Design Vue 是一个功能强大的库，它能帮助你极大地提高开发效率，并构建出专业、美观、用户体验良好的应用界面。记住，最好的学习方式是多实践，尝试在你的项目中应用不同的组件，查阅文档，不断尝试和探索。

祝你在使用 Ant Design Vue 构建界面的旅程中一切顺利！