12.9 前端编码规范

建议遵守

前端通用风格约定：分层隔离、命名一致、组件复用、类型渐进。配合 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

相关