关于vue.js:vue3antdadmin管理后台框架

前言

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

method: post
url: /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

感谢您的浏览与反对！