mms-ui 简介：
MMS-UI 是一个基于 Vue3 + TypeScript + Vite 技术栈的现代化前端项目，采用 Element Plus UI组件库。项目集成了完整的开发工具菜单系统，支持多包管理器（npm/pnpm）、镜像源加速、环境管理和缓存清理等功能。内置 mms.scss 工具类样式库，与 WindiCSS 协同工作，采用4px递增体系和响应式断点设计，为开发者提供高效、规范的开发体验。
获取项目
- 下载地址 ： mms-ui项目
😀 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 NVM教程
bash
# 下载nodejs 作者常用的3个版本亲测可用 16.14.0 / 20.15.0 /22.4.0
nvm install 20.19.5
# 切换
nvm use 20.19.5
# 验证
nvm ls
# 查看npm配置详情
npm config ls
# 如果执行上面命令您并未看到 registry = "https://registry.npmmirror.com" ，请执行下面命令
# 设置镜像源
npm config set registry https://registry.npmmirror.com🪟 镜像加速
bash
# 配置镜像加速
npm run mirror:setup
# 验证配置
npm run mirror:verify
# 测试镜像
npm run mirror:test更多配置见： NPM 镜像加速配置指南
🌳 MMS-UI 工具菜单
首次使用建议使用菜单脚本，会自动检查环境、配置镜像源和依赖安装
shell
npm run mmsshell
npm run mms:win
🚀 快速启动
bash
# 安装依赖
npm install
# 运行项目
npm run dev
# 打包发布
npm run buildbash
# 安装pnpm
npm install -g pnpm
# 使安装依赖
pnpm install
# 使用 pnpm 启动开发服务器
pnpm dev
# 使用 pnpm 构建项目
pnpm buildbash
# 1.删除依赖
rm -rf node_modules pnpm-lock.yaml
# 2.运行格式化
npm run format
# 3.代码质量检查
npm run lint
# 4.清除 pnpm 缓存
pnpm store prune
# 使用项目提供的 pnpm 脚本
npm run pnpm:dev
npm run pnpm:build📋 启动脚本特性：
- ✅ 自动检查 Node.js 和 pnpm 环境
- ✅ 智能镜像源配置（淘宝/官方）
- ✅ 多种清理选项（缓存/依赖/完全清理）
- ✅ 交互式启动模式选择
- ✅ 跨平台支持（Linux/macOS/Windows）
- ✅ 彩色界面，用户体验友好
控制台看到下图输出信息，说明前端框架启动成功。
默认超级管理员账号
账号：admin
密码：123456
🔥 项目结构
🐱 注意事项
- 项目路径请不要使用中文命名！！！会造成解析乱码！！！请使用全英文路径！！！
- node >=16 ,pnpm >=7.1
- 开发建议使用 谷歌浏览器-开发者版 不支持 IE\QQ 等浏览器
VScode推荐插件
- WindiCSS IntelliSense WindiCSS --- 自动完成、语法突出显示、代码折叠和构建等高级功能
- TypeScript Vue Plugin (Volar) --- 用于 TypeScript 的 Vue 插件
- Vue Language Features (Volar) --- Vue3.0 语法支持
- Iconify IntelliSense --- Iconify 预览和搜索
- i18n Ally --- 国际化智能提示
- Stylelint --- css 格式化
- DotENV --- .env 文件高亮
- Prettier --- 代码格式化
- ESLint --- 脚本代码检查
- 查看当前 npm 源
🌳 项目架构树 🌲
mms-ui/
├── 📋 配置文件层
│ ├── .env # 🌐 环境变量配置
│ ├── .env.development # 🛠️ 开发环境配置
│ ├── .env.production # 🚀 生产环境配置
│ ├── .eslintrc.js # 📝 ESLint 代码规范配置
│ ├── .prettierrc.js # 💄 Prettier 格式化配置
│ ├── .npmrc # 📦 NPM 镜像源配置
│ ├── .pnpmrc # 🚀 PNPM 配置
│ ├── package.json # 📋 项目依赖配置
│ ├── tsconfig.json # 🔧 TypeScript 配置
│ ├── vite.config.ts # ⚡ Vite 构建配置
│ └── windi.config.ts # 🎨 WindiCSS 样式配置
│
├── 🛠️ 开发脚本层
│ └── scripts/
│ ├── mms.sh # 🐧 Linux/macOS 开发工具菜单
│ ├── mms.ps1 # 🪟 Windows 开发工具菜单
│ ├── start-pnpm.sh # 🚀 Linux/macOS 一键启动脚本
│ ├── start-pnpm.ps1 # 🚀 Windows 一键启动脚本
│ ├── setup-npm-mirrors.sh # 🌐 镜像源配置脚本
│ └── verify-mirrors.sh # ✅ 镜像源验证脚本
│
├── 🎯 核心应用层
│ └── src/
│ ├── 📱 应用入口
│ │ ├── main.ts # 🚀 应用程序主入口
│ │ ├── App.vue # 🏠 根组件
│ │ └── index.html # 📄 HTML 模板
│ │
│ ├── 🧩 组件系统
│ │ ├── components/ # 🧩 公共组件库 (19个组件)
│ │ └── layout/ # 📐 布局组件 (11个文件)
│ │
│ ├── 📄 页面视图
│ │ └── views/ # 📄 页面组件 (4个页面)
│ │
│ ├── 🛣️ 路由导航
│ │ └── router/ # 🛣️ 路由配置 (4个文件)
│ │
│ ├── 🗄️ 状态管理
│ │ └── stores/ # 🗄️ Pinia 状态管理 (8个store)
│ │
│ ├── 🎨 样式系统
│ │ └── styles/ # 🎨 样式文件 (5个文件)
│ │ ├── mms.scss # 🎯 MMS 工具类样式库
│ │ └── ... # 🎨 其他样式文件
│ │
│ ├── 🌍 国际化
│ │ └── i18n/ # 🌍 多语言配置 (3个文件)
│ │
│ ├── 🔧 工具函数
│ │ └── utils/ # 🔧 工具函数库 (19个工具)
│ │
│ ├── 📊 类型定义
│ │ └── types/ # 📊 TypeScript 类型定义 (10个文件)
│ │
│ ├── 🎭 指令系统
│ │ └── directive/ # 🎭 Vue 自定义指令 (3个指令)
│ │
│ ├── 🎪 枚举常量
│ │ └── enums/ # 🎪 枚举定义 (4个枚举)
│ │
│ ├── 🔗 自定义钩子
│ │ └── hooks/ # 🔗 Vue Composition API 钩子 (2个钩子)
│ │
│ ├── 🎨 主题系统
│ │ └── theme/ # 🎨 主题配置 (12个文件)
│ │
│ ├── 🖼️ 图标资源
│ │ └── icons/ # 🖼️ SVG 图标 (1个文件)
│ │
│ └── 📦 静态资源
│ └── assets/ # 📦 静态资源 (10个文件)
│
├── 🌐 静态资源层
│ └── public/
│ └── favicon.ico # 🔖 网站图标
│
├── 📚 文档系统
│ ├── README.md # 📖 项目说明文档
│ ├── USAGE_GUIDE.md # 🚀 项目使用指南
│ ├── MMS_SCSS_GUIDE.md # 🎨 样式库使用指南
│ └── START_PNPM_GUIDE.md # 🚀 启动脚本指南
│
└── 🔐 版本控制
├── .git/ # 🔐 Git 版本控制
├── .gitignore # 🚫 Git 忽略文件
├── LICENSE # 📜 开源许可证
└── pnpm-lock.yaml # 🔒 依赖锁定文件📋 详细文件清单 📝
🎯 核心配置文件 ⚙️
| 文件名 | 用途说明 | 重要程度 |
|---|---|---|
📦 package.json | 项目依赖和脚本配置 | ⭐⭐⭐⭐⭐ |
⚡ vite.config.ts | Vite 构建工具配置 | ⭐⭐⭐⭐⭐ |
🔧 tsconfig.json | TypeScript 编译配置 | ⭐⭐⭐⭐⭐ |
🎨 windi.config.ts | WindiCSS 样式框架配置 | ⭐⭐⭐⭐ |
📝 .eslintrc.js | ESLint 代码规范配置 | ⭐⭐⭐⭐ |
💄 .prettierrc.js | Prettier 代码格式化配置 | ⭐⭐⭐⭐ |
🌐 .npmrc | NPM 镜像源和缓存配置 | ⭐⭐⭐ |
🚀 .pnpmrc | PNPM 包管理器配置 | ⭐⭐⭐ |
🛠️ 开发脚本工具 🔧
| 脚本文件 | 功能描述 | 平台支持 |
|---|---|---|
🐧 mms.sh | Linux/macOS 综合开发工具菜单 | Linux/macOS |
🪟 mms.ps1 | Windows 综合开发工具菜单 | Windows |
🚀 start-pnpm.sh | Linux/macOS 一键启动脚本 | Linux/macOS |
🚀 start-pnpm.ps1 | Windows 一键启动脚本 | Windows |
🌐 setup-npm-mirrors.sh | NPM 镜像源配置脚本 | 跨平台 |
✅ verify-mirrors.sh | 镜像源验证脚本 | 跨平台 |
🎯 源代码架构 💻
📱 应用核心 (src/)
| 目录/文件 | 功能说明 | 文件数量 |
|---|---|---|
🚀 main.ts | 应用程序主入口文件 | 1个 |
🏠 App.vue | 根组件，应用程序外壳 | 1个 |
🧩 components/ | 可复用的公共组件库 | 19个组件 |
📐 layout/ | 页面布局组件系统 | 11个文件 |
📄 views/ | 页面级组件 | 4个页面 |
🛣️ router/ | Vue Router 路由配置 | 4个文件 |
🗄️ stores/ | Pinia 状态管理 | 8个store |
🎨 样式与主题系统
| 目录/文件 | 功能说明 | 特色 |
|---|---|---|
🎨 styles/ | 样式文件集合 | 5个文件 |
🎯 styles/mms.scss | MMS 工具类样式库 | 200+样式类 |
🎨 theme/ | 主题配置系统 | 12个文件 |
🎨 windi.config.ts | WindiCSS 配置 | 协同工作 |
🔧 工具与类型系统
| 目录 | 功能说明 | 文件数量 |
|---|---|---|
🔧 utils/ | 工具函数库 | 19个工具 |
📊 types/ | TypeScript 类型定义 | 10个文件 |
🎪 enums/ | 枚举常量定义 | 4个枚举 |
🎭 directive/ | Vue 自定义指令 | 3个指令 |
🔗 hooks/ | Composition API 钩子 | 2个钩子 |
🌍 国际化与资源
| 目录 | 功能说明 | 内容 |
|---|---|---|
🌍 i18n/ | 多语言国际化 | 3个语言文件 |
🖼️ icons/ | SVG 图标资源 | 1个图标文件 |
📦 assets/ | 静态资源文件 | 10个资源文件 |
WARNING
登录页面部分元素，支持后台设置替换。
🙋♂️ 常见问题
-💯 🐱 🙋♂️ 💫 📢 🔥
vite build --mode production && vue-tsc --noEmitvue-tsc：Vue 官方提供的命令，用于执行 TS 的类型检查。它在执行时会根据项目中的 tsconfig.json 文件配置进行类型检查.--noEmit：TS 编译器的选项，使用 --noEmit 选项后，编译器仅执行类型检查，而不会生成任何实际的编译输出在打包的时候编译器执行了TS类型检查，所以才报了一堆错，类型错误最终不会影响项目的正常运行。- 设置还原 npm 的 registry 为官方源
npm config set registry https://registry.npmjs.org - 其他命令请看 package.json scripts
- 如何安装一个包
yarn add 包名 - 如何卸载一个包
yarn remove 包名 - 如何更新一个包
yarn upgrade 包名