模块化管理系统

MMS · Modular Management System

mms-ui · 管理端前端

📘 在线文档 · mmsadmin.cn · Gitee · GitHub

English | 简体中文

mms-ui 是 MMS 管理端前端，用于对接 mms/mms-admin 后端能力，同时支持将部分“插件前端子包”通过 Module Federation 的方式打包并随插件 JAR 一起交付（插件联邦规范见在线文档 mmsadmin.cn 的 /mms-plugins/ 分册）。

---

页面展示

当前管理端实景截图，展示登录、系统工作台、账户表单、权限管理、配置、代码生成和插件市场。每行两张，点击图片查看原图；也可右键在新窗口打开。

登录页面	系统管理工作台
新增用户表单	新增角色与菜单权限
角色管理	菜单管理
字典管理	系统基础设置
代码生成	插件市场

代码生成与插件市场截图为未导入表、未安装插件时的界面；用户与角色表单仅展示，未提交新增。

截图统一维护在母仓 mms-plus/mms/script/img/，本地路径为 ../mms/script/img/。此处引用后端仓原始图片地址，便于单独浏览 mms-ui 仓库；更新截图后需同步发布后端仓图片。

技术栈

• Vue 3 + Vite + TypeScript
• Element Plus / Pinia / Vue Router
• 包管理器：pnpm（推荐团队统一）

---

环境要求

• Node.js：推荐 22（本教程使用的版本）
• pnpm：本教程使用 10（先执行 npm install -g pnpm@10）

---

安装 Node.js 通常会带上 npm，但不会自动安装 pnpm。nvm 用于安装和切换 Node.js 版本；Maven 是 Java 后端的构建工具，其命令为 mvn，需要单独安装。

macOS / Linux / WSL：安装 nvm、Node.js 和 pnpm

按照 nvm 官方安装说明安装 nvm，然后重新打开终端。已有 Node.js 且无需切换版本时，可以跳过 nvm。

# 安装 nvm（官方安装脚本）
curl -o- https://raw.githubusercontent.com/nvm-sh/nvm/v0.40.8/install.sh | bash

重新打开终端后执行：

command -v nvm
nvm install 22
nvm use 22
nvm alias default 22
node -v
npm -v
npm install -g pnpm@10
pnpm -v

切换 nvm 管理的 Node.js 版本后，如果找不到 pnpm，需要在当前版本下重新安装。Node.js 25 起不再附带 Corepack，教程不依赖 Corepack 自动提供 pnpm。原生 Windows 使用 nvm-windows或 Node.js 官方安装包，不运行上述 nvm Shell 安装脚本。

快速开始

安装依赖

cd mms-ui
pnpm install

本地开发

pnpm dev

构建与预览

pnpm build
pnpm preview

---

常用脚本（package.json）

命令	说明
pnpm dev	开发（vite --mode development --open）
pnpm build	生产构建（vite build --mode production）
pnpm preview	预览构建产物
pnpm lint / pnpm lint:fix	ESLint 检查 / 自动修复
pnpm type-check	vue-tsc 类型检查（不产物输出）
pnpm format / pnpm format:check	Prettier 格式化 / 校验
pnpm fed:plugin-ui:build	构建插件联邦子包（配合 -- <packageName>）
pnpm fed:plugin-ui:dev	开发插件联邦子包（配合 -- <packageName>）
pnpm mms / pnpm mms:win	交互式菜单脚本（镜像/依赖/构建等）

---

插件联邦（Module Federation）

部分插件会把前端子包（通常在 mms-ui/packages/plugin-*-ui）构建产物打进插件 JAR 的 META-INF/mms/web，实现“插件安装即带 UI”。

示例（以 syslog 插件为例，须在 mms-ui 仓库根执行）：

cd mms-ui
pnpm install
pnpm run fed:plugin-ui:build -- @mms-ui/plugin-syslog-ui

与插件 Maven 构建联动（-Pfed-web 会在 prepare-package 自动调用上述 pnpm 命令；需已安装 Node/pnpm）：

# 在 mms-plugins 插件聚合目录：
mvn -pl mms-plugin-tool-syslog -am package -Pfed-web -DskipTests

# 或在单插件目录 mms-plugins/mms-plugin-tool-syslog：
mvn -pl . -am package -Pfed-web -DskipTests

已打好 dist 且仅需打 JAR 时：-Dskip.fed.syslog.ui.build=true。构建告警与体积说明见 packages/plugin-syslog-ui/README.md（CI 一节）。

详细规范与自检清单见在线文档 mmsadmin.cn（/mms-plugins/ 分册与插件开发指南）。

---

国内镜像/依赖安装加速（可选）

项目内提供了镜像配置与验证脚本（在 mms-ui/ 下）：

bash scripts/setup-npm-mirrors.sh
bash scripts/verify-mirrors.sh

---

常见问题（精选）

1. vite build 时出现一堆 TS 类型错误
   • 这是 vue-tsc --noEmit 的类型检查结果；是否阻断构建以团队策略为准。
2. 安装依赖卡住/找不到某些平台包
   • 建议先统一 Node/pnpm 版本，再清理 node_modules 与 lockfile 重新安装。

---

相关链接

• 后端（子模块）：../mms/
• 插件聚合：../mms-plugins/
• 文档站：../mms-doc/