# mms-ui **Repository Path**: mmsAdmin/mms-ui ## Basic Information - **Project Name**: mms-ui - **Description**: 🍃🍃🍃适配mms系统的后端UI管理系统界面Vue3+Vite+TypeScript - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: master - **Homepage**: https://www.mmsadmin.cn - **GVP Project**: No ## Statistics - **Stars**: 18 - **Forks**: 13 - **Created**: 2025-04-25 - **Last Updated**: 2026-04-22 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README

模块化管理系统


## ⚡️系统介绍 🔥🔥🔥 MMS(模块化管理系统,Modular Management System)基于Spring Boot 3.x构建,采用前后端分离的现代化架构设计。该系统集成了用户管理、商品管理、支付系统、订单处理、分销体系、日志监控、定时任务、通信服务、直播支持、广告管理与内容发布等多个功能模块,致力于为开发者提供高效、稳定且可扩展的开发脚手架,显著提升项目开发效率,助力各类应用快速落地与迭代。 🚀🚀🚀 我们将作为持续更新迭代,定期发布功能更新、Bug修复和技术栈升级,确保系统始终处于技术前沿,打造最有价值的开源项目,为开发者社区贡献力量。 > 项目代码和文档完全开源免费,支持商业使用。🚀 > 我们秉承"活到老,写到老"的开源精神,为兴趣而开源,为学习而开源。🚀 🍃系统演示: [传送门](https://mmsadmin.cn/index/demo.html) 🍃MMS文档: [mms](https://mmsadmin.cn/) ## 🧩系统版本 | 名称 | 别名 | 项目地址 | 注意事项 | | ------ | :----: | :-----------------------------------------: | ----------------------------------------------------------------------------------------------------------- | | mms | 标准版 | -[Gitee](https://gitee.com/mmsAdmin/mms) | 🙋功能齐全的手架系统
📢完全具备高效的项目开发
📢完多租户模式灵活开启
📢支持低代码自动生成模式 | | mms-ui | 标准版 | -[Gitee](https://gitee.com/mmsAdmin/mms-ui) | 🙋适配mms后端系统的管理界面项目 | ## 🚀 快速启动 | 启动方式 | 适用系统 | 推荐指数 | 说明 | | -------------- | -------- | ---------- | ----------------- | | `npm run dev` | All | ⭐⭐⭐⭐ | 传统 npm 启动方式 | | `pnpm install` | All | ⭐⭐⭐⭐⭐ | pnpm 手动启动方式 | > 💡 **建议**:首次使用建议使用菜单脚本,会自动检查环境、配置镜像源和依赖安装 - Mac / Linux:在 **`mms-ui` 根目录**执行 **`./scripts/mms.sh`**(交互菜单:镜像、依赖、构建等)。 - Windows:`powershell -ExecutionPolicy Bypass -File ./scripts/mms.ps1` ## 系统版本
| 名称 | 项目名 | 项目地址 | 注意事项 | | ----------- | :------: | :-------------------------------------------: | --------------------------------------------------------------------------------------------------- | | 基础版-后端 | mms | -[Gitee](https://gitee.com/mmsAdmin/mms) | 🙋‍♂️适用:纯后端的系统 | | 基础版-前端 | mms-ui | -[Gitee](https://gitee.com/mmsAdmin/mms-ui) | 🙋‍♂️适配:基础版后端系统 | | MMS商城版 | mms-mall | -[Gitee](https://gitee.com/mmsAdmin/mms-mall) | 🙋‍♂️若遇到问题请联系我们(备注:mms)
📢微信号:qq942879858
📢Q  Q号:942879858 | ## **官方文档** [🍃 模块化管理系统 🍃](https://www.mmsadmin.cn) ## 开发语言
vue vite typescript Pinia2 eslint pnpm Prettier Sass WindCSS



## 部署方式 ## 模块介绍 | 序号 | 目录 | 子模块名称 | 模块名称 | 备注 | | ---- | ----------------------------------------------------------- | ------------------------------------------------------------ | ------------------ | ---------- | | 1 | [mms-admin](https://www.mmsadmin.cn/index/settings.html) | | 系统管理启动模块 | 已完成 | | 2 | [mms-merchant](https://www.mmsadmin.cn/index/settings.html) | | 商户管理启动模块 | 待完成 | | 3 | [mms-mobile](https://doc.sxpcwlkj.com/index/settings.html) | | 移动端接口启动模块 | 已完成 | | 4 | mms-modules | | MMS模块集 | 持续增加中 | | 5 | |________ | [mms-common](https://www.mmsadmin.cn/index/settings.html) | 公共模块 | 已完成 | | 6 | |________ | [mms-framework](https://www.mmsadmin.cn/index/settings.html) | 核心模块 | 已完成 | | 7 | |________ | [mms-mq](https://www.mmsadmin.cn/index/settings.html) | 消息队列 | 已完成 | | 8 | |________ | [mms-system](https://www.mmsadmin.cn/index/settings.html) | 系统管理 | 已完成 | | 9 | mms-patulous | | 第三方模块集 | 已完成 | | 10 | |________ | [mms-generator](https://www.mmsadmin.cn/index/settings.html) | 代码生成 | 已完成 | | 11 | |________ | [mms-powerjob](https://www.mmsadmin.cn/index/settings.html) | 定时任务 | 已完成 | | 12 | [ui-admin](https://www.mmsadmin.cn/index/settings.html) | | 系统管理前端 | 已完成 | | 13 | [ui-mobile](https://www.mmsadmin.cn/index/settings.html) | | 移动端 | 已完成 | | 14 | [ui-tenant](https://www.mmsadmin.cn/index/settings.html) | | 商户管理前端 | 待完成 | ## 🏭 环境支持 | Edge | Firefox | Chrome | Safari | | ---------- | ------------- | ------------ | ------------ | | Edge ≥ 88 | Firefox ≥ 78 | Chrome ≥ 87 | Safari ≥ 13 | > 由于 Vue3 不再支持 IE11,故而 ElementPlus 也不支持 IE11 及之前版本。 ## ⚡ 使用说明 > Vite 不再支持 Node 12 / 13 / 15,因为上述版本已经进入了 EOL 阶段。现在你必须使用 Node 14.18+ / 16+ 版本。 ## Node.js 版本 推荐 - Node.js 20.19.5 (Latest LTS: Iron) - Node.js >=18.0.0 - PM >=8.0.0 - Vite ^18.0.0 || ^20.0.0 || >=22.0.0 - TypeScript >=14.17 ## 😀 nvm管理工具管理Nodejs ```bash # 推荐安装Node.js 20.19.5 nvm install 20.19.5 # 切换 nvm use 20.19.5 # 验证 nvm ls ``` ## 😀 镜像加速 更多配置见: [NPM 镜像加速配置指南](#npm-镜像加速配置指南) ### 一键配置(推荐) ```bash # 配置镜像加速(在 mms-ui 根目录) bash scripts/setup-npm-mirrors.sh # 验证配置 bash scripts/verify-mirrors.sh # 测试镜像 npm config get registry && npm view vue version ``` ## 😀 项目启动 ### 🍉 方式一(NPM 推荐) ```bash # 安装依赖 npm install # 运行项目 npm run dev # 打包发布 npm run build # ===扩展代码=== # 1.删除依赖 rm -rf node_modules package-lock.json # 2.运行格式化 npm run format # 3.代码质量检查 npm run lint # 4.清除 npm 缓存 npm cache clean --force ``` ### 🚀 方式二(PNPM 推荐,高性能) #### 📦 PNPM 命令 ```bash # 进入项目 cd ./mms-ui # 安装pnpm npm install -g pnpm # 使安装依赖 pnpm install # 使用 pnpm 启动开发服务器 pnpm dev # 使用 pnpm 构建项目 pnpm build #### 🛠️ PNPM 脚本功能说明 | 命令 | 说明 | | ---- | ---- | | `pnpm install` | 安装依赖(可加 `--registry=https://registry.npmmirror.com`) | | `pnpm dev` / `npm run dev` | 开发服务器 | | `pnpm build` / `npm run build` | 生产构建 | | `pnpm store prune` | 清理 pnpm 存储(可选) | **📋 启动脚本特性:** - ✅ 自动检查 Node.js 和 pnpm 环境 - ✅ 智能镜像源配置(淘宝/官方) - ✅ 多种清理选项(缓存/依赖/完全清理) - ✅ 交互式启动模式选择 - ✅ 跨平台支持(Linux/macOS/Windows) - ✅ 彩色界面,用户体验友好 ## NPM 镜像加速配置指南 ### 📦 支持的包管理器 #### NPM(推荐) - **配置文件**: `.npmrc` - **配置方式**: 自动配置 - **验证命令**: `npm config get registry` ### PNPM - **配置文件**: `.pnpmrc` - **手动配置**: `pnpm config set registry https://registry.npmmirror.com` - **验证命令**: `pnpm config get registry` ### 🌐 可用镜像源 | 镜像源 | 地址 | 推荐指数 | 说明 | | ------------- | ---------------------------------------------- | ---------- | -------------------- | | 🥇 淘宝镜像 | `https://registry.npmmirror.com` | ⭐⭐⭐⭐⭐ | 国内最快,已设为默认 | | 🥈 华为云镜像 | `https://repo.huaweicloud.com/repository/npm/` | ⭐⭐⭐⭐ | 速度较快,稳定可靠 | | 🥉 腾讯云镜像 | `https://mirrors.cloud.tencent.com/npm/` | ⭐⭐⭐⭐ | 国内访问稳定 | | 🌍 官方镜像 | `https://registry.npmjs.org/` | ⭐⭐⭐ | 官方源,海外较快 | ### 🔧 管理命令 #### 基础命令 ```bash # 配置 / 验证镜像(在 mms-ui 根目录) bash scripts/setup-npm-mirrors.sh bash scripts/verify-mirrors.sh npm config get registry && npm view vue version # 切换镜像 npm config set registry https://registry.npmmirror.com # 淘宝 npm config set registry https://registry.npmjs.org/ # 官方 # 快速安装(npm) npm install --registry=https://registry.npmmirror.com ``` #### 高级管理 ```bash # 使用镜像管理器 node scripts/mirror-manager.js setup # 完整配置 node scripts/mirror-manager.js test # 测试所有镜像速度 node scripts/mirror-manager.js list # 显示可用镜像 node scripts/mirror-manager.js report # 生成配置报告 ``` ### ⚙️ 配置说明 #### NPM 配置 (.npmrc) ```ini # 主镜像源 registry=https://registry.npmmirror.com # 作用域镜像 @vue:registry=https://registry.npmmirror.com @vite:registry=https://registry.npmmirror.com @element-plus:registry=https://registry.npmmirror.com @types:registry=https://registry.npmmirror.com # 网络优化 fetch-timeout=300000 fetch-retry-mintimeout=20000 fetch-retry-maxtimeout=120000 fetch-retries=3 # 其他配置 audit-level=moderate fund=false package-lock=true ``` #### PNPM 配置 (.pnpmrc) ```ini registry=https://registry.npmmirror.com store-dir=~/.pnpm-store cache-dir=~/.pnpm-cache fetch-timeout=300000 shamefully-hoist=false strict-peer-dependencies=false ``` ### 🔍 故障排查 #### 常见问题 1. **镜像连接失败** ```bash # 检查网络连接 curl -I https://registry.npmmirror.com # 重新配置镜像 bash scripts/setup-npm-mirrors.sh ``` 2. **安装速度慢** ```bash # 验证镜像配置 bash scripts/verify-mirrors.sh # 测试镜像速度 node scripts/mirror-manager.js test ``` 3. **配置不生效** ```bash # 清除缓存 npm cache clean --force # 重新配置 bash scripts/setup-npm-mirrors.sh ``` #### 恢复官方源 ```bash # NPM npm config set registry https://registry.npmjs.org/ # Yarn yarn config set registry https://registry.npmjs.org/ # PNPM pnpm config set registry https://registry.npmjs.org/ ``` ### 📊 性能对比 | 操作 | 官方源 | 淘宝镜像 | 提升 | | -------- | ------- | -------- | -------- | | 依赖安装 | ~120s | ~30s | 75% ⬆️ | | 包查询 | ~3000ms | ~200ms | 93% ⬆️ | | 首次安装 | ~180s | ~45s | 75% ⬆️ | ### 💡 最佳实践 1. **团队协作** - 统一使用淘宝镜像 - 将配置文件提交到版本控制 - 在 CI/CD 中使用镜像加速 2. **自动化** - 在 `postinstall` 脚本中验证镜像配置 - 使用 `.nvmrc` 锁定 Node.js 版本 - 定期更新镜像配置 3. **监控** - 定期测试镜像速度 - 监控依赖安装时间 - 准备备用镜像方案 ### 🆘 技术支持 如遇问题,请: 1. 运行 `bash scripts/verify-mirrors.sh` 检查配置 2. 查看 `scripts/mirror-manager.js report` 生成的报告 3. 检查网络连接和防火墙设置 ## 🔧 `package.json` 脚本(核心) `mms-ui` 根目录 **`package.json`** 以 **开发 / 构建 / 质量 / 插件联邦** 为主;**镜像、依赖、一键启动**等也可通过下方 **`mms`** 进入交互菜单(等同 **`./scripts/mms.sh`**)。 | 脚本 | 说明 | | ---- | ---- | | `dev` / `build` / `preview` | 开发 / 生产构建 / 预览 `dist` | | `mms` / `mms:win` | 交互菜单:`pnpm run mms`(`bash ./scripts/mms.sh`);Windows 用 `pnpm run mms:win` | | `lint` / `lint:fix` / `type-check` | ESLint、类型检查 | | `format` / `format:check` / `format:lint` / `pre-commit` | Prettier 与提交前检查 | | `fed:plugin-ui:build` / `fed:plugin-ui:dev` | 联邦插件子包:`pnpm run fed:plugin-ui:build -- @mms-ui/plugin-xxx-ui` | 可选一键启动:**`./scripts/start-pnpm.sh`**(Linux/macOS)、**`./scripts/start-pnpm.ps1`**(Windows)。 ## 💯 🐱 🙋‍♂️ 💫 📢 🔥常见问题 1. `vite build --mode production && vue-tsc --noEmit` * `vue-tsc`:Vue 官方提供的命令,用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查. * `--noEmit`:TS 编译器的选项,使用 --noEmit 选项后,编译器仅执行类型检查,而不会生成任何实际的编译输出在打包的时候编译器执行了TS类型检查,所以才报了一堆错,类型错误最终不会影响项目的正常运行。 2. 有时候会出现`Couldn't find any versions for "@rollup/rollup-linux-riscv64-gnu" that matches "4.34.2"? Please choose a version of "@rollup/rollup-linux-riscv64-gnu" from this list: (Use arrow keys)` 找不到与“4.34.2”匹配的“@rollup/rollup-linux-riscv64-gnu”的任何版本 ? 请从这个列表中选择一个“@rollup/rollup-linux-riscv64-gnu”的版本:**(使用箭头键)** 3. 代码质量检测 `npm run lint` , 代码自动修复(简单的警告会修复)`npm run lint-fix` 或者 `npx prettier --write src/` 4. 对于确实需要保留的 console 和 debugger,添加禁用注释,否则会被自动修复注释: ```javascript // eslint-disable-next-line no-console console.log('调试信息'); // eslint-disable-next-line no-debugger debugger; ``` 5. 批量修复空格/制表符问题,这个很好用,格式化代码 `npx prettier --write "src/views/system/**/*.vue"` 6. 清除 npm 缓存 `npm cache clean --force` 7. 删除 node_modules 和 package-lock.json `rm -rf node_modules package-lock.json`