前端开发规范

基本命名准则

1. 贴合业务
2. 简介、语义化、能够英文释义
3. 项目保持一种命名方法，命名方式可以有多种

常用命名方法

1. PascalCase 命名法：所有单词的首字母都大写 如 HelloWorld
2. camelCase 命名法：驼峰命名 如 helloWorld
3. 下划线 命名法：如 hello_world
4. kebab-case 命名法：如 hello-world

Vue项目命名

1. 项目名 推荐使用 短横线命名
2. 自定义指令 推荐单个单词，如果需要多个单词 推荐驼峰命名
3. 组件命名 推荐 PascalCase 命名 注意要和项目保持一致
4. 1. 公共组件应该以 The 前缀命名，以示其唯一性。

components/
|- TheHeading.vue
|- TheSidebar.vue

1. 1. 私有组件名应该以父组件名作为前缀

components/
|- TodoList.vue
|- TodoListItem.vue

1. 1. 模版中组件名

1. 1. 组件名应该完整，不应该简写
   2. 注意 组件名应该多个单词

1. Props命名

1. 1. 定义Props 推荐camelCase

props: {
  greetingText: String
}

1. 1. 使用Props 推荐 kebab-case

1. Store

1. 1. module 推荐使用 camelCase
   2. mutation 推荐使用 PascalCase
   3. state 推荐使用 camelCase
   4. getters 推荐使用 camelCase

1. 常量 推荐全部使用大写+下划线

const MAX_COUNT = 100

1. 特殊变量

1. 1. iOS 第一个字母小写其他两个大写
   2. Android 第一个大写其余小写

1. Boolean变量

isShow：是否显示
isVisible：是否可见
isLoading：是否处于加载中
isConnecting：是否处于连接中
isValidating：正在验证中
isRunning：正在运行中

1. 函数命名

1. 1. 推荐使用 camelCase命名
   2. 原生事件 "on" 开头
   3. 自定义事件 "handle" 开头

onSubmit // 提交表单
handleClick

1. 上下文this引用只能使用 _this、that
2. HTML

1. 1. alt标签不为空

1. CSS

1. 1. 尽量使用缩写属性
   2. 值 "0" 不需要添加单位

1. 路由命名

1. 1. path：路径使用 kebab-case
   2. name：使用 PascalCase 注意不要重复

{
  	path: '/news-detail',
    name: 'NewsDetail ，
  	component: ()=>import('@/pages/news-detail/'), 
    meta: { title: '详情' }
}

注释

1. 单行注释必须独占一行 // 后跟一个空格
2. 文档化注释 /** */ 参考 JSDoc

函数

1. 优先使用箭头函数
2. 函数默认值写在其他参数后面
3. 函数参数最多三个，三个以上可以采用对象形式
4. 函数私有属性可以 使用 $_ 前缀

   const demo = ()=>{
     $_name = '我是私有变量';
   }

5. 如果是公用函数 需要添加 jsdoc 注释，包含参数、返回值等信息。

Git提交规范

1. 代码少量多次提交

1. 1. 可以多个 commit 一起 push
   2. 禁止多代码一起提交

1. 参考 vue 规范

1. 1. feat 增加新功能
   2. fix 修复问题/BUG
   3. style 代码风格相关
   4. perf 优化/性能提升
   5. refactor 重构
   6. revert 撤销修改
   7. test 测试相关
   8. docs 注释
   9. chore 依赖更新/脚手架配置修改
   10. ci 持续集成