|
@@ -1,78 +1,224 @@
|
|
|
-# cool-admin [vue3 - ts - vite]
|
|
|
+# Cool Admin Vue
|
|
|
|
|
|
-<p align="center">
|
|
|
- <a href="https://show.cool-admin.com/" target="blank"><img src="https://admin.cool-js.com/logo.png" width="200" alt="cool-admin Logo" /></a>
|
|
|
-</p>
|
|
|
+一个基于 Vue 3 + TypeScript + Element Plus 的现代化后台管理系统框架。
|
|
|
|
|
|
-<p align="center">cool-admin 一个很酷的后台权限管理系统,开源免费,模块化、插件化、极速开发 CRUD,方便快速构建迭代后台管理系统, 到<a href="https://cool-js.com" target="_blank">文档</a> 进一步了解</p>
|
|
|
+## 🚀 技术栈
|
|
|
|
|
|
-<p align="center">
|
|
|
- <a href="https://github.com/cool-team-official/cool-admin-vue/blob/master/LICENSE" target="_blank"><img src="https://img.shields.io/badge/license-MIT-green?style=flat-square" alt="GitHub license" />
|
|
|
- <a href=""><img src="https://img.shields.io/github/package-json/v/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
|
|
|
- <img src="https://img.shields.io/github/last-commit/cool-team-official/cool-admin-vue?style=flat-square" alt="GitHub tag"></a>
|
|
|
-</p>
|
|
|
+- **前端框架**: 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
|
|
|
|
|
|
-## 特性
|
|
|
+## 📁 项目结构
|
|
|
|
|
|
-Ai时代,很多老旧的框架已经无法满足现代化的开发需求,Cool-Admin开发了一系列的功能,让开发变得更简单、更快速、更高效。
|
|
|
+```
|
|
|
+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 # 项目说明
|
|
|
+```
|
|
|
|
|
|
-- **Ai编码**:通过微调大模型学习框架特有写法,实现简单功能从Api接口到前端页面的一键生成
|
|
|
-- **流程编排**:通过拖拽编排方式,即可实现类似像智能客服这样的功能
|
|
|
-- **模块化**:代码是模块化的,清晰明了,方便维护
|
|
|
-- **插件化**:插件化的设计,可以通过安装插件的方式扩展如:支付、短信、邮件等功能
|
|
|
+## 🛠️ 安装和使用
|
|
|
|
|
|
-
|
|
|
+### 环境要求
|
|
|
|
|
|
-## 地址
|
|
|
+- Node.js >= 18.0.0
|
|
|
+- npm >= 8.0.0 或 yarn >= 1.22.0
|
|
|
|
|
|
-- [📌 v7 版本](https://github.com/cool-team-official/cool-admin-vue/tree/7.x)
|
|
|
+### 安装依赖
|
|
|
|
|
|
-- [🌐 码云仓库](https://gitee.com/cool-team-official/cool-admin-vue)
|
|
|
+```bash
|
|
|
+npm install
|
|
|
+# 或
|
|
|
+yarn install
|
|
|
+```
|
|
|
|
|
|
-## 视频教程
|
|
|
+### 开发环境
|
|
|
+
|
|
|
+```bash
|
|
|
+npm run dev
|
|
|
+# 或
|
|
|
+yarn dev
|
|
|
+```
|
|
|
|
|
|
-[官方 B 站视频教程](https://www.bilibili.com/video/BV1j1421R7aB)
|
|
|
+### 构建生产版本
|
|
|
|
|
|
-## 演示
|
|
|
+```bash
|
|
|
+npm run build
|
|
|
+# 或
|
|
|
+yarn build
|
|
|
+```
|
|
|
|
|
|
-[https://show.cool-admin.com](https://show.cool-admin.com)
|
|
|
+### 构建静态版本
|
|
|
|
|
|
-账户:admin,密码:123456
|
|
|
+```bash
|
|
|
+npm run build-static
|
|
|
+# 或
|
|
|
+yarn build-static
|
|
|
+```
|
|
|
|
|
|
-<img src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/home-mini.png" alt="Admin Home" ></a>
|
|
|
+### 代码检查
|
|
|
|
|
|
-## 项目后端
|
|
|
+```bash
|
|
|
+npm run lint
|
|
|
+# 或
|
|
|
+yarn lint
|
|
|
+```
|
|
|
|
|
|
-[https://github.com/cool-team-official/cool-admin-midway](https://github.com/cool-team-official/cool-admin-midway)
|
|
|
+### 类型检查
|
|
|
|
|
|
-或
|
|
|
+```bash
|
|
|
+npm run type-check
|
|
|
+# 或
|
|
|
+yarn type-check
|
|
|
+```
|
|
|
|
|
|
-[https://gitee.com/cool-team-official/cool-admin-midway](https://gitee.com/cool-team-official/cool-admin-midway)
|
|
|
+## 📝 开发规范
|
|
|
|
|
|
-或
|
|
|
+### 文件命名
|
|
|
|
|
|
-[https://gitcode.com/cool_team/cool-admin-midway](https://gitcode.com/cool_team/cool-admin-midway)
|
|
|
+- 文件和组件命名使用 `-` 连接,如:`student-info.vue`
|
|
|
+- 目录命名使用小写字母和 `-` 连接
|
|
|
|
|
|
-## 微信群
|
|
|
+### 导入别名
|
|
|
|
|
|
-<img width="260" src="https://cool-show.oss-cn-shanghai.aliyuncs.com/admin/wechat.jpeg" alt="Admin Wechat"></a>
|
|
|
+- `"/@"` 对应 `"./src"`
|
|
|
+- `"/$"` 对应 `"./src/modules"`
|
|
|
+- `"/#"` 对应 `"./src/plugins"`
|
|
|
+- `"/~"` 对应 `"./packages"`
|
|
|
|
|
|
-## 安装项目依赖
|
|
|
+### 模块开发
|
|
|
|
|
|
-推荐使用 `pnpm`:
|
|
|
+每个模块应包含以下目录结构:
|
|
|
|
|
|
-```shell
|
|
|
-pnpm i
|
|
|
+```
|
|
|
+modules/模块名/
|
|
|
+├── components/ # 全局组件
|
|
|
+├── directives/ # 全局指令
|
|
|
+├── locales/ # 国际化
|
|
|
+├── router/ # 路由
|
|
|
+├── store/ # 状态管理
|
|
|
+├── utils/ # 工具函数
|
|
|
+├── views/ # 视图
|
|
|
+├── config.ts # 模块配置(必须)
|
|
|
+└── index.ts # 模块导出
|
|
|
```
|
|
|
|
|
|
-## 运行应用程序
|
|
|
+## 🔧 配置说明
|
|
|
|
|
|
-安装过程完成后,运行以下命令启动服务。您可以在浏览器中预览网站 [http://localhost:9000](http://localhost:9000)
|
|
|
+### 环境配置
|
|
|
|
|
|
-```shell
|
|
|
-pnpm dev
|
|
|
-```
|
|
|
+- `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 官方文档](https://vuejs.org/)
|
|
|
+- [Element Plus 文档](https://element-plus.org/)
|
|
|
+- [Vite 文档](https://vitejs.dev/)
|
|
|
+- [TypeScript 文档](https://www.typescriptlang.org/)
|
|
|
+- [Tailwind CSS 文档](https://tailwindcss.com/)
|
|
|
+
|
|
|
+## 🤝 贡献指南
|
|
|
+
|
|
|
+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](LICENSE) 文件了解详情。
|
|
|
|
|
|
-### 低价服务器
|
|
|
+## 🙏 致谢
|
|
|
|
|
|
-[阿里云、腾讯云、华为云低价云服务器,不限新老](https://cool-js.com/service/cloud)
|
|
|
+感谢所有为这个项目做出贡献的开发者们!
|