61 lines
3.2 KiB
Markdown
61 lines
3.2 KiB
Markdown
# 9.2 目录结构详解
|
|
|
|
:::tip 概述
|
|
本节详细介绍前端项目的目录结构，帮助开发者快速定位代码和理解项目组织方式。
|
|
:::
|
|
|
|
```text
|
|
ui/src/
|
|
├── api/ # API 接口层（按业务域分组）
|
|
│ ├── common/ # 公共接口（登录/菜单/用户信息/城市）
|
|
│ ├── system/ # 系统管理（用户/角色/菜单/部门/岗位/职级/日志/租户）
|
|
│ ├── content/ # 内容管理（文章/分类/链接）
|
|
│ ├── data/ # 数据管理（城市/配置/字典/公告/参数）
|
|
│ ├── dashboard/ # 仪表盘（控制台/消息）
|
|
│ ├── file/ # 文件管理（文件模板）
|
|
│ ├── monitor/ # 监控管理（定时任务）
|
|
│ ├── region/ # 行政区划
|
|
│ ├── setting/ # 设置（个人资料/网站配置）
|
|
│ └── tool/ # 工具（示例/代码生成器）
|
|
├── components/ # 公共组件库（20+ 个）
|
|
│ ├── Table/ # 数据表格
|
|
│ ├── Form/ # 动态表单
|
|
│ ├── Modal/ # 弹窗
|
|
│ ├── Upload/ # 文件上传
|
|
│ ├── Editor/ # 富文本编辑器
|
|
│ ├── Excel/ # Excel 导入导出
|
|
│ ├── Cropper/ # 头像裁剪
|
|
│ ├── Region/ # 行政区划
|
|
│ ├── Password/ # 密码强度
|
|
│ ├── Qrcode/ # 二维码
|
|
│ └── ...
|
|
├── directives/ # 自定义指令
|
|
│ └── permission.ts # v-perm / v-perms 权限指令
|
|
├── enums/ # 枚举常量
|
|
│ ├── httpEnum.ts # HTTP 枚举
|
|
│ └── pageEnum.ts # 页面枚举
|
|
├── hooks/ # 组合式函数
|
|
├── layout/ # 布局组件
|
|
├── router/ # 路由配置
|
|
│ ├── index.ts # 路由实例
|
|
│ ├── base.ts # 静态路由
|
|
│ ├── generator-routers.ts # 动态路由生成
|
|
│ └── router-guards.ts # 路由守卫
|
|
├── store/ # Pinia 状态管理
|
|
│ └── modules/
|
|
│ ├── user.ts # 用户 Store
|
|
│ ├── asyncRoute.ts # 动态路由 Store
|
|
│ └── ...
|
|
├── styles/ # 全局样式
|
|
├── utils/ # 工具函数
|
|
│ └── http/ # HTTP 请求封装
|
|
└── views/ # 页面视图
|
|
├── login/ # 登录页
|
|
├── dashboard/ # 仪表盘
|
|
├── system/ # 系统管理页面
|
|
├── content/ # 内容管理页面
|
|
├── data/ # 数据管理页面
|
|
├── monitor/ # 监控管理页面
|
|
├── tool/ # 工具页面
|
|
└── exception/ # 异常页面
|
|
``` |