主题
命名规范
方法注释说明
js
/*
方法说明(没有参数的注释) 有参数使用文档注释
*/
completeImport(){
if(isLoading){
/* 逻辑判断说明 */
}
}代码风格
json
{
"tabWidth": 2,
// 每个缩进级别使用 2 个空格
"useTabs": false,
// 使用空格进行缩进，而不是制表符
"singleQuote": false,
// 使用双引号包裹字符串
"semi": false,
// 在语句末尾添加分号
"trailingComma": "none",
// 不添加尾随逗号
"bracketSpacing": true,
// 在对象文字中的括号之间添加空格
"arrowParens": "avoid",
// 对于单个参数的箭头函数，省略括号
"printWidth": 120,
// 每行最大长度为 120 个字符
"endOfLine": "lf"
// 使用 LF（换行）作为行结束符
}提交类型
| type | 说明 | 示例 |
|---|---|---|
| feat | 新增模块 / 新功能 | feat: 新增用户管理模块 |
| fix | 修复 bug | fix: 修复登录页面验证码逻辑错误 |
| update | 更新模块 / 调整功能逻辑 | update: 更新订单列表筛选逻辑 |
| docs | 文档或注释变更 | docs: 补充接口文档及关键注释 |
| perf | 优化模块 / 性能或体验优化 | perf: 优化商品详情渲染性能 |
页面说明
html
<!--
@Name:
@Description:
@date:
-->
<template>
<div></div>
</template>页面与文件命名
使用
kebab-case（中划线），保持路径一致性 & 多平台兼容（尤其 UNIX 文件系统）
text
pages/
user-profile.vue
settings-page.vue组件命名
使用
PascalCase（每个单词首字母大写）
js
import UserProfile from '@/components/UserProfile.vue';变量命名
使用
camelCase，有语义、可读性强
- 布尔值变量使用
is、has、can
js
const isLoading = false;
const hasPermission = true;- 常量使用大写接下划线
UPPER_SNAKE_CASE - 列表使用
listXxx、对象使用objXxx、选择器使用pickerXxx、搜索框使用searchXxx
方法命名
使用
camelCase
- 请求命名:
fetchXxx、xxxApi - 逻辑处理:
handleXxx - 改变状态:
changeXxx - 点击状态:
clickXxx - Emit使用:
onXxx
常用术语表
| 单词 | 含义 |
|---|---|
| home | 首页 |
| login | 登录 |
| logout | 登出 |
| register | 注册 |
| profile | 个人资料 |
| settings | 设置 |
| dashboard | 仪表盘 |
| detail | 详情 |
| list | 列表 |
| form | 表单 |
| search | 搜索 |
| about | 关于 |
| contact | 联系我们 |
| terms | 服务条款 |
| privacy | 隐私政策 |
| help | 帮助 |
| error | 错误页 |
| not-found | 404 页面 |
| is | 是否（状态前缀） |
| has | 是否拥有 |
| can | 能否（权限） |
| should | 是否应该 |
| enabled | 启用 |
| disabled | 禁用 |
| active | 激活的 |
| inactive | 未激活的 |
| loading | 加载中 |
| pending | 待处理 |
| success | 成功 |
| failed | 失败 |
| header | 头部 |
| footer | 底部 |
| sidebar | 侧边栏 |
| navbar | 导航栏 |
| menu | 菜单 |
| dropdown | 下拉菜单 |
| button | 按钮 |
| input | 输入框 |
| select | 选择框 |
| checkbox | 复选框 |
| radio | 单选框 |
| modal | 弹窗 |
| dialog | 对话框 |
| tooltip | 提示框 |
| table | 表格 |
| card | 卡片 |
| tag | 标签 |
| badge | 徽章 |
| pagination | 分页 |
| breadcrumb | 面包屑导航 |
| get | 获取 |
| set | 设置 |
| fetch | 拉取（常用于 API） |
| load | 加载 |
| update | 更新 |
| delete | 删除 |
| remove | 移除 |
| create | 创建 |
| add | 添加 |
| handle | 处理 |
| render | 渲染 |
| submit | 提交 |
| validate | 校验 |
| reset | 重置 |
| init | 初始化 |
| open | 打开 |
| close | 关闭 |
| toggle | 切换 |
| data | 数据 |
| item | 项目（单个） |
| value | 值 |
| key | 键 |
| id | 唯一标识 |
| name | 名称 |
| type | 类型 |
| status | 状态 |
| role | 角色 |
| user | 用户 |
| admin | 管理员 |
| config | 配置 |
| option | 选项 |
| params | 参数 |
| query | 查询参数 |
| result | 结果 |
| message | 消息 / 提示 |
| error | 错误信息 |
| log | 日志 |
| common | 通用 |
| utils | 工具 |
| helper | 帮助类 |
| constants | 常量 |
| hooks | 钩子 |
| theme | 主题 |
| style | 样式 |
| assets | 资源文件 |
| vendor | 第三方库 |
| core | 核心 |
| feature | 功能 |
| module | 模块 |
| plugin | 插件 |
| service | 服务层 |
| api | 接口 |
| mock | 模拟数据 |
| test | 测试 |
| build | 构建 |
| deploy | 部署 |
| env | 环境 |
| auth | 授权 |
| token | 令牌 |
| session | 会话 |
| cache | 缓存 |
| storage | 存储 |
| redirect | 跳转 |