# 9.2 目录结构详解

:::tip 概述
本节详细介绍前端项目（独立 EleVue 仓库）的目录结构，帮助开发者快速定位代码和理解项目组织方式。
:::

```text
ui/src/
├── api/                        # API 接口层（按业务域分组）
│   ├── common/                 # 公共接口（登录/菜单/用户信息/城市）
│   ├── system/                 # 系统管理（用户/角色/菜单/部门/岗位/职级/日志/租户）
│   ├── content/                # 内容管理（文章/分类/链接）
│   ├── data/                   # 数据管理（城市/配置/字典/公告/参数）
│   ├── dashboard/              # 仪表盘（控制台/消息）
│   ├── file/                   # 文件管理（文件模板）
│   ├── monitor/                # 监控管理（定时任务）
│   ├── region/                 # 行政区划
│   ├── setting/                # 设置（个人资料/网站配置）
│   └── tool/                   # 工具（示例/代码生成器）
├── components/                 # 公共组件库（20+ 个）
│   ├── Table/                  # 数据表格（BasicTable）
│   ├── Form/                   # 动态表单（BasicForm）
│   ├── Modal/                  # 弹窗
│   ├── Upload/                 # 文件上传（BasicUpload）
│   ├── Editor/                 # 富文本编辑器
│   ├── Excel/                  # Excel 导入导出
│   ├── Cropper/                # 头像裁剪
│   ├── Region/                 # 行政区划
│   ├── Password/               # 密码强度
│   ├── Qrcode/                 # 二维码
│   └── ...
├── directives/                 # 自定义指令
│   └── permission.ts           # v-perm / v-perms 权限指令
├── enums/                      # 枚举常量
│   ├── httpEnum.ts             # HTTP 枚举
│   └── pageEnum.ts             # 页面枚举
├── hooks/                      # 组合式函数
│   ├── core/ event/ setting/ web/
│   └── web/usePermission.ts 等 # 权限、页面、图表等复用逻辑
├── layout/                     # 布局组件（侧边栏/顶栏/内容区）
├── plugins/                    # 插件
├── router/                     # 路由配置
│   ├── index.ts                # 路由实例
│   ├── base.ts                 # 静态路由（登录/404）
│   ├── generator-routers.ts    # 动态路由生成（后端菜单 → 路由）
│   └── router-guards.ts        # 路由守卫（登录校验/菜单加载）
├── settings/                   # 项目配置（标题/主题/布局）
├── store/                      # Pinia 状态管理
│   └── modules/
│       ├── user.ts             # 用户 Store（Token/用户信息/权限）
│       ├── asyncRoute.ts       # 动态路由 Store
│       ├── tabsView.ts         # 标签页 Store
│       ├── projectSetting.ts   # 项目配置 Store
│       ├── designSetting.ts    # 主题设计 Store
│       ├── lockscreen.ts       # 锁屏 Store
│       └── ossConfig.ts        # 云存储配置 Store
├── styles/                     # 全局样式（Tailwind / 主题变量）
├── utils/                      # 工具函数
│   ├── http/axios/              # HTTP 请求封装（拦截器）
│   └── Storage.ts              # 本地存储封装
└── views/                      # 页面视图
    ├── login/                  # 登录页
    ├── dashboard/              # 仪表盘
    ├── system/                 # 系统管理页面
    ├── content/                # 内容管理页面
    ├── data/                   # 数据管理页面
    ├── monitor/                # 监控管理页面
    ├── file/                   # 文件管理页面
    ├── setting/                # 设置页面（个人资料等）
    ├── tool/                   # 工具页面（示例/代码生成器）
    ├── iframe/                 # 内嵌 iframe 页面
    ├── redirect/               # 重定向页面
    └── exception/              # 异常页面（403/404/500）
```

## 分层调用关系

```text
views/（页面）
    │ 调用
    ▼
api/（接口函数）──→ utils/http/axios（拦截器 + Token + 响应解包）──→ 后端 API
    │
    ▼
store/（全局状态：用户、权限、动态路由、标签页）
    │
    ▼
directives/（v-perm 按权限显隐） + hooks/（复用逻辑）
```

## 命名规范

| 类型 | 规范 | 示例 |
|------|------|------|
| API 文件 | 小写业务域名 | `user.ts`、`example.ts` |
| 页面目录 | 小写业务域名 | `views/system/user/` |
| 组件 | 大驼峰 | `BasicTable`、`BasicUpload` |
| Store | 驼峰 + Store 后缀引用 | `useUserStore` |
| Hooks | `use` 前缀 | `usePermission`、`usePage` |
| 枚举 | 大驼峰 | `HttpEnum`、`PageEnum` |

:::tip 页面标准文件
每个业务页面目录由 5 个文件组成（与代码生成器输出一致）：`index.vue`（列表）、`edit.vue`（编辑弹窗）、`detail.vue`（详情）、`columns.ts`（表格列）、`querySchemas.ts`（查询条件）——见 [9.12 新增页面开发步骤](/zh/frontend/new-page.html)。
:::