本文已参加「新人创作礼」活动，一起开启掘金创作之路。

命名规范

• 项目名全部采用小写方式， 以中划线分隔。 比如： my-project-name
• 目录名参照上一条规则,有复数结构时，要采用复数命名法
• vue/js/css文件名：除入口文件外采用小写字母中划线连接

HTML基本规范

缩进

• 统一采用两个空格缩进
• 文件名统一采用小写开头驼峰式命名，页面或组件入口index文件采用大写字母开头驼峰式命名
• class类名采用BEM方式‘页面/组件-功能模块-特性’的模式命名，不写scope，一个页面的方法包装在一个模块class内部
• id是唯一的，统一采用中划线分割单词，禁止驼峰式命名
• 除非某个事件仅控制标志位，否则禁止在模版事件中写多行js方法
• 所有具有开始标签和结束标签的元素都必须要写上起止标签，某些允许省略开始标签或和束标签的元素也都要写上
• 减少无意义标签
• 元素双引号包裹
• 仅仅是出于样式考虑的标签，统一采用伪类实现
• 特殊符号需要转义，禁止直接写在html中
• 模版注释单独一行 格式为

vue模版规范

方法推荐声明顺序

• components
• props
• data
• computed
• created
• mounted
• activited
• update
• beforeRouteUpdate
• metods
• watch

对除第一个属性外的其他每个属性进行换行，并保持对齐，避免单行过长，超过编辑器可视区域

原因：可读性强，易维护 推荐配合beautify和ventur进行自配置，自动实现缩进调整，减少把时间放在这种事情上

组件命名规范

• 组件文件名推荐小写字母开头，驼峰式命名，除入口文件大写字母开头外
• 组件name采用大写字母开头驼峰式命名
• 页面内使用组件需闭合标签

data和props命名

• 统一，camelCase
• 组件 props 原子化
• props提供默认值
• props 使用 type 属性校验类型
• 使用 props 之前先检查该 prop 是否存在

注释

• 公共组件使用说明
• 各组件中重要函数或者类说明
• 复杂的业务逻辑处理说明
• 特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述
• 注释块必须以/（至少两个星号）开头/
• 单行注释使用//
• 多重 if 判断语句

使用ES6

• 静态字符串一律使用单引号或反引号，动态字符串使用反引号
• 定义变量使用 let ,定义常量使用 const
• 推荐使用结构赋值，而不是在方法参数中结构
• 使用扩展运算符（...）拷贝数组
• 尽量用箭头函数

模块

• 模块输出一个值，采用export default，反之禁用

指令

• 非模版类组件优先抽成指令
• 指令优先采用缩写
• 避免 v-if 和 v-for 同时用在一个元素上（性能问题）

js

• 非必要情况下，变量统一在data内，避免组件复用未执行
• for if 代码块禁止简写
• 禁止保留debugger
• 函数、变量命名—— 小驼峰
• 常量命名——使用大写字母和下划线来组合命名，下划线用以分割单词
• 私有属性和方法 : 前缀为下划线(_)后面跟公共属性和方法一样的命名方式

css

• 属性声明结尾加分号
• 选择器与左括号之间一个空格，属性冒号后一个空格
• 不要为 0 指明单位
• 颜色值和属性值十六进制数值能用简写的尽量用简写，色值统一采用大写或者小写字母
• 当元素需要撑起高度以包含内部的浮动元素时，通过对伪类设置 clear 或触发 BFC 的方式进行 clearfix。尽量不使用增加空标签的方式。
• 同上HTML，采用BEM
• 注释 /* 推荐的单行注释 */