Skip to content
uAdmin

从一个页面到完整后台 ​

uAdmin 把会话、导航、权限、主题和标签页放在应用内核中,把业务页面留给模块。你可以直接修改仓库里的演示应用,也可以在自己的 Vue 项目中接入共享包。

这组文档的目标是让你完成一个可运行的页面,并知道它的请求、路由和权限分别由谁负责。

先选择你的入口 ​

01 · 运行

启动第一个工作台 ​

安装依赖,进入演示,用三个角色比较不同的访问边界。

快速开始 →

02 · 开发

加入你的业务模块 ​

从接口契约和 Vue 页面开始,完成路由、导航与权限接线。

首个业务模块 →

03 · 集成

保留你的技术选择 ​

按需使用共享包,把已有后端接入同一套应用内核。

独立接入 →

04 · 交付

让应用稳定上线 ​

明确构建模式、部署基路径和静态深链的处理方式。

部署指南 →

三层职责 ​

应用负责业务。 apps/demo/src/api/ 定义业务输入输出,hooks/ 管理页面异步状态,views/ 渲染页面。src/main.ts 是装配入口。

内核负责页面之间的关系。 @uadmin/app 创建 Router、Pinia 和 HTTP 客户端,接管登录守卫、动态模块路由、导航、标签页和偏好。不要在应用中再维护一份权限 store 或另一套登录拦截器。

后端协议负责跨端约定。 @uadmin/protocol 定义 Session、Viewer、NavSnapshot 和响应信封。菜单来自后端时,后端只下发已注册模块的名称与页面路径,前端不会执行后端传来的组件代码。

text
main.ts → createUAdmin → 会话与导航 → 已启用模块 → 页面
                                                 ↓
                                           hook → API → HTTP

两种交付物,三种运行方式 ​

官网位于 apps/website,后台演示位于 apps/demo,两者分别构建。后台可以在开发服务器上使用 Mock、在静态构建中使用浏览器 Mock,或者调用真实后端。它们复用页面与 API 层,差别在请求执行的位置。

浏览器演示会保留本地业务修改和上传文件。注册验证码、聊天回复、模块安装均为模拟流程,不会发送邮件或安装服务端代码。真实产品的授权与数据校验仍由服务端执行。

推荐学习顺序 ​

  1. 启动应用,用三个账号比较导航和操作权限。
  2. 阅读目录,找到一个页面的 API、hook 和 Mock。
  3. 完成首个模块,理解路由声明与导航快照的配合。
  4. 阅读权限、HTTP与Mock,补齐失败路径。
  5. 按部署流程验证真实产物。

找不到某项能力时 ​

当前能力清单见完整特性,它面向使用者介绍当前能力。具体 API 以 packages/*/src/ 的导出和类型为准;页面效果以 apps/demo 为例。文档中的示例路径均相对仓库根目录。

Vue 3 · TypeScript · Element Plus