一、命名規(guī)范
1、項(xiàng)目命名
全部采用小寫方式， 以中劃線分隔
正例：tmall-management-system
反例：tmall_management-system / tmallManagementSystem
2、目錄命名
全部采用小寫方式， 以中劃線分隔，有復(fù)數(shù)結(jié)構(gòu)時(shí)，要采用復(fù)數(shù)命名法， 縮寫不用復(fù)數(shù)
正例：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、命名嚴(yán)謹(jǐn)性
代碼中的命名嚴(yán)禁使用拼音與英文混合的方式
正例：henan / luoyang / rmb 等國(guó)際通用的名稱，可視同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [評(píng)分] / int 某變量 = 3
5、頁(yè)面命名
能直觀的感受當(dāng)前文件的作用，以小駝峰方式命名
正例：login.vue / changePhone.vue
反例：Login.vue / ChangePhone.vue
二、HTML規(guī)范
1、縮進(jìn)
縮進(jìn)使用 2 個(gè)空格（一個(gè) tab），嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)。
2、分塊注釋
在每一個(gè)塊狀元素，列表元素和表格元素后，加上一對(duì) HTML 注釋。注釋格式
<body>
<!-- header 頭部 start -->
<header>
<div class="container">
<a href="#">
<!-- 圖片會(huì)把a(bǔ)標(biāo)簽給撐開(kāi)，所以不用設(shè)置a標(biāo)簽的大小 -->
<img src="images/header.jpg" />
</a>
</div>
</header>
<!-- header 頭部 end -->
</body>
3、語(yǔ)義化標(biāo)簽
<header></header>
<footer></footer>
三、CSS 規(guī)范
1、命名
- 類名使用小寫字母，以中劃線分隔
- id 采用駝峰式命名
- scss 中的變量、函數(shù)、混合、placeholder 采用駝峰式命名
2、選擇器
- css 選擇器中避免使用標(biāo)簽名
- 考慮直接子選擇器
正例：
.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 規(guī)范
1、代碼組織
- 將公共 less 文件放置在 style / less 文件夾
- 按以下順序組織：@import、變量聲明、樣式聲明
2、避免嵌套層級(jí)過(guò)多（將嵌套深度限制在 3 級(jí)）
五、Javascript 規(guī)范
1、命名
- 采用小寫駝峰命名 lowerCamelCase，代碼中的命名均不能以下劃線，也不能以下劃線或美元符號(hào)結(jié)束
- 方法名、參數(shù)名、成員變量、局部變量都統(tǒng)一使用 lowerCamelCase 風(fēng)格，必須遵從駝峰形式。
- 常量命名全部大寫，單詞間用下劃線隔開(kāi)，力求語(yǔ)義表達(dá)完整清楚，不要嫌名字長(zhǎng)
- 字符串：統(tǒng)一使用單引號(hào)(‘)，不使用雙引號(hào)(“)。
- 使用 ES6,ES7
- 條件判斷和循環(huán)最多三層
- 對(duì)上下文 this 的引用只能使用 self 來(lái)命名
六、Vue 項(xiàng)目規(guī)范
Vue 項(xiàng)目規(guī)范以 Vue 官方規(guī)范（https://cn.vuejs.org/v2/style-guide/）
1、父組件以命名規(guī)范為 KebabCase 格式，子組件以命名規(guī)范為pascal-case格式
2、在 Template 模版中使用組件，應(yīng)使用 PascalCase 模式，并且使用自閉合組件。
<MyComponent />
