moshiji_admin

Cool Admin Vue

一个基于 Vue 3 + TypeScript + Element Plus 的现代化后台管理系统框架。

🚀 技术栈

• 前端框架: Vue 3.5.13
• 开发语言: TypeScript 5.5.4
• UI 组件库: Element Plus 2.9.3
• 状态管理: Pinia 2.3.1
• 路由管理: Vue Router 4.5.0
• 构建工具: Vite 5.4.14
• 样式框架: Tailwind CSS 3.4.17
• 国际化: Vue I18n 11.0.1
• 图表库: ECharts 5.6.0
• 富文本编辑器: WangEditor 5.1.23

📁 项目结构

moshiji_admin/
├── .vscode/                    # VSCode 配置和代码片段
├── public/                     # 静态资源文件
│   ├── favicon.ico
│   ├── logo.png
│   └── 用户导入模版.xlsx
├── packages/                   # 源码包
│   ├── crud/                   # @cool-vue/crud 包
│   │   ├── src/
│   │   │   ├── components/     # CRUD 组件
│   │   │   ├── hooks/          # 组合式函数
│   │   │   ├── locale/         # 国际化文件
│   │   │   ├── utils/          # 工具函数
│   │   │   └── ...
│   │   └── types/              # 类型定义
│   └── vite-plugin/            # @cool-vue/vite-plugin 包
│       ├── src/
│       │   ├── eps/            # EPS 相关功能
│       │   ├── file/           # 文件处理
│       │   ├── plugin/         # 插件功能
│       │   └── ...
│       └── types/              # 类型定义
├── src/                        # 源码目录
│   ├── cool/                   # 核心文件
│   │   ├── bootstrap/          # 启动配置
│   │   ├── hooks/              # 全局钩子
│   │   ├── module/             # 模块管理
│   │   ├── router/             # 路由配置
│   │   ├── service/            # 服务层
│   │   ├── types/              # 类型定义
│   │   └── utils/              # 工具函数
│   ├── modules/                # 项目模块
│   │   ├── base/               # 基础模块
│   │   │   ├── components/     # 全局组件
│   │   │   ├── directives/     # 全局指令
│   │   │   ├── locales/        # 国际化
│   │   │   ├── pages/          # 页面
│   │   │   ├── static/         # 静态资源
│   │   │   ├── store/          # 状态管理
│   │   │   ├── types/          # 类型定义
│   │   │   ├── utils/          # 工具函数
│   │   │   └── views/          # 视图组件
│   │   ├── demo/               # 示例模块
│   │   ├── dict/               # 字典模块
│   │   ├── helper/             # 辅助模块
│   │   ├── recycle/            # 回收站模块
│   │   ├── space/              # 文件空间模块
│   │   ├── task/               # 任务模块
│   │   └── user/               # 用户模块
│   ├── plugins/                # 项目插件
│   │   ├── crud/               # CRUD 插件
│   │   ├── dev-tools/          # 开发工具
│   │   ├── distpicker/         # 省市区选择器
│   │   ├── echarts/            # 图表插件
│   │   ├── editor-preview/     # 编辑器预览
│   │   ├── editor-wang/        # 富文本编辑器
│   │   ├── element-ui/         # Element Plus 组件
│   │   ├── excel/              # Excel 导入导出
│   │   ├── github/             # GitHub 相关
│   │   ├── i18n/               # 国际化插件
│   │   ├── iconfont/           # 图标字体
│   │   ├── tailwind/           # Tailwind CSS
│   │   ├── theme/              # 主题插件
│   │   ├── upload/             # 文件上传
│   │   └── view/               # 视图组件
│   ├── config/                 # 配置文件
│   │   ├── index.ts            # 默认配置
│   │   ├── dev.ts              # 开发环境配置
│   │   └── prod.ts             # 生产环境配置
│   ├── App.vue                 # 根组件
│   └── main.ts                 # 入口文件
├── build/                      # 构建相关
│   └── cool/
│       ├── eps.json            # EPS 配置文件
│       └── eps.d.ts            # EPS 描述文件
├── package.json                # 依赖管理
├── vite.config.ts              # Vite 配置
├── tsconfig.json               # TypeScript 配置
├── tailwind.config.js          # Tailwind 配置
└── README.md                   # 项目说明

🛠️ 安装和使用

环境要求

• Node.js >= 18.0.0
• npm >= 8.0.0 或 yarn >= 1.22.0

安装依赖

npm install
# 或
yarn install

开发环境

npm run dev
# 或
yarn dev

构建生产版本

npm run build
# 或
yarn build

构建静态版本

npm run build-static
# 或
yarn build-static

代码检查

npm run lint
# 或
yarn lint

类型检查

npm run type-check
# 或
yarn type-check

📝 开发规范

文件命名

• 文件和组件命名使用 - 连接，如：student-info.vue
• 目录命名使用小写字母和 - 连接

导入别名

• "/@" 对应 "./src"
• "/$" 对应 "./src/modules"
• "/#" 对应 "./src/plugins"
• "/~" 对应 "./packages"

模块开发

每个模块应包含以下目录结构：

modules/模块名/
├── components/     # 全局组件
├── directives/     # 全局指令
├── locales/        # 国际化
├── router/         # 路由
├── store/          # 状态管理
├── utils/          # 工具函数
├── views/          # 视图
├── config.ts       # 模块配置（必须）
└── index.ts        # 模块导出

🔧 配置说明

环境配置

• src/config/dev.ts - 开发环境配置
• src/config/prod.ts - 生产环境配置
• src/config/index.ts - 默认配置

EPS 配置

• build/cool/eps.json - EPS 配置文件
• build/cool/eps.d.ts - EPS 描述文件

📚 相关文档

• Vue 3 官方文档
• Element Plus 文档
• Vite 文档
• TypeScript 文档
• Tailwind CSS 文档

🤝 贡献指南

1. Fork 本仓库
2. 创建特性分支 (git checkout -b feature/AmazingFeature)
3. 提交更改 (git commit -m 'Add some AmazingFeature')
4. 推送到分支 (git push origin feature/AmazingFeature)
5. 打开 Pull Request

📄 许可证

本项目采用 MIT 许可证 - 查看 LICENSE 文件了解详情。

🙏 致谢

感谢所有为这个项目做出贡献的开发者们！