vue3-antd-admin管理后台框架 vue3-antd-admin管理后台框架

前言
vue3-antd-admin是一个后台前端解决方案，它基于vue3和antd-ui实现。它使用了最新的前端技术栈，集成了动态路由、鉴权登录、菜单管理等基础功能，在此之上对样式进行优化，解决了其他框架菜单超出不滚动、未BFC隔离等被忽略的问题。它与同类型框架相比逻辑更加清晰简洁，没有冗余代码上手更加快速。相信不管你的需求是什么，本项目都能帮助到你。good luck！
本项目当前只是基础部分完成了，还有很多地方需要完善，例如：H5适配、页面动画、指令权限、更多好用的组件等等等等，由于本人平时工作原因并不能快速迭代更新，所以希望更多的开发者加入进来
本框架已开源至github 传送门
预览

文章图片

文章图片

框架基础版秉承开箱即用的理念，无多余组件页面，代码清楚不冗余
安装使用
1、下载前端项目

# 克隆项目 git clone git@github.com:llyyayx/vue3-antd-admin.git# 进入项目目录 cd vue3-antd-admin# 安装依赖 npm install# 本地开发启动项目 npm run dev

2、接口配置
操作完第一步你的前端页面已经可以正常访问打开了，但是这里项目依赖 api 还是作者本人的线上地址，你需要提供如下必须的接口与设置代理到自己 api 地址上。

我们前端自己动手丰衣足食
如果你暂时不能得到后台人员的支持，可以使用框架提供的接口，这样会更方便，你可以下载 vue3-vite-admin 示例提供的 admin-nodeServe，他是线上示例实际使用的api，你只需下载完成后进入目录 npm install npm run strat 即可，默认端口号为 http://127.0.0.1:8010，如果你有node基础你可以修改其中代码来实现你需要的数据和功能。

所有必须接口配置在 @/api/login.ts 中，你可以修改必须接口的 url，但是尽量不要去修改接口 ts 类型规范！
a、登陆接口

method: post url: /login

接口规范

// 提交给后台的数据格式 export type LoginFrom = { username: string | undefined; password: string | undefined; }; // 要求后台返回的数据格式 export type LoginSuccess = { code: number; message: string; data?: T; token: string; };

b、获取用户信息接口

method: get url: /info

接口规范

// 提交给后台的数据格式无，header中token验证身份 // 要求后台返回的数据格式 export type UserInfo = { code: number, message: string, data?: T, info: { // token token: string, // 用户名 name: string, // 头像 avatar: string, // 权限 roles: string[], } }

c、菜单接口

method: get url: /menu

接口规范

// 提交给后台的数据格式无，header中token验证身份 // 要求后台返回的数据格式 export type RouterData = { code: number, message: string, data: [ { // 菜单id id: number, // 路由地址 path: string, // 菜单名称 name: string, // 相对于views文件夹的模板文件的相对位置 component: string, // 路由名称 (必须唯一) key: string, // 重定向地址 redirect?: string, // 菜单图标 icon?: string, // 菜单子集，页面级无需配置 children?: RouterObj[], // 父级id pid?: number, // 是否隐藏页面/菜单，默认false不隐藏 hidden?: boolean, // 是否缓存页面，默认false不缓存 keepAlive?: boolean } ] }

c、退出登录接口