Skip to content

命名规范

命名是软件工程中最难的两件事之一。本规范列出全项目命名约定。

一、文件 / 目录

类型规则示例
目录kebab-casesystem/dict/
Vue 组件文件PascalCaseDictTree.vueUserForm.vue
页面入口List.vue / Detail.vue / Index.vue(无明确主体时)-
TS 模块camelCaseuseDictTree.ts
类型定义types.ts-
文档UPPER-KEBAB-CASE + 序号04-NAMING.md

二、变量 / 函数

类型规则示例
普通变量camelCaseuserNameisLoading
常量UPPER_SNAKE_CASEMAX_RETRYHTTP_STATUS
Booleanis/has/can/should 前缀isLoginhasPermission
函数camelCase + 动词开头fetchUserhandleSubmit
事件处理handle<Event>handleClickhandleSubmit

三、类型 / 接口

类型规则示例
InterfacePascalCase,不加 I 前缀UserDictItem
Type aliasPascalCaseUserRole
联合类型字符串字面量(不用 enum)'active' | 'inactive'

四、组件

类型规则示例
组件名PascalCase + 业务前缀DictTreeSearchTable
PropscamelCase:user-name="..."
Emitskebab-case@update:value@submit
插槽kebab-case#header#action-footer

五、Store / Composable

类型规则示例
Storeuse<Domain>StoreuseUserStore
Composableuse<Feature>useRequest
Store id与 domain 同名'user''tagsView'

六、API

操作命名URL
查询单个fetch<Domain>/api/user/:id
查询列表fetch<Domain>List/api/user/list
创建create<Domain>/api/user/create
更新update<Domain>/api/user/update/:id
删除单个delete<Domain>/api/user/delete/:id
批量删除batchDelete<Domain>s/api/user/batch-delete
选项(下拉)fetch<Domain>Options/api/user/options

禁止 getUser / delUser / removeUser 等模糊命名。

七、路由

类型规则示例
pathkebab-case,全小写/system/dict/list
namecamelCasedictList
meta.title中文短语'字典列表'

八、CSS 类

类型规则示例
全局类kebab-case.tags-view-container
scoped 类kebab-case.search-card
BEM 修饰--modifier.btn--primary
BEM 元素__element.card__header

颜色、间距、字号 必须 用 Element Plus CSS 变量(var(--el-color-primary)),禁止硬编码。

九、禁止

  • 拼音命名(yonghuzidian
  • 缩写到不识别(usrdttmp1
  • 1-2 字母变量(循环索引 ij 除外)
  • 类型后缀(userArrayuserObject)—— 用 TypeScript 表达类型
  • "魔术数字"直接出现(用 const 命名)

十、基础设施命名

类型命名备注
HTTP 客户端导出httpapilib/http/client.ts 导出;禁止 service / request
HTTP 错误类HttpErrorlib/error/types.ts
错误响应类型ProblemDetailRFC 7807
错误捕获组件ErrorBoundarylib/error/ErrorBoundary.vue
监控接口Monitorlib/error/types.ts;控制台默认实现 defaultMonitorlib/error/monitor.ts
认证服务单例authServicelib/auth/authService.ts(工厂创建)
认证提供方接口AuthProviderlib/auth/AuthProvider.ts
JWT 实现类JwtAuthProviderlib/auth/JwtAuthProvider.ts
Token 存储接口TokenStoragelib/auth/TokenStorage.ts
内存默认实现MemorySessionTokenStoragelib/auth/TokenStorage.ts
Token 读取接口TokenReaderlib/http/token.ts
动态路由装载registerDynamicRouteslib/router/dynamic.ts
路由守卫安装installGuardslib/router/guards.ts
权限指令vPermissionapp/directives/permission.ts;模板中用 v-permission
全局用户 storeuseUserStoreapp/stores/user.ts
全局权限 storeusePermissionStoreapp/stores/permission.ts

基于 MIT 协议发布