Vue前端开发规范文档
目录
一、概述
本规范旨在为前端程序的开发者提供规范化最新的指导，可用于程序员个人编译环境以及研发团队集成环境等场合的代码规范化检查。
不管有多少人共同参与同一项目，一定要确保每一行代码都像是同一个人编写的
二、方针
| 约束等级 | 约束效力 | 强制性 |
|---|---|---|
| 【强制】 | 违反该项将被认为代码存在严重缺陷 | 前端程序团队必须遵守 |
| 【推荐】 | 违反该项将被认为代码存在轻微缺陷 | 根据具体产品特性的不同，选择性地遵守 |
| 【参考】 | 违反该项可被认为代码存在优化空间 | 从产品持续优化及人员技能提升的角度，参考使用 |
三、环境要求
-
【强制】Node.js 8.9 或更高版本，你可以使用 nvm 或 nvm-windows 在一台电脑中管理多个 Node 版本
-
【强制】使用 Visual Studio Code (VS Code) 进行代码编写
-
【强制】代码提交前使用 VS Code 进行格式化（不要格式引入的外部文件）
-
【强制】规定 Tab 大小为 2 个空格，保证在所有环境下获得一致展现
// settings.json { "editor.tabSize": 2 // ... } -
【强制】安装插件 Vetur（ Vue开发扩展及 Vue 文件代码格式化）
-
【强制】安装插件 Prettier - Code formatter（ CSS / Less / JS 等其他文件代码格式化；Vetur 的格式化基于此插件实现，固可以在所有文件实现统一的格式化）
-
【推荐】使用 Chrome 浏览器并安装 Vue.js devtools 进行调试
四、编码规范
4.1 HTML / Template 编码规范
4.1.1 语法
-
【强制】缩进使用两个空格代替 Tab
- 前端代码层级较深，使用短缩进有利于利用屏幕空间，提升效率
- 使用两个空格代替 Tab 可以保证在所有环境下获得一致展现
<!-- not good --> <div> <div>bar</div> </div> <!-- good --> <div> <div>bar</div> </div> -
【强制】嵌套元素应当缩进一次（即两个空格），同层级缩进应保持一致
<!-- not good --> <div> <div>bar</div> <div>bar</div> </div> <!-- good --> <div> <div>bar</div> <div>bar</div> </div> -
【强制】对于属性的定义，使用双引号，不要使用单引号
<!-- not good --> <input class='a' type=text> <!-- good --> <input class="a" type="text"> -
【强制】不要省略可选的结束标签（closing tag）（如
</li>或</body>）省略可选的结束标签，虽不会违反 H5 规范；但可能会造成层级上的困扰，导致代码出现无法预料的问题
<!-- not good --> <h1>h1 text <h2>h2 text <!-- good --> <h1>h1 text</h1> <h2>h2 text</h2> -
【强制】特殊符号使用 HTML 字符实体（实体名称对大小写敏感），常用如下：
符号 实体编码 空格 © © ¥ ¥ ® ® > > < < & & -
【强制】td / th 要在 tr 里面，li 要在 ul / ol 里面
<!-- not good --> <table> <td>test</td> </table> <!-- good --> <table> <tr> <td>test</td> </tr> </table> -
【强制】ul / ol 的直接子元素只能是 li，不能包含其他元素
<!-- not good --> <ul> <span>123</span> <li>a</li> <li>b</li> </ul> -
【强制】行内元素里面不可使用块级元素
a 标签是一个行内元素，行内元素里面套了一个 div 的标签，这样可能会导致 a 标签无法正常点击
<!-- not good --> <a href="../test"> <div></div> </a>可以使用如下代码进行修复：
<a href="../test" style="display: block"> <div></div> </a> -
【强制】不使用自定义标签，会与Vue组件系统的自定义组件冲突
-
【强制】不使用重复属性，重复的属性只会取第一个
<!-- error --> <input class="a" type="text" class="b"> <!-- good --> <input class="a b" type="text"> -
【强制】不要在https的链接里写http的图片
只要https的网页请求了一张http的图片，就会导致浏览器地址栏左边的小锁没有了，一般不要写死，写成根据当前域名的协议去加载，用//开头：
<img src="//static.chimeroi.com/hello-world.jpg"> -
【推荐】不要在自闭合（self-closing）元素的尾部添加斜线（ HTML5 规范中说明这是可选的）
<!-- not good --> <img src="logo.png" alt /> <!-- good --> <img src="logo.png" alt> -
【推荐】不使用属性设置样式（
img,table等元素）<!-- not good --> <img src="test.jpg" alt width="400" height="300"> <!-- good --> <img src="test.jpg" style="width:400px;height:300px;"> -
【参考】自定义属性要以data-开头
自己添加的非标准的属性要以data-开头，否则w3c validator会认为是不规范的<!-- not good --> <div count="5"></div> <!-- good --> <div data-count="5"></div>
4.1.2 HTML5 doctype
【强制】为每个 HTML 页面添加标准模式（standard mode）的声明，确保在每个浏览器中拥有一致的展现
<!DOCTYPE html>
<html>
...
4.1.3 语言属性
【强制】