9.2 目录结构详解

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

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）

分层调用关系

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 新增页面开发步骤。 :::

5.4 KiB Raw Permalink Blame History Unescape Escape

9.2 目录结构详解

分层调用关系

命名规范

5.4 KiB

Raw Permalink Blame History