# hyper-admin **Repository Path**: yncykj/hyper-admin ## Basic Information - **Project Name**: hyper-admin - **Description**: midwayjs-admin所用的Geeker-admin圆化版本 - **Primary Language**: Unknown - **License**: MIT - **Default Branch**: main - **Homepage**: None - **GVP Project**: No ## Statistics - **Stars**: 0 - **Forks**: 0 - **Created**: 2024-12-12 - **Last Updated**: 2026-03-05 ## Categories & Tags **Categories**: Uncategorized **Tags**: None ## README # Hyper Admin ## 项目介绍 Hyper Admin是一个基于Vue 3的后台管理系统，采用TypeScript开发，使用Vite作为构建工具。项目结构清晰，模块化程度高，包含多个功能组件和工具。 - **基于Vue 3 + TypeScript**：使用最新的Vue 3组合式API和TypeScript类型系统 - **Element Plus**：集成Element Plus UI组件库 - **Pinia**：使用Pinia进行状态管理 - **Vue Router**：实现路由管理 - **ECharts**：集成ECharts图表库 - **国际化支持**：内置多语言支持 - **主题定制**：支持深色模式和主题配置 ## 目录结构 项目采用模块化的目录结构，清晰组织代码。以下是主要目录和文件的详细说明： ### 根目录 | 目录/文件 | 描述 | | ------------------------ | -------------------------------------------------- | | `.husky/` | Git hooks配置，用于在提交代码时执行特定的脚本 | | `.vscode/` | VS Code配置文件，包含扩展推荐和编辑器设置 | | `build/` | 构建配置文件，包括环境变量处理、代理配置和插件配置 | | `dist/` | 构建产物目录，包含编译后的静态文件 | | `public/` | 静态资源目录，包含不需要编译的静态文件 | | `src/` | 源代码目录，包含项目的主要代码 | | `.editorconfig` | 编辑器配置文件，统一不同编辑器的代码格式 | | `.env` | 基础环境变量配置 | | `.env.development` | 开发环境变量配置 | | `.env.production` | 生产环境变量配置 | | `.env.test` | 测试环境变量配置 | | `.eslintignore` | ESLint忽略文件配置 | | `.eslintrc.cjs` | ESLint配置文件，定义代码质量规则 | | `.gitignore` | Git忽略文件配置 | | `.prettierignore` | Prettier忽略文件配置 | | `.prettierrc.cjs` | Prettier配置文件，定义代码格式化规则 | | `.stylelintignore` | Stylelint忽略文件配置 | | `.stylelintrc.cjs` | Stylelint配置文件，定义CSS/SCSS质量规则 | | `LICENSE` | 项目许可证文件 | | `commitlint.config.cjs` | Commitlint配置文件，定义Git提交信息规则 | | `index.html` | HTML模板文件 | | `lint-staged.config.cjs` | Lint-staged配置文件，定义Git暂存文件的检查规则 | | `package.json` | 项目配置和依赖管理文件 | | `postcss.config.cjs` | PostCSS配置文件，处理CSS兼容性 | | `tsconfig.json` | TypeScript配置文件 | | `vite.config.ts` | Vite构建工具配置文件 | ### src目录 | 目录/文件 | 描述 | | ----------------- | ------------------------------------------ | | `api/` | API请求相关代码，包含接口定义和请求方法 | | `assets/` | 资源文件，包括字体、图标、图片、JSON数据等 | | `components/` | 通用组件，可在多个页面复用 | | `configurations/` | 项目配置文件，如进度条配置等 | | `constants/` | 常量定义，如字典数据、SVG图标等 | | `directives/` | 自定义指令，如权限控制、复制、防抖等 | | `enums/` | 枚举类型定义，如HTTP状态码等 | | `hooks/` | 自定义钩子，封装常用的逻辑 | | `languages/` | 国际化语言包，支持多语言切换 | | `layouts/` | 布局组件，定义应用的整体布局结构 | | `routers/` | 路由配置，包括静态路由和动态路由 | | `stores/` | 状态管理，使用Pinia进行状态管理 | | `styles/` | 样式文件，包括全局样式、主题样式等 | | `typings/` | TypeScript类型定义文件 | | `utils/` | 工具函数，如数组处理、日期处理、存储操作等 | | `views/` | 页面组件，包含应用的各个页面 | | `App.vue` | 根组件，应用的入口组件 | | `main.ts` | 入口文件，初始化应用 | | `vite-env.d.ts` | Vite类型声明文件 | ### 主要子目录说明 #### api/ - `interface/`：API接口类型定义 - `libs/`：API请求库配置，包含axios封装、请求拦截等 - `modules/`：按模块划分的API请求方法 #### assets/ - `fonts/`：字体文件 - `iconfont/`：图标字体 - `icons/`：SVG图标 - `images/`：图片资源 - `json/`：JSON数据文件 - `mock/`：模拟数据 #### components/ - `ECharts/`：ECharts图表组件 - `ErrorMessage/`：错误页面组件 - `ProTable/`：高级表格组件 - `SearchForm/`：搜索表单组件 - `Upload/`：上传组件 #### layouts/ - `LayoutClassic/`：经典布局 - `LayoutColumns/`：分栏布局 - `LayoutTransverse/`：横向布局 - `LayoutVertical/`：垂直布局 - `components/`：布局相关组件，如头部、侧边栏、标签页等 #### routers/ - `modules/`：路由模块，包括静态路由和动态路由 #### stores/ - `modules/`：状态管理模块，如用户状态、权限状态等 #### views/ - `about/`：关于页面 - `assembly/`：组件展示页面 - `auth/`：权限管理页面 - `dashboard/`：仪表盘页面 - `dataScreen/`：数据大屏页面 - `directives/`：指令展示页面 - `echarts/`：图表展示页面 - `form/`：表单页面 - `home/`：首页 - `link/`：链接页面 - `login/`：登录页面 - `menu/`：菜单示例页面 - `proTable/`：高级表格示例页面 - `system/`：系统管理页面 ## 安装配置 ### 环境要求 - Node.js >= 16.18.0 - npm 或 pnpm ### 安装依赖 ```bash # 使用 npm npm install # 使用 pnpm pnpm install ``` ### 环境配置 项目使用 `.env`文件管理环境变量，根据不同环境创建对应的配置文件： - `.env.development`：开发环境配置 - `.env.production`：生产环境配置 - `.env.test`：测试环境配置 主要配置项： - `VITE_PORT`：开发服务器端口 - `VITE_OPEN`：是否自动打开浏览器 - `VITE_PUBLIC_PATH`：公共路径 - `VITE_PROXY`：代理配置 - `VITE_DROP_CONSOLE`：是否去除控制台输出 ## 开发流程 ### 启动开发服务器 ```bash # 使用 npm npm run dev # 使用 pnpm pnpm dev ``` 开发服务器启动后，可通过 `http://localhost:8888` 访问项目。 ### 代码规范 项目使用ESLint、Prettier和Stylelint进行代码规范检查： ```bash # 检查并修复ESLint问题 npm run lint:eslint # 格式化代码 npm run lint:prettier # 检查并修复Stylelint问题 npm run lint:stylelint ``` ### 类型检查 ```bash npm run type:check ``` ## 构建部署 ### 构建项目 ```bash # 构建开发环境 npm run build:dev # 构建测试环境 npm run build:test # 构建生产环境 npm run build:pro ``` 构建产物将生成在 `dist` 目录中。 ### 预览构建结果 ```bash npm run preview ``` ### 部署方式 1. 将构建产物 `dist` 目录部署到静态文件服务器 2. 配置服务器的根目录为 `dist` 目录 3. 确保服务器支持SPA应用的路由配置（需要将所有请求重定向到 `index.html`） ## 代码规范和最佳实践 ### 代码规范 - **ESLint**：使用TypeScript ESLint规则 - **Prettier**：统一代码格式化 - **Stylelint**：CSS/SCSS规范检查 - **Commitlint**：Git提交信息规范 ### 开发最佳实践 - 使用组合式API编写组件 - 合理使用TypeScript类型定义 - 组件化开发，提高代码复用性 - 使用Pinia进行状态管理 - 遵循RESTful API设计规范 - 合理使用Vue Router进行路由管理 - 注意代码性能优化 ## 常见问题和解决方案 ### 依赖安装失败 **问题**：安装依赖时出现网络错误或版本冲突 **解决方案**： - 检查网络连接 - 尝试使用pnpm替代npm - 清除npm缓存：`npm cache clean --force` - 查看package.json中的依赖版本是否兼容 ### 开发服务器启动失败 **问题**：开发服务器启动时出现端口被占用或其他错误 **解决方案**： - 检查端口是否被占用，修改 `.env.development`中的 `VITE_PORT`配置 - 检查环境变量配置是否正确 - 检查依赖是否安装完整 ### 构建失败 **问题**：构建时出现TypeScript错误或其他构建错误 **解决方案**： - 运行 `npm run type:check`检查TypeScript类型错误 - 检查代码中是否有语法错误 - 检查构建配置是否正确 ### 部署后页面空白 **问题**：部署后访问页面出现空白，控制台有404错误 **解决方案**： - 检查 `VITE_PUBLIC_PATH`配置是否正确 - 确保服务器配置了SPA路由重定向 - 检查构建产物是否完整上传 ## 许可证 MIT License ## 贡献 欢迎提交Issue和Pull Request！ ## 联系方式 - 作者：Hyper - 邮箱：2564217790@qq.com - 仓库：[https://gitee.com/yncykj/hyper-admin](https://gitee.com/yncykj/hyper-admin)