前端开发规范 (1).docxVIP

前端开发规范

TOC\o1-2\h\u

一、编程规约 2

(一)命名规范 2

(二)HTML规范（VueTemplate同样适用） 3

(三)CSS规范 4

(四)LESS规范 6

(五)Javascript规范 7

二、Vue项目规范 10

(一)Vue编码基础 10

(二)Vue项目目录规范 16

(三)其他 16

前端代码规范

FrontStandardGuide

规范的目的是为了编写高质量的代码，让团队成员每天得心情都是愉悦的，大家在一起是快乐的。

引自《阿里规约》的开头片段：

现代软件架构的复杂性需要协同开发完成，如何高效地协同呢？无规矩不成方圆，无规范难以协同，比如，制订交通法规表面上是要限制行车权，实际上是保障公众的人身安全，试想如果没有限速，没有红绿灯，谁还敢上路行驶。对软件来说，适当的规范和标准绝不是消灭代码内容的创造性、优雅性，而是限制过度个性化，以一种普遍认可的统一方式一起做事，提升协作效率，降低沟通成本。代码的字里行间流淌的是软件系统的血液，质量的提升是尽可能少踩坑，杜绝踩重复的坑，切实提升系统稳定性，码出质量。

一、编程规约

(一)命名规范

1.1.1项目命名

全部采用kebab-case命名，每个单词首字母小写，以中划线分隔。

例：mall-management-system

1.1.2目录命名

\oVUEVUE?的项目中?components组件目录用大写驼峰（例：FileUpload），其余除components组件目录外的所有目录均使用kebab-case命名

1.1.3vue、JS、CSS、SCSS、HTML、PNG文件命名

全部采用kebab-case命名，每个单词首字母小写，以中划线分隔。

例：?render-dom.js/signup.css/index.html/company-logo.png

1.1.4命名严谨性

代码中的命名严禁使用拼音与英文混合的方式，更不允许直接使用中文的方式。说明：正确的英文拼写和语法可以让阅读者易于理解，避免歧义。注意，即使纯拼音命名方式也要避免采用

正例：henan/luoyang/rmb等国际通用的名称，可视同英文。

反例：DaZhePromotion[打折]/getPingfenByName()[评分]/int某变量=3

杜绝完全不规范的缩写，避免望文不知义：

反例：AbstractClass“缩写”命名成AbsClass；condition“缩写”命名成condi，此类随意缩写严重降低了代码的可阅读性。

(二)HTML规范（VueTemplate同样适用）

1.2.1HTML类型

推荐使用HTML5的文档类型申明：.

（建议使用text/html格式的HTML。避免使用XHTML。XHTML以及它的属性，比如application/xhtml+xml在浏览器中的应用支持与优化空间都十分有限）。

规定字符编码

IE兼容模式

doctype大写

正例：

1.2.2缩进

缩进使用2个空格（一个tab）

嵌套的节点应该缩进。

1.2.3分块注释

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

例：!--注释内容--

1.2.4语义化标签

HTML5中新增很多\t/a460550542/article/details/_blank语义化标签，所以优先使用语义化标签，避免一个页面都是div或者p标签

正例

反例

1.2.5引号

使用双引号()而不是单引号(’)。

(三)CSS规范

1.3.1命名

类名使用小写字母，以中划线分隔

id采用驼峰式命名

scss中的变量、函数、混合、placeholder采用驼峰式命名

ID和class的名称总是使用可以反应元素目的和用途的名称，或其他通用的名称，代替表象和晦涩难懂的名称

不推荐：

推荐:

1.3.2选择器

不推荐:

推荐:

1.3.3尽量使用缩写属性

不推荐：

推荐：

1.3.4每个选择器及属性独占一行

不推荐：

推荐：

1.3.5省略0后面的单位

不推荐：

推荐：

1.3.6避免使用ID选择器及全局标签选择器防止污染全局样式

不推荐：

推荐：

(四)LESS规范

1.4.1代码组织

1)将公共less文件放置在style/less/common文件夹

例://color.less,common.less

2)按以下顺序组织

1、@import;

2、变量声明;

3、样式声明;

1.4.2避免嵌套