基本命名准则
- 贴合业务
- 简介、语义化、能够英文释义
- 项目保持一种命名方法,命名方式可以有多种
常用命名方法
- PascalCase 命名法:所有单词的首字母都大写 如 HelloWorld
- camelCase 命名法:驼峰命名 如 helloWorld
- 下划线 命名法:如 hello_world
- kebab-case 命名法:如 hello-world
Vue项目命名
- 项目名 推荐使用 短横线命名
- 自定义指令 推荐单个单词,如果需要多个单词 推荐驼峰命名
- 组件命名 推荐 PascalCase 命名 注意要和项目保持一致
-
- 公共组件应该以 The 前缀命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
-
- 私有组件名应该以父组件名作为前缀
components/
|- TodoList.vue
|- TodoListItem.vue
-
- 模版中组件名
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent/><!-- 在 DOM 模板中 -->
<my-component></my-component>
-
- 组件名应该完整,不应该简写
- 注意 组件名应该多个单词
- Props命名
-
- 定义Props 推荐camelCase
props: {greetingText: String
}
-
- 使用Props 推荐 kebab-case
<WelcomeMessage greeting-text="hi"/>
- Store
-
- module 推荐使用 camelCase
- mutation 推荐使用 PascalCase
- state 推荐使用 camelCase
- getters 推荐使用 camelCase
- 常量 推荐全部使用大写+下划线
const MAX_COUNT = 100
- 特殊变量
-
- iOS 第一个字母小写其他两个大写
- Android 第一个大写其余小写
- Boolean变量
isShow:是否显示
isVisible:是否可见
isLoading:是否处于加载中
isConnecting:是否处于连接中
isValidating:正在验证中
isRunning:正在运行中
- 函数命名
-
- 推荐使用 camelCase命名
- 原生事件 "on" 开头
- 自定义事件 "handle" 开头
onSubmit // 提交表单
handleClick
- 上下文this引用只能使用 _this、that
- HTML
-
- alt标签不为空
- CSS
-
- 尽量使用缩写属性
- 值 "0" 不需要添加单位
- 路由命名
-
- path:路径使用 kebab-case
- name:使用 PascalCase 注意不要重复
{path: '/news-detail',name: 'NewsDetail ,component: ()=>import('@/pages/news-detail/'), meta: { title: '详情' }
}
注释
- 单行注释必须独占一行 // 后跟一个空格
- 文档化注释 /** */ 参考 JSDoc
函数
- 优先使用箭头函数
- 函数默认值写在其他参数后面
- 函数参数最多三个,三个以上可以采用对象形式
- 函数私有属性可以 使用 $_ 前缀
const demo = ()=>{$_name = '我是私有变量';
}
- 如果是公用函数 需要添加 jsdoc 注释,包含参数、返回值等信息。
Git提交规范
- 代码少量多次提交
-
- 可以多个 commit 一起 push
- 禁止多代码一起提交
- 参考 vue 规范
-
- feat 增加新功能
- fix 修复问题/BUG
- style 代码风格相关
- perf 优化/性能提升
- refactor 重构
- revert 撤销修改
- test 测试相关
- docs 注释
- chore 依赖更新/脚手架配置修改
- ci 持续集成