65 lines
1.8 KiB
Markdown
65 lines
1.8 KiB
Markdown
# 12.9 前端编码规范
|
||
|
||
:::tip 建议遵守
|
||
前端通用风格约定：分层隔离、命名一致、组件复用、类型渐进。配合 `pnpm type:check` 与 `pnpm lint:eslint` 门禁。
|
||
:::
|
||
|
||
## 分层纪律
|
||
|
||
| 层 | 禁止 |
|
||
|---|---|
|
||
| views 页面 | 直接 axios、写信封判断、放公共组件 |
|
||
| api 模块 | UI 逻辑、持 Token、catch 兜底（拦截器已做） |
|
||
| components 公共组件 | 耦合具体业务模块 |
|
||
| store | 存可从接口推导的数据 |
|
||
| utils | import api/views/store（环依赖） |
|
||
|
||
## 命名
|
||
|
||
| 对象 | 规约 | 示例 |
|
||
|---|---|---|
|
||
| api 文件 | 域/模块.ts | system/user.ts |
|
||
| api 函数 | 模块+动作 | userPage、userAdd |
|
||
| 页面目录 | 域/模块/ | views/system/user/ |
|
||
| 组件 | PascalCase | UserTable.vue |
|
||
| hooks | use-*.ts | use-async.ts |
|
||
| store | camelCase 模块 | asyncRoute.ts |
|
||
| 权限码 | 与后端逐字一致 | sys:user:add |
|
||
|
||
## 组件实践
|
||
|
||
- 公共组件优先（Table/Page/Form/Select/Upload...），不重复造
|
||
- 页面私有组件放 views 下 components/
|
||
- props 显式声明 + 类型（vue-types/propTypes）
|
||
- 事件命名 `update:xxx` / `change`，不滥用全局事件总线
|
||
|
||
## 状态与数据
|
||
|
||
- 本地状态 ref/reactive；跨页面才进 Pinia
|
||
- storage 键走 mutation-types 常量，不散裸字符串
|
||
- 字典数据走字典接口，不硬编码 options
|
||
|
||
## 样式
|
||
|
||
- 颜色/间距用变量，不硬编码色值
|
||
- 组件样式 scoped；全局样式进 styles/ 统一管理
|
||
- 避免 `!important`；层级用变量
|
||
|
||
## 类型
|
||
|
||
- 渐进式补类型：api 泛型 → props → 页面
|
||
- 枚举用 as const + 类型导出
|
||
- 临时 any 需注释原因，不扩散
|
||
|
||
## 提交前
|
||
|
||
```bash
|
||
pnpm type:check
|
||
pnpm lint:eslint
|
||
```
|
||
|
||
## 相关
|
||
|
||
- [9.14 API 模块编写规范](/zh/frontend/api-module.html)
|
||
- [12.7 代码审查清单](/zh/standards/code-review.html)
|