重庆设计网站,哪个视频网站做视频赚钱的,当地建设局网站,灌南网站定制前言
首先介绍一下什么是Ant-design-vue
Ant Design Vue 是基于 Vue 3 的企业级 UI 组件库#xff08;同时兼容 Vue 2#xff09;#xff0c;是蚂蚁金服开源项目 Ant Design 的 Vue 实现版本。它遵循 Ant Design 的设计规范#xff0c;提供丰富的组件和高质量的设计体系同时兼容 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-vue4.x
下载完之后可以在 package.json中查看是否下载成功 三、使用步骤
1.引入
我们这里用到的是全局引入的方法
在main.js文件当中分别导入ant-design-vue和CSS样式 2.组件部分
我们这里以表格组件JS版本为例
找到表格组件切换成JS版本复制对应代码 我这里对基础代码进行了自定义修改
a-table :columnscolumns :data-sourcedate borderedtemplate #bodyCell{ column, text }template v-ifcolumn.dataIndex namea{{ text }}/a/template/templatetemplate #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.运行结果
