Vue 3 搭配 Ant Design Vue：构建专业级前端应用(小白必看)

原创已于 2025-02-11 15:14:28 修改 · 2.1k 阅读

19 ·

CC 4.0 BY-SA版权

文章标签：

#vue.js

于 2025-02-11 14:52:31 首次发布

一、引言

在当今的前端开发领域，构建专业、高效且美观的前端应用是开发者们不断追求的目标。Vue 3 作为 Vue.js 的新一代版本，凭借其先进的组合式 API、更好的性能和响应式系统，为开发者提供了更出色的开发体验。而 Ant Design Vue 是基于 Ant Design 设计体系开发的 Vue 组件库，拥有丰富多样、设计精良的组件。将 Vue 3 与 Ant Design Vue 搭配使用，能够充分发挥两者的优势，快速构建出专业级的前端应用。

二、Ant Design Vue 简介

Ant Design Vue 具有以下显著特点：

丰富的组件库：涵盖了从基础的按钮、输入框到复杂的表格、表单、树形控件等大量组件，满足各种业务场景的需求。
一致性设计：遵循 Ant Design 统一的设计语言，组件风格统一，视觉效果美观，能帮助开发者打造出具有专业感的界面。
高度可定制：提供了丰富的配置选项和样式定制能力，允许开发者根据项目需求对组件进行个性化定制。
国际化支持：支持多种语言，方便开发全球化的应用。

三、在 Vue 3 项目中集成 Ant Design Vue

3.1 创建 Vue 3 项目

可以使用 Vite 快速创建一个 Vue 3 项目，在命令行中执行以下命令：

npm init vite@latest my-vue3-app -- --template vue
cd my-vue3-app
npm install

3.2 安装 Ant Design Vue

在项目根目录下，使用 npm 或 yarn 安装 Ant Design Vue：

npm install ant-design-vue
# 或者
yarn add ant-design-vue

3.3 引入 Ant Design Vue

在项目的 main.js（或 main.ts）文件中引入 Ant Design Vue 及其样式：

import { createApp } from 'vue';
import App from './App.vue';
import Antd from 'ant-design-vue';
import 'ant-design-vue/dist/antd.css';

const app = createApp(App);
app.use(Antd);
app.mount('#app');

四、使用 Ant Design Vue 组件构建界面

4.1 按钮组件示例

在组件模板中使用 Ant Design Vue 的按钮组件：

<template>
  <div>
    <a-button type="primary">主要按钮</a-button>
    <a-button type="default">默认按钮</a-button>
    <a-button type="dashed">虚线按钮</a-button>
    <a-button type="link">链接按钮</a-button>
  </div>
</template>

<script setup>
// 无需额外配置，直接使用组件
</script>

4.2 表单组件示例

创建一个简单的登录表单：

<template>
  <a-form :model="form" @finish="onFinish">
    <a-form-item label="用户名" name="username" :rules="[{ required: true, message: '请输入用户名' }]">
      <a-input v-model:value="form.username" />
    </a-form-item>
    <a-form-item label="密码" name="password" :rules="[{ required: true, message: '请输入密码' }]">
      <a-input-password v-model:value="form.password" />
    </a-form-item>
    <a-form-item>
      <a-button type="primary" html-type="submit">登录</a-button>
    </a-form-item>
  </a-form>
</template>

<script setup>
import { ref } from 'vue';

const form = ref({
  username: '',
  password: ''
});

const onFinish = (values) => {
  console.log('表单提交成功:', values);
};
</script>

4.3 表格组件示例

展示一个简单的数据表格：

<template>
  <a-table :columns="columns" :data-source="dataSource" />
</template>

<script setup>
import { ref } from 'vue';

const columns = ref([
  {
    title: '姓名',
    dataIndex: 'name',
    key: 'name'
  },
  {
    title: '年龄',
    dataIndex: 'age',
    key: 'age'
  },
  {
    title: '地址',
    dataIndex: 'address',
    key: 'address'
  }
]);

const dataSource = ref([
  {
    key: '1',
    name: '张三',
    age: 32,
    address: '北京市朝阳区'
  },
  {
    key: '2',
    name: '李四',
    age: 42,
    address: '上海市浦东新区'
  }
]);
</script>

五、定制 Ant Design Vue 组件样式

Ant Design Vue 支持通过多种方式定制组件样式，以满足不同项目的设计需求。

5.1 使用 CSS 变量

可以在项目的 CSS 文件中修改 Ant Design Vue 的 CSS 变量，从而改变组件的默认样式。例如：

:root {
  --ant-primary-color: #ff6600; /* 修改主题色 */
}

5.2 自定义主题

借助 @ant-design/vue-theme 工具，可以生成自定义主题。首先安装依赖：

npm install @ant-design/vue-theme

然后按照官方文档的指引生成并引入自定义主题。

结语

将 Vue 3 与 Ant Design Vue 搭配使用，为开发者提供了一个强大的工具集，能够高效地构建专业级的前端应用。Ant Design Vue 的丰富组件库和良好的设计规范，结合 Vue 3 的高性能和灵活性，使得开发过程更加顺畅。从简单的按钮、表单到复杂的表格等组件的使用，都展示了其强大的功能和便捷性。同时，通过定制组件样式，还能使应用符合项目的独特风格。无论是小型项目还是大型企业级应用，Vue 3 与 Ant Design Vue 的组合都是一个值得考虑的选择。

如果你觉得这篇文章对你在 Vue 3 项目中使用 Ant Design Vue 有所帮助，别忘了点赞和关注我！点赞是对我的鼓励，关注我可以获取更多前端开发的实用技巧和经验分享。同时，我非常期待与你交流，你在使用 Ant Design Vue 时遇到过哪些问题？或者你有什么独特的使用经验？欢迎在评论区留言，让我们一起在前端开发的道路上共同进步！