多端前端后台管理
后台管理前端
后台管理端是平台的管理面:系统管理、应用市场、插件开发台、任务中心都在这里。它同时是远程应用前端的宿主——这一点和普通后台前端不同,也是读这一章最需要先建立的认知。
- 工程目录:
plus-ui/ - 包名:
wujies-admin - 版本:
5.5.1-2.5.1 - 开发端口:
80 - 后端地址:开发环境
/dev-api→http://127.0.0.1:8086
技术栈
| 依赖 | 版本 | 用途 |
|---|---|---|
| Vue | 3.5.13 | 运行时 |
| TypeScript | ~5.8.3 | 类型 |
| Element Plus | ^2.11.8 | 组件库 |
| Vite | 6.3.2 | 构建与开发服务器 |
| Pinia | 3.0.2 | 状态 |
| Vue Router | 4.5.0 | 路由 |
| UnoCSS | 66.5.2 | 原子化样式 |
| Axios | 1.8.4 | 请求 |
它负责什么
| 能力 | 说明 | 文档 |
|---|---|---|
| 系统管理 | 用户、角色、菜单、部门、字典、参数、租户 | 功能手册 |
| 应用市场 | 浏览、安装、升级、启停、卸载应用 | 应用市场 |
| 插件开发台 | 可视化新建插件、构建、热加载 | 插件开发台 |
| 任务中心 | 定时任务、执行日志 | 任务中心 |
| 远程应用宿主 | 运行期按后端清单加载应用前端 ESM | 远程应用接入 |

后台管理工作台(截图占位)
/images/docs/admin-dashboard.png建议 2560 × 1600,截工作台首屏;右侧保留用户/租户信息。
工程结构(先看这几处)
plus-ui/
├── index.html import map:裸模块 → /app-runtime/*.js
├── vite.config.ts 端口、代理、插件
├── app-market-dist/ 远程应用产物与运行时垫片(构建期复制进 dist)
│ ├── remote-apps/<appCode>/ 各应用前端 ESM
│ └── app-runtime/ vue / element-plus / @dromara/* 垫片
├── scripts/ gen-runtime、check-runtime、check-globals、check-remote
└── src/
├── api/ 接口定义
├── components/ 通用组件
├── layout/ 布局与侧边栏
├── plugins/appmarket/ ★ 远程应用 loader / runtime / bootstrap
├── router/ 路由与权限
├── store/ Pinia
└── views/
├── appstore/ 应用市场 / 我的应用 / 应用上架
├── system/ 系统管理
├── monitor/ 监控
└── ...真正需要先读的是 src/plugins/appmarket/:
| 文件 | 职责 |
|---|---|
runtime.ts | 把宿主正在使用的 Vue / Router / Pinia / Element Plus / axios 挂到 globalThis |
loader.ts | import() 远程 ESM、注册视图与路由、卸载 |
bootstrap.ts | 从后端 GET /app/runtime/remote-apps 取入口清单 |
constants.ts | remote: 前缀、平台版本、等待超时 |