67 lines
2.7 KiB
Markdown
67 lines
2.7 KiB
Markdown
# 9.2 目录结构详解
|
||
|
||
:::tip 概述
|
||
本页给出 `ui/src` 各目录的职责与放置规则。核心原则：**按业务域分组、按层次隔离**——页面不直连 axios，组件不耦合业务。
|
||
:::
|
||
|
||
## 一级目录职责
|
||
|
||
| 目录 | 职责 | 放置规则 |
|
||
|---|---|---|
|
||
| api/ | 接口函数 | 按业务域分子目录（system/content/data/monitor/tool...），一模块一文件 |
|
||
| views/ | 页面 | 按业务域分目录，与 api/ 域名对应 |
|
||
| components/ | 公共组件 | 任何页面可复用的才进这里 |
|
||
| store/ | Pinia | 全局状态（用户、路由、标签页、设置）；页面局部状态不进 store |
|
||
| router/ | 路由 | constant 静态 + generator-routers 动态 + guards 守卫 |
|
||
| directives/ | 指令 | perm / perms / scrollBar / clickOutside |
|
||
| hooks/ | 组合式函数 | core/event/setting/web 分组 |
|
||
| enums/ | 枚举 | http/role/permissions/cache/page/breakpoint/avatar |
|
||
| utils/ | 工具 | http 封装、auth、validate、日期、下载、颜色、DOM... |
|
||
| layout/ | 布局 | 侧边栏、顶栏、标签页、面包屑组件 |
|
||
| styles/ | 样式 | 全局样式、主题变量、过渡动画 |
|
||
| settings/ | 设置 | 应用级默认配置 |
|
||
| plugins/ | 插件 | element、指令、echarts 等全局注册 |
|
||
| assets/ | 静态资源 | 图片、svg |
|
||
|
||
## views 域划分
|
||
|
||
```text
|
||
views/
|
||
├── dashboard/ 控制台
|
||
├── system/ 系统管理（user/role/menu/dept/level/position/tenant/logger）
|
||
├── content/ 内容管理（article/category/link）
|
||
├── data/ 数据管理（dict/config/param/notice/city）
|
||
├── monitor/ 监控（job/online/server/cache）
|
||
├── file/ 文件（fileTemplate）
|
||
├── tool/ 工具（example/generator）
|
||
├── setting/ 设置（configWeb/profile）
|
||
├── login/ 登录（四种表单）
|
||
├── exception/ 异常页
|
||
└── iframe/ redirect/ about/
|
||
```
|
||
|
||
## api 域划分
|
||
|
||
```text
|
||
api/
|
||
├── system/ user/role/menu/dept/level/position/tenant/dictionary/operLog/loginLog
|
||
├── content/ article/category/link
|
||
├── data/ dict/config/param/notice/city
|
||
├── monitor/ job/onlineUser/serverMonitor/cacheMonitor/dataSource
|
||
├── tool/ example/generator
|
||
├── file/ fileTemplate
|
||
├── setting/ profile/web
|
||
├── dashboard/ console/message
|
||
├── common/ index/menu/user/city
|
||
└── region/ region
|
||
```
|
||
|
||
## 页面内私有组件
|
||
|
||
页面专属的子组件放 `views/{域}/{模块}/components/`，不进全局 components——防止公共组件被单业务污染。
|
||
|
||
## 相关
|
||
|
||
- [4.5 前端分层架构](/zh/architecture/frontend-layer.html)
|
||
- [9.14 API 模块编写规范](/zh/frontend/api-module.html)
|