# 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

<div align="center">
   <br/> 
   <a href="#">
     <img width="150" src="https://mmsadmin.cn/logo.png">
   </a>
   <h1>模块化管理系统</h1>
   <br/>
</div>

## ⚡️系统介绍

🔥🔥🔥 MMS（模块化管理系统，Modular Management System）基于Spring Boot 3.x构建，采用前后端分离的现代化架构设计。该系统集成了用户管理、商品管理、支付系统、订单处理、分销体系、日志监控、定时任务、通信服务、直播支持、广告管理与内容发布等多个功能模块，致力于为开发者提供高效、稳定且可扩展的开发脚手架，显著提升项目开发效率，助力各类应用快速落地与迭代。

🚀🚀🚀 我们将作为持续更新迭代，定期发布功能更新、Bug修复和技术栈升级，确保系统始终处于技术前沿，打造最有价值的开源项目，为开发者社区贡献力量。

> 项目代码和文档完全开源免费，支持商业使用。🚀
> 我们秉承"活到老，写到老"的开源精神，为兴趣而开源，为学习而开源。🚀

🍃系统演示: [传送门](https://mmsadmin.cn/index/demo.html)

🍃MMS文档: [mms](https://mmsadmin.cn/)

## 🧩系统版本

<img src="https://img.shields.io/badge/MMS-V1.X-green"/>


| 名称   |  别名  |                  项目地址                  | 注意事项                                                                                                    |
| ------ | :----: | :-----------------------------------------: | ----------------------------------------------------------------------------------------------------------- |
| mms    | 标准版 |  -[Gitee](https://gitee.com/mmsAdmin/mms)  | 🙋功能齐全的手架系统<br/> 📢完全具备高效的项目开发<br/> 📢完多租户模式灵活开启<br/>📢支持低代码自动生成模式 |
| 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`
 
<img src="https://www.mmsadmin.cn/images/mms-ui-tool.png" width="60%" />

## 系统版本

<br/>
<img src="https://img.shields.io/badge/MMS-V1.X-green"/>


| 名称        |  项目名  |                   项目地址                   | 注意事项                                                                                            |
| ----------- | :------: | :-------------------------------------------: | --------------------------------------------------------------------------------------------------- |
| 基础版-后端 |   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）<br>📢微信号：qq942879858<br>📢Q&nbsp;&nbsp;Q号：942879858 |

## **官方文档**

[🍃 模块化管理系统 🍃](https://www.mmsadmin.cn)

## 开发语言

<div style="text-align: center;float: left;width: 100%">
   <img style="margin: 5px ;float: left;height: 20px" src="https://img.shields.io/badge/language-JAVA-<COLOR>.svg" alt=""/>
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-Docker-pink.svg" alt=""/>
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-Vue3.2-34495e?logo=vue.j" alt="vue" />
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-Vite4-646cff?logo=vite&logoColor=white" alt="vite" />
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-TypeScript4.9-blue?logo=typescript&logoColor=white" alt="typescript" />
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-Pinia2-yellow?logo=picpay&logoColor=white" alt="Pinia2" />
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-ESLint-4b32c3?logo=eslint&logoColor=white" alt="eslint" />
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-pnpm7-F69220?logo=pnpm&logoColor=white" alt="pnpm" />
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-Prettier-ef9421?logo=Prettier&logoColor=white" alt="Prettier">
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-Sass-1D365D?logo=Sass&logoColor=white" alt="Sass">
   <img style="margin: 5px ;float: left;height: 20px"  src="https://img.shields.io/badge/language-Wind%20CSS-06B6D4?logo=Tailwind%20CSS&logoColor=white" alt="WindCSS">
</div>

<br/><br/><br/>

## 部署方式

<img src="https://img.shields.io/docker/automated/tsund/tianchi_docker_practice.svg" alt=""/>

## 模块介绍


| 序号 | 目录                                                        | 子模块名称                                                   | 模块名称           | 备注       |
| ---- | ----------------------------------------------------------- | ------------------------------------------------------------ | ------------------ | ---------- |
| 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`