1. 框架使用规范

1.1 Vue

1.1.1 组件命名规范

组件名应该始终是多个单词的（大于等于 2），且命名规范为KebabCase格式。

1.1.2 组件的 data 必须是一个函数。

当在组件中使用 data property 的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

1.1.3 prop 的定义应该尽量详细，至少需要指定其类型。

1.1.4 v-for 必须设置key值。

1.1.5 不要把 v-if 和 v-for 同时用在同一个元素上。

1.1.6 组件样式添加作用域。

1.1.7 如果特性元素较多，应该主动换行。

1.1.8 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。

1.1.9 指令推荐都使用缩写形式，(用 : 表示 v-bind: 、用 @ 表示 v-on:)

1.1.10 单文件组件应该总是让标签顺序保持为

<template>...</template>
<script>...</script>
<style>...</style>

1.1.11 如果运行时，需要非常频繁地切换，使用 v-show ；如果在运行时，条件很少改变，使用 v-if。

2. 技术规范

2.1 命名规范

2.1.1 项目命名全部采用小写方式，以中划线分隔。

2.1.2 目录命名全部采用小写方式，以中划线分隔，有复数结构时，要采用复数命名法，缩写不用复数。

2.1.3 JS、CSS、SCSS、HTML、PNG 文件命名全部采用小写方式，以中划线分隔。

2.1.4 CSS类名使用小写字母，以中划线分隔， id 采用驼峰式命名，scss 中的变量、函数、混合、placeholder 采用驼峰式命名。

2.1.5 JS方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。其中 method 方法命名必须是动词或者动词+名词形式，增删查改可以统一用add / update / delete / detail / get这几个单词。

2.2 代码编写规范

使用 2 个空格进行缩进，不同逻辑、不同语义、不同业务的代码之间插入一个空行分隔开来以提升可读性。条件判断能使用三目运算符和逻辑运算符解决的，就不要使用条件判断，但是谨记不要写太长的三目运算符。如果超过 3 层请抽成函数，并写清楚注释。

2.3 注释规范

2.3.1 建议加注释的地方：

每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释
公共组件使用说明
api 目录的接口 js 文件必须加注释
store 中的 state, mutation, action 等必须加注释
vue 文件中的 template 必须加注释，若文件较大添加 start end 注释
vue 文件的 methods，每个 method 必须添加注释
vue 文件的 data, 非常见单词要加注释

2.3.2 函数注释：

/** * 以星号开头，紧跟一个空格，第一行为函数说明
* @param {类型} 参数 单独类型的参数
* @param {[类型|类型|类型]} 参数 多种类型的参数
* @param {类型} [可选参数] 参数 可选参数用[]包起来
* @return {类型} 说明
* @author 作者 创建时间 修改时间（短日期）改别人代码要留名
* @example 举例（如果需要） */

2.3.3 文件头注释：

VScode 文件头部自动生成注释插件：koroFileHeader

2.4 HTML标签使用规范

自闭合（self-closing）标签，无需闭合 ( 例如： img input br hr 等 )；可选的闭合标签（closing tag），需闭合 ( 例如：</li> 或 </body> )
尽量减少标签数量
为移动设备添加 viewport

2.5 CSS样式规范

css 选择器中避免使用标签名
优先考虑子选择器
省略0后面的单位
按以下顺序组织：@import;变量声明;样式声明;

3.Git规范

3.1 提交代码按照以下顺序

git stash 
git pull
git stash pop
git add .
git commit -m xxx
git push

3.2 Commit注释规范

git commit -m '<type>(<scope>): <subject>'
git commit -m '新增(影响全局select组件UI样式): 更改了select组件动画效果'

type: 分支行为,主要有以下几种：

【新增】: 新的功能或特性
【bug修复】: bug的修复
【文档】: 文件修改, 比如修改应用了ngDoc的项目的ngDoc内容
【界面】: 格式修改. 比如改变缩进, 空格, 删除多余的空行, 补上漏掉的分号. 总之, 就是不影响代码含义和功能的修改
【重构】: 代码重构. 一些不算修复bug也没有加入新功能的代码修改
【优化】: 提升代码性能
【测试】: 测试文件的修改
【其它】: 其他的小改动. 一般为仅仅一两行的改动, 或者连续几次提交的小改动属于这种

scope: 说明 commit 影响的范围，这个需要视具体场景与项目的不同而灵活变动
subject: 对于该 commit 目的的简短描述

前端开发规范