前言

vue3-antd-admin是一个后盾前端解决方案，它基于vue3和antd-ui实现。它应用了最新的前端技术栈，集成了动静路由、鉴权登录、菜单治理等根底性能，在此之上对款式进行优化，解决了其余框架菜单超出不滚动、未BFC隔离等被疏忽的问题。它与同类型框架相比逻辑更加清晰简洁，没有冗余代码上手更加疾速。置信不论你的需要是什么，本我的项目都能帮忙到你。good luck！

本我的项目以后只是根底局部实现了，还有很多中央须要欠缺，例如：H5适配、页面动画、指令权限、更多好用的组件等等等等，因为自己平时工作起因并不能疾速迭代更新，所以心愿更多的开发者退出进来

本框架已开源至github 传送门

预览

框架根底版秉承开箱即用的理念，无多余组件页面，代码分明不冗余

demo在线预览

账号：admin | 明码：123456

文档地址

装置应用

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: posturl: /login

接口标准

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

b、获取用户信息接口

method: geturl: /info

接口标准

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

c、菜单接口

method: geturl: /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、退出登录接口

method: posturl: /logout

接口标准

export interface ResponseData<T = any> {  code: number,  message: string,  data?: T}

至此你就能够纵情的应用了！增加删除页面只须要在后盾增删数据库数据就行了，前端只须要专一于页面交互。

如果你想深刻理解框架外部运行逻辑，请持续框架文档 传送门

如何奉献

十分欢送你的退出！提一个 Issue 或者提交一个 Pull Request。

Pull Request:

  1. Fork 代码!
  2. 创立本人的分支: git checkout -b feat/xxxx
  3. 提交你的批改: git commit -am 'feat(function): add xxxxx'
  4. 推送您的分支: git push origin feat/xxxx
  5. 提交pull request

感谢您的浏览与反对！