# 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**: 8
- **Forks**: 11
- **Created**: 2025-04-25
- **Last Updated**: 2025-09-13

## Categories & Tags

**Categories**: Uncategorized

**Tags**: None

## README

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

## 系统介绍

🔥🔥🔥模块化管理系统（Modular management
system），简称：MMS，是一款基于多应用模块用户、商品、支付、订单、分销、日志、定时、通信、直播、广告、文章等多模块应用开源系统，可快速的应用与各类项目研发中，定期更新功能修复、上新、技术栈分享 (
十年磨一剑，做最有价值的开源项目)！

## 🚀 快速启动


| 启动方式       | 适用系统 | 推荐指数   | 说明              |
| -------------- | -------- | ---------- | ----------------- |
| `npm run dev`  | All      | ⭐⭐⭐⭐   | 传统 npm 启动方式 |
| `pnpm install` | All      | ⭐⭐⭐⭐⭐ | pnpm 手动启动方式 |

> 💡 **建议**：首次使用建议使用菜单脚本，会自动检查环境、配置镜像源和依赖安装

- Mac OS 亲测好用

```
npm run mms
```

- Windows 暂无测试
```
npm run mms:win
```
 
 ![](https://www.mmsadmin.cn/images/mms-ui-tool.png)

## 系统版本

<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
# 配置镜像加速
npm run mirror:setup

# 验证配置
npm run mirror:verify

# 测试镜像
npm run mirror:test
```

## 😀 项目启动

### 🍉 方式一（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 脚本功能说明


| 脚本命令               | 功能说明        | 使用场景           |
| ---------------------- | --------------- | ------------------ |
| `npm run pnpm:install` | 快速安装依赖    | 首次安装或重新安装 |
| `npm run pnpm:dev`     | PNPM 开发服务器 | 日常开发           |
| `npm run pnpm:build`   | PNPM 项目构建   | 生产环境构建       |
| `npm run pnpm:clean`   | 清理缓存和依赖  | 解决依赖问题       |

**📋 启动脚本特性：**

- ✅ 自动检查 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
# 配置镜像
npm run mirror:setup       # 一键配置淘宝镜像
npm run mirror:verify      # 验证所有配置
npm run mirror:test        # 测试当前镜像

# 切换镜像
npm run mirror:taobao      # 切换到淘宝镜像
npm run mirror:official    # 恢复官方镜像

# 快速安装
npm run install:fast       # 使用镜像快速安装
```

#### 高级管理

```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

   # 重新配置镜像
   npm run mirror:setup
   ```
2. **安装速度慢**

   ```bash
   # 验证镜像配置
   npm run mirror:verify

   # 测试镜像速度
   node scripts/mirror-manager.js test
   ```
3. **配置不生效**

   ```bash
   # 清除缓存
   npm cache clean --force

   # 重新配置
   npm run mirror:setup
   ```

#### 恢复官方源

```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. 运行 `npm run mirror:verify` 检查配置
2. 查看 `scripts/mirror-manager.js report` 生成的报告
3. 检查网络连接和防火墙设置

## 🔧 启动命令解释

### NPM Scripts 命令说明

```text
		"dev": "vite --mode development --open",           // 开发环境启动
		"preview": "vite --mode preview --open",          // 预览构建结果
		"prod": "vite --mode production --open",          // 生产环境启动（建议移除，生产环境不应使用vite serve）
		"build": "vite build --mode production",          // 生产环境构建
		"lint": "eslint --ext .js,.jsx,.ts,.tsx,.vue src/", // ESLint检查
		"lint:fix": "eslint --ext .js,.jsx,.ts,.tsx,.vue src/ --fix", // ESLint自动修复
		"type-check": "vue-tsc --noEmit",                 // TypeScript类型检查
		"format": "prettier --write \"src/**/*.{vue,js,jsx,ts,tsx,json,css,scss,md}\"", // 代码格式化
		"format:check": "prettier --check \"src/**/*.{vue,js,jsx,ts,tsx,json,css,scss,md}\"", // 格式化检查
		"format:lint": "npm run lint && npm run format",  // 组合命令：先lint后format
		"pre-commit": "npm run lint && npm run format:check", // Git预提交钩子检查

		"serve": "vite preview",                         // 预览生产构建
		"build:dev": "vite build --mode development",    // 开发环境构建
		"clean": "rm -rf dist node_modules/.vite"        // 清理构建缓存
		"mirror:setup": "bash scripts/setup-npm-mirrors.sh", // 配置淘宝镜像
		"mirror:verify": "bash scripts/verify-mirrors.sh",  // 验证淘宝镜像
		"mirror:taobao": "npm config set registry https://registry.npmmirror.com", // 淘宝镜像
		"mirror:official": "npm config set registry https://registry.npmjs.org/",  // 官方镜像
		"mirror:test": "npm config get registry && npm view vue version",          // 测试镜像
		"install:fast": "npm install --registry=https://registry.npmmirror.com"    // 快速安装
```

### PNPM Scripts 命令说明（新增）

```text
		"pnpm:install": "pnpm install --registry=https://registry.npmmirror.com",  // PNPM快速安装依赖
		"pnpm:dev": "pnpm run dev",                        // PNPM开发环境启动
		"pnpm:build": "pnpm run build",                    // PNPM生产环境构建
		"pnpm:clean": "pnpm store prune && rm -rf node_modules", // PNPM清理缓存和依赖
		"start:pnpm": "./start-pnpm.sh"                     // 启动PNPM脚本（Linux/macOS）
```

### 启动脚本功能说明

- **start-pnpm.sh** - Linux/macOS一键启动脚本，包含环境检查、镜像配置、启动选项
- **start-pnpm.ps1** - Windows PowerShell一键启动脚本，功能与shell脚本相同
- **PNPM-START-GUIDE.md** - PNPM启动脚本详细使用指南

## 💯 🐱 🙋‍♂️ 💫 📢 🔥常见问题

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`