前端开发规范文档

一、命名规范

1、项目命名

全部采用小写方式， 以中划线分隔
正例：tmall-management-system
反例：tmall_management-system / tmallManagementSystem

2、目录命名

全部采用小写方式， 以中划线分隔，有复数结构时，要采用复数命名法， 缩写不用复数
正例：scripts / styles / demo-styles
反例：script / style / demoStyles

3、JS、CSS、SCSS、HTML、PNG 文件命名

全部采用小写方式， 以中划线分隔
正例： render-dom.js / signup.css / index.html / company-logo.png
反例： renderDom.js / UserManagement.html

4、命名严谨性

代码中的命名严禁使用拼音与英文混合的方式
正例：henan / luoyang / rmb 等国际通用的名称，可视同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [评分] / int 某变量 = 3

5、页面命名

能直观的感受当前文件的作用，以小驼峰方式命名
正例：login.vue / changePhone.vue
反例：Login.vue / ChangePhone.vue

二、HTML规范

1、缩进

缩进使用 2 个空格（一个 tab），嵌套的节点应该缩进。

2、分块注释

在每一个块状元素，列表元素和表格元素后，加上一对 HTML 注释。注释格式

3、语义化标签

三、CSS 规范

1、命名

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

2、选择器

• css 选择器中避免使用标签名
• 考虑直接子选择器

正例：
.content > .title {
  font-size: 2rem;
}
反例：
.content .title {
  font-size: 2rem;
}

3、尽量使用缩写属性

正例：
padding: 0 1em 2em;
反例：
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;

4、省略0后面的单位

div{
  padding-bottom: 0;
  margin: 0;
}

四、LESS、SASS 规范

1、代码组织

• 将公共 less 文件放置在 style / less 文件夹
• 按以下顺序组织：@import、变量声明、样式声明

2、避免嵌套层级过多（将嵌套深度限制在 3 级）

五、Javascript 规范

1、命名

• 采用小写驼峰命名 lowerCamelCase，代码中的命名均不能以下划线，也不能以下划线或美元符号结束
• 方法名、参数名、成员变量、局部变量都统一使用 lowerCamelCase 风格，必须遵从驼峰形式。
• 常量命名全部大写，单词间用下划线隔开，力求语义表达完整清楚，不要嫌名字长
• 字符串：统一使用单引号(‘)，不使用双引号(“)。
• 使用 ES6,ES7
• 条件判断和循环最多三层
• 对上下文 this 的引用只能使用 self 来命名

六、Vue 项目规范

Vue 项目规范以 Vue 官方规范（https://cn.vuejs.org/v2/style-guide/）

1、父组件以命名规范为 KebabCase 格式，子组件以命名规范为pascal-case格式

2、在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件。

参考来自：https://w3ctim.com/post/1d821dd8.html#7-Prop-%E5%AE%9A%E4%B9%89%E5%BA%94%E8%AF%A5%E5%B0%BD%E9%87%8F%E8%AF%A6%E7%BB%86