1.8 KiB
1.8 KiB
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 需注释原因，不扩散
提交前
pnpm type:check
pnpm lint:eslint