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.运行结果
