# mms-ui

**Repository Path**: kuerhero/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**: 0
- **Forks**: 12
- **Created**: 2025-09-05
- **Last Updated**: 2025-09-05

## 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，是一款基于多应用模块用户、商品、支付、订单、分销、日志、定时、通信、直播、广告、文章等多模块应用开源系统，可快速的应用与各类项目研发中，定期更新功能修复、上新、技术栈分享 (
十年磨一剑，做最有价值的开源项目)！

## 系统版本

<br/>
<img src="https://img.shields.io/badge/MMS-V1.0.0-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 |

## 开发语言

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

## 部署方式
<br/>
<img src="https://img.shields.io/docker/automated/tsund/tianchi_docker_practice.svg" alt=""/>

## **官方文档**

<br/>

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

## 模块介绍

| 序号 | 目录                                                          | 子模块名称                                                         | 模块名称      | 备注    |
|----|-------------------------------------------------------------|---------------------------------------------------------------|-----------|-------|
| 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)   |                                                               | 商户管理前端    | 待完成   |


## 部署方式

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

## 官方文档

<br/>

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

#### 🏭 环境支持

| 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+ 版本。

#### 💫 YARN方式 (推荐方式)
#### 🚧 安装 yarn

```bash
# 推荐安装 20.15.0
nvm install 20
# 切换 20.15.0
nvm use 20
# 安装yarn
npm install -g yarn --registry=https://registry.npmmirror.com
```

```bash
# 进入项目
cd ./mms-ui

# 安装依赖
yarn install --registry=https://registry.npmmirror.com

# 运行项目
yarn dev

# 打包发布
yarn build
```

#### 😀 nvm管理工具管理Nodejs
```bash
# 推荐安装 16.14.0
nvm install 16.14.0

# 切换
nvm use 16.14.0

# 验证
nvm ls
```
#### 🍉 NPM方式 (保守方式)
```bash
# 安装依赖
npm install --registry=https://registry.npmmirror.com

# 运行项目
npm run dev

# 打包发布
npm run build

# ===扩展代码===
# 运行格式化
npm run format
# 代码质量检查
npm run lint
```

```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"        // 清理构建缓存
```


#### 💯 🐱 🙋‍♂️ 💫 📢 🔥常见问题
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`