Vue3中Ant-design-vue的使用-附完整代码

前言

首先介绍一下什么是Ant-design-vue

Ant Design Vue 是基于 Vue 3 的企业级 UI 组件库（同时兼容 Vue 2），是蚂蚁金服开源项目 Ant Design 的 Vue 实现版本。它遵循 Ant Design 的设计规范，提供丰富的组件和高质量的设计体系，适用于中后台管理系统和复杂业务场景。

官方网站：Ant Design of Vue - Ant Design Vue

目前官方最新版本：4.2.6

---

一、Ant-design-vue核心特性

1.设计规范统一

• 遵循 Ant Design 的设计语言（色彩、布局、动效等），提供专业的设计一致性。
• 支持 暗黑模式 和自定义主题（通过 Less 变量覆盖）。

2.丰富的组件库

• 包含 60+ 高质量组件，如表格、表单、弹窗、导航、数据展示等。
• 复杂组件支持：可编辑表格、树形控件、拖拽排序、高级表单等。

3.TypeScript 友好

• 使用 TypeScript 开发，提供完整的类型定义。

4.国际化支持

• 内置 40+ 语言包，轻松实现多语言切换。

5.响应式布局

• 适配不同屏幕尺寸，支持移动端和桌面端。

二、安装

我这里使用的编译器是VSCode  只需要将你的项目文件在集成终端打开输入安装指令即可

npm install ant-design-vue@4.x

下载完之后可以在 package.json中查看是否下载成功

 

三、使用步骤 

1.引入

我们这里用到的是全局引入的方法

在main.js文件当中分别导入ant-design-vue和CSS样式

2.组件部分

我们这里以表格组件（JS版本）为例

找到表格组件切换成JS版本，复制对应代码

 我这里对基础代码进行了自定义修改

<a-table :columns="columns" :data-source="date" bordered><template #bodyCell="{ column, text }"><template v-if="column.dataIndex === 'name'"><a>{{ text }}</a></template></template><template #title>人员管理信息</template>
</a-table>
<script setup>
import { Table } from '@/API/request'
const columns = [{title: '姓名',dataIndex: 'name',},{title: '性别',dataIndex: 'sex',},{title: '年龄',dataIndex: 'age',},{title: '薪资',dataIndex: 'Salary',},
];
const date = ref()
onMounted(() => {//表格数据获取Table().then((res) => {date.value = res.data.tableData})</script>

 表格的数据来自于本地JSON数据，通过Axios获取

3.JSON数据 

{"tableData": [{"key": "1","name": "张三","sex": "男","age": "25","Salary":"1500"},{"key": "2","name": "李四","sex": "男","age": "28","Salary":"2500"},{"key": "3","name": "王五","sex": "男","age": "22","Salary":"1300"},{"key": "4","name": "赵六","sex": "男","age": "29","Salary":"3000"},{"key": "5","name": "小花","sex": "女","age": "25","Salary":"1900"}]
}

 4.Axios封装部分

我这里对于Axios进行了二次封装

//api.js
import axios from "axios";
const request = axios.create({baseURL:"http://localhost:8080/"
})
export default request

  

//request.js
import request from "./api";
export function Table(data){return request({url:'/js/employee.json',method:'GET',data:data})
}

5.运行结果