前端代碼規(guī)范
Front Standard Guide
前端 JS 項(xiàng)目開(kāi)發(fā)規(guī)范
規(guī)范的目的是為了編寫(xiě)高質(zhì)量的代碼，讓你的團(tuán)隊(duì)成員每天得心情都是愉悅的就乓，大家在一起是快樂(lè)的禽作。
引自《阿里規(guī)約》的開(kāi)頭片段：
----現(xiàn)代軟件架構(gòu)的復(fù)雜性需要協(xié)同開(kāi)發(fā)完成缨该，如何高效地協(xié)同呢勤晚？無(wú)規(guī)矩不成方圓，無(wú)規(guī)范難以協(xié)同啸臀，比如届宠，制訂交通法規(guī)表面上是要限制行車(chē)權(quán)，實(shí)際上是保障公眾的人身安全乘粒，試想如果沒(méi)有限速豌注，沒(méi)有紅綠燈，誰(shuí)還敢上路行駛灯萍。對(duì)軟件來(lái)說(shuō)轧铁，適當(dāng)?shù)囊?guī)范和標(biāo)準(zhǔn)絕不是消滅代碼內(nèi)容的創(chuàng)造性、優(yōu)雅性旦棉，而是限制過(guò)度個(gè)性化齿风，以一種普遍認(rèn)可的統(tǒng)一方式一起做事药薯，提升協(xié)作效率，降低溝通成本救斑。代碼的字里行間流淌的是軟件系統(tǒng)的血液童本，質(zhì)量的提升是盡可能少踩坑，杜絕踩重復(fù)的坑脸候，切實(shí)提升系統(tǒng)穩(wěn)定性穷娱，碼出質(zhì)量。
一纪他、編程規(guī)約
(一)命名規(guī)范
1.1.1 項(xiàng)目命名
全部采用小寫(xiě)方式鄙煤， 以中劃線分隔。
正例：mall-management-system
反例：mall_management-system / mallManagementSystem
1.1.2 目錄命名
全部采用小寫(xiě)方式茶袒， 以中劃線分隔，有復(fù)數(shù)結(jié)構(gòu)時(shí)凉馆，要采用復(fù)數(shù)命名法薪寓， 縮寫(xiě)不用復(fù)數(shù)
正例： scripts / styles / components / images / utils / layouts / demo-styles / demo-scripts / img / doc
反例： script / style / demo_scripts / demoStyles / imgs / docs
【特殊】VUE 的項(xiàng)目中的 components 中的組件目錄，使用 kebab-case 命名
正例： head-search / page-loading / authorized / notice-icon
反例： HeadSearch / PageLoading
【特殊】VUE 的項(xiàng)目中的除 components 組件目錄外的所有目錄也使用 kebab-case 命名
正例： page-one / shopping-car / user-management
反例： ShoppingCar / UserManagement
1.1.3 JS澜共、CSS向叉、SCSS、HTML嗦董、PNG 文件命名
全部采用小寫(xiě)方式母谎， 以中劃線分隔
正例： render-dom.js / signup.css / index.html / company-logo.png
反例： renderDom.js / UserManagement.html
1.1.4 命名嚴(yán)謹(jǐn)性
代碼中的命名嚴(yán)禁使用拼音與英文混合的方式，更不允許直接使用中文的方式京革。 說(shuō)明：正確的英文拼寫(xiě)和語(yǔ)法可以讓閱讀者易于理解奇唤，避免歧義。注意匹摇，即使純拼音命名方式也要避免采用
正例：henan / luoyang / rmb 等國(guó)際通用的名稱(chēng)咬扇，可視同英文。
反例：DaZhePromotion [打折] / getPingfenByName() [評(píng)分] / int 某變量 = 3
杜絕完全不規(guī)范的縮寫(xiě)廊勃，避免望文不知義：
反例：AbstractClass“縮寫(xiě)”命名成 AbsClass懈贺；condition“縮寫(xiě)”命名成 condi，此類(lèi)隨意縮寫(xiě)嚴(yán)重降低了代碼的可閱讀性坡垫。
(二)HTML 規(guī)范 （Vue Template 同樣適用）
1.2.1 HTML 類(lèi)型
推薦使用 HTML5 的文檔類(lèi)型申明： .
（建議使用 text/html 格式的 HTML梭灿。避免使用 XHTML。XHTML 以及它的屬性冰悠，比如 application/xhtml+xml 在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限）堡妒。
- 規(guī)定字符編碼
- IE 兼容模式
- 規(guī)定字符編碼
- doctype 大寫(xiě)
正例：
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="X-UA-Compatible" content="IE=Edge" />
<meta charset="UTF-8" />
<title>Page title</title>
</head>
<body>
<img src="images/company-logo.png" alt="Company" />
</body>
</html>
1.2.2 縮進(jìn)
縮進(jìn)使用 2 個(gè)空格（一個(gè) tab）
嵌套的節(jié)點(diǎn)應(yīng)該縮進(jìn)。
1.2.3 分塊注釋
在每一個(gè)塊狀元素屿脐，列表元素和表格元素后涕蚤，加上一對(duì) HTML 注釋宪卿。注釋格式
<header>
<div class="container">
<a href="#">
<img src="images/header.jpg" />
</a>
</div>
</header>
</body>
### 1.2.4 語(yǔ)義化標(biāo)簽
HTML5 中新增很多語(yǔ)義化標(biāo)簽，所以優(yōu)先使用語(yǔ)義化標(biāo)簽万栅，避免一個(gè)頁(yè)面都是 div 或者 p 標(biāo)簽
正例
<header></header>
<footer></footer>
反例
<div>
<p></p>
</div>
#### 1.2.5 引號(hào)
使用雙引號(hào)(" ") 而不是單引號(hào)(’ ') 佑钾。
正例： ``
反例： ``
### (三) CSS 規(guī)范
#### 1.3.1 命名
- 類(lèi)名使用小寫(xiě)字母，以中劃線分隔
- id 采用駝峰式命名
- scss 中的變量烦粒、函數(shù)休溶、混合、placeholder 采用駝峰式命名
ID 和 class 的名稱(chēng)總是使用可以反應(yīng)元素目的和用途的名稱(chēng)扰她，或其他通用的名稱(chēng)兽掰，代替表象和晦澀難懂的名稱(chēng)
不推薦：
.fw-800 {
font-weight: 800;
}
.red {
color: red;
}
推薦:
.heavy {
font-weight: 800;
}
.important {
color: red;
}
#### 1.3.2 選擇器
1)css 選擇器中避免使用標(biāo)簽名
從結(jié)構(gòu)、表現(xiàn)徒役、行為分離的原則來(lái)看孽尽，應(yīng)該盡量避免 css 中出現(xiàn) HTML 標(biāo)簽，并且在 css 選擇器中出現(xiàn)標(biāo)簽名會(huì)存在潛在的問(wèn)題忧勿。
2)很多前端開(kāi)發(fā)人員寫(xiě)選擇器鏈的時(shí)候不使用 直接子選擇器（注：直接子選擇器和后代選擇器的區(qū)別）杉女。有時(shí)，這可能會(huì)導(dǎo)致疼痛的設(shè)計(jì)問(wèn)題并且有時(shí)候可能會(huì)很耗性能鸳吸。然而熏挎，在任何情況下，這是一個(gè)非常不好的做法晌砾。如果你不寫(xiě)很通用的坎拐，需要匹配到 DOM 末端的選擇器， 你應(yīng)該總是考慮直接子選擇器养匈。
不推薦:
.content .title {
font-size: 2rem;
}
推薦:
.content > .title {
font-size: 2rem;
}
#### 1.3.3 盡量使用縮寫(xiě)屬性
不推薦：
border-top-style: none;
font-family: palatino, georgia, serif;
font-size: 100%;
line-height: 1.6;
padding-bottom: 2em;
padding-left: 1em;
padding-right: 1em;
padding-top: 0;
推薦：
border-top: 0;
font: 100%/1.6 palatino, georgia, serif;
padding: 0 1em 2em;
#### 1.3.4 每個(gè)選擇器及屬性獨(dú)占一行
不推薦：
button{
width:100px;height:50px;color:#fff;background:#00a0e9;
}
推薦：
button{
width:100px;
height:50px;
color:#fff;
background:#00a0e9;
}
#### 1.3.5 省略0后面的單位
不推薦：
div{
padding-bottom: 0px;
margin: 0em;
}
推薦：
div{
padding-bottom: 0;
margin: 0;
}
#### 1.3.6 避免使用ID選擇器及全局標(biāo)簽選擇器防止污染全局樣式
不推薦：
header{
padding-bottom: 0px;
margin: 0em;
}
推薦：
.header{
padding-bottom: 0px;
margin: 0em;
}
### (四) LESS 規(guī)范
#### 1.4.1 代碼組織
##### 1)將公共less文件放置在style/less/common文件夾
例:// color.less,common.less
##### 2)按以下順序組織
1哼勇、@import;
2、變量聲明;
3乖寒、樣式聲明;
@import "mixins/size.less";
@default-text-color: #333;
.page {
width: 960px;
margin: 0 auto;
}
#### 1.4.2 避免嵌套層級(jí)過(guò)多
將嵌套深度限制在3級(jí)猴蹂。對(duì)于超過(guò)4級(jí)的嵌套，給予重新評(píng)估楣嘁。這可以避免出現(xiàn)過(guò)于詳實(shí)的CSS選擇器磅轻。
避免大量的嵌套規(guī)則。當(dāng)可讀性受到影響時(shí)逐虚，將之打斷聋溜。推薦避免出現(xiàn)多于20行的嵌套規(guī)則出現(xiàn)
不推薦：
.main{
.title{
.name{
color:#fff
}
}
}
推薦：
.main-title{
.name{
color:#fff
}
}
### (五) Javascript 規(guī)范
#### 1.5.1 命名
##### 1) 采用小寫(xiě)駝峰命名 lowerCamelCase，代碼中的命名均不能以下劃線叭爱，也不能以下劃線或美元符號(hào)結(jié)束
反例： `_name / name_ / name$`
##### 2) 方法名撮躁、參數(shù)名、成員變量买雾、局部變量都統(tǒng)一使用 lowerCamelCase 風(fēng)格把曼，必須遵從駝峰形式杨帽。
正例： `localValue / getHttpMessage() / inputUserId`
****其中 method 方法命名必須是 動(dòng)詞 或者 動(dòng)詞+名詞 形式\****
正例：`saveShopCarData /openShopCarInfoDialog`
反例：`save / open / show / go`
****特此說(shuō)明，增刪查改嗤军，詳情統(tǒng)一使用如下 5 個(gè)單詞注盈，不得使用其他（目的是為了統(tǒng)一各個(gè)端）\****
add / update / delete / detail / get
**附： 函數(shù)方法常用的動(dòng)詞:**
get 獲取/set 設(shè)置,
add 增加/remove 刪除
create 創(chuàng)建/destory 移除
start 啟動(dòng)/stop 停止
open 打開(kāi)/close 關(guān)閉,
read 讀取/write 寫(xiě)入
load 載入/save 保存,
create 創(chuàng)建/destroy 銷(xiāo)毀
begin 開(kāi)始/end 結(jié)束,
backup 備份/restore 恢復(fù)
import 導(dǎo)入/export 導(dǎo)出,
split 分割/merge 合并
inject 注入/extract 提取,
attach 附著/detach 脫離
bind 綁定/separate 分離,
view 查看/browse 瀏覽
edit 編輯/modify 修改,
select 選取/mark 標(biāo)記
copy 復(fù)制/paste 粘貼,
undo 撤銷(xiāo)/redo 重做
insert 插入/delete 移除,
add 加入/append 添加
clean 清理/clear 清除,
index 索引/sort 排序
find 查找/search 搜索,
increase 增加/decrease 減少
play 播放/pause 暫停,
launch 啟動(dòng)/run 運(yùn)行
compile 編譯/execute 執(zhí)行,
debug 調(diào)試/trace 跟蹤
observe 觀察/listen 監(jiān)聽(tīng),
build 構(gòu)建/publish 發(fā)布
input 輸入/output 輸出,
encode 編碼/decode 解碼
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮
pack 打包/unpack 解包,
parse 解析/emit 生成
connect 連接/disconnect 斷開(kāi),
send 發(fā)送/receive 接收
download 下載/upload 上傳,
refresh 刷新/synchronize 同步
update 更新/revert 復(fù)原,
lock 鎖定/unlock 解鎖
check out 簽出/check in 簽入,
submit 提交/commit 交付
push 推/pull 拉,
expand 展開(kāi)/collapse 折疊
begin 起始/end 結(jié)束,
start 開(kāi)始/finish 完成
enter 進(jìn)入/exit 退出,
abort 放棄/quit 離開(kāi)
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集
##### 3) 常量命名全部大寫(xiě)，單詞間用下劃線隔開(kāi)叙赚，力求語(yǔ)義表達(dá)完整清楚老客，不要嫌名字長(zhǎng)。
正例： `MAX_STOCK_COUNT`
反例： `MAX_COUNT`
#### 1.5.2 代碼格式
##### 1) 使用 2 個(gè)空格進(jìn)行縮進(jìn)
正例：
if (x < y) {
x += 10;
} else {
x += 1;
}
##### 2) 不同邏輯震叮、不同語(yǔ)義胧砰、不同業(yè)務(wù)的代碼之間插入一個(gè)空行分隔開(kāi)來(lái)以提升可讀性。
> 說(shuō)明：任何情形苇瓣，沒(méi)有必要插入多個(gè)空行進(jìn)行隔開(kāi)尉间。
#### 1.5.3 字符串
統(tǒng)一使用單引號(hào)(‘)，不使用雙引號(hào)(“)击罪。這在創(chuàng)建 HTML 字符串非常有好處：
正例:
let str = 'foo';
let testDiv = '<div id="test"></div>';
反例:
let str = 'foo';
let testDiv = "<div id='test'></div>";
#### 1.5.4 對(duì)象聲明
##### 1)使用字面值創(chuàng)建對(duì)象
正例： `let user = {};`
反例： `let user = new Object();`
##### 2) 使用字面量來(lái)代替對(duì)象構(gòu)造器
正例：
var user = {
age: 0,
name: 1,
city: 3
};
反例：
var user = new Object();
user.age = 0;
user.name = 0;
user.city = 0;
#### 1.5.5 使用 ES6,7
必須優(yōu)先使用 ES6,7 中新增的語(yǔ)法糖和函數(shù)乌妒。這將簡(jiǎn)化你的程序，并讓你的代碼更加靈活和可復(fù)用外邓。
> 必須強(qiáng)制使用 ES6, ES7 的新語(yǔ)法，比如箭頭函數(shù)古掏、await/async 损话， 解構(gòu)， let 槽唾， for…of 等等
#### 1.5.6 括號(hào)
下列關(guān)鍵字后必須有大括號(hào)（即使代碼塊的內(nèi)容只有一行）：if, else, for, while, do, switch, try, catch, finally, with丧枪。
正例：
if (condition) {
doSomething();
}
反例：
if (condition) doSomething();
#### 1.5.7 undefined 判斷
永遠(yuǎn)不要直接使用 undefined 進(jìn)行變量判斷；使用 typeof 和字符串’undefined’對(duì)變量進(jìn)行判斷庞萍。
正例：
if (typeof person === 'undefined') {
...
}
反例：
if (person === undefined) {
...
}
#### 1.5.8 條件判斷和循環(huán)最多三層
條件判斷能使用三目運(yùn)算符和邏輯運(yùn)算符解決的拧烦，就不要使用條件判斷，但是謹(jǐn)記不要寫(xiě)太長(zhǎng)的三目運(yùn)算符钝计。如果超過(guò) 3 層請(qǐng)抽成函數(shù)恋博，并寫(xiě)清楚注釋。
#### 1.5.9 this 的轉(zhuǎn)換命名
對(duì)上下文 this 的引用只能使用’self’來(lái)命名
#### 1.5.10 慎用 console.log
因 console.log 大量使用會(huì)有性能問(wèn)題私恬，所以在非 webpack 項(xiàng)目中謹(jǐn)慎使用 log 功能
# 二债沮、Vue 項(xiàng)目規(guī)范
### (一) Vue 編碼基礎(chǔ)
vue 項(xiàng)目規(guī)范以 Vue 官方規(guī)范 （https://cn.vuejs.org/v2/style-guide/） 中的 A 規(guī)范為基礎(chǔ)，在其上面進(jìn)行項(xiàng)目開(kāi)發(fā)本鸣，故所有代碼均遵守該規(guī)范疫衩。
> 請(qǐng)仔仔細(xì)細(xì)閱讀 Vue 官方規(guī)范，切記荣德，此為第一步闷煤。
#### 2.1.1. 組件規(guī)范
##### 1) 組件名為多個(gè)單詞童芹。
組件名應(yīng)該始終是多個(gè)單詞組成（大于等于 2），且命名規(guī)范為`KebabCase`格式鲤拿。
這樣做可以避免跟現(xiàn)有的以及未來(lái)的 HTML 元素相沖突假褪，因?yàn)樗械?HTML 元素名稱(chēng)都是單個(gè)單詞的。
正例：
export default {
name: 'TodoItem'
// ...
};
反例：
export default {
name: 'Todo',
// ...
}
export default {
name: 'todo-item',
// ...
}
##### 2) 組件文件名為 pascal-case 格式
正例：
components/
|- my-component.vue
反例：
components/
|- myComponent.vue
|- MyComponent.vue
##### 3) 基礎(chǔ)組件文件名為 base 開(kāi)頭皆愉，使用完整單詞而不是縮寫(xiě)嗜价。
正例：
components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue
反例：
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue
##### 4) 和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名
正例：
components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）
反例：
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了縮寫(xiě)）
##### 5) 在 Template 模版中使用組件，應(yīng)使用 PascalCase 模式幕庐，并且使用自閉合組件久锥。
正例：
<MyComponent />
<Row><table :column="data"/></Row>
反例：
<my-component /> <row><table :column="data"/></row>
##### 6) 組件的 data 必須是一個(gè)函數(shù)
當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對(duì)象的函數(shù)异剥。 因?yàn)槿绻苯邮且粋€(gè)對(duì)象的話瑟由，子組件之間的屬性值會(huì)互相影響。
正例：
export default {
data () {
return {
name: 'jack'
}
}
}
反例：
export default {
data: {
name: 'jack'
}
}
##### 7) Prop 定義應(yīng)該盡量詳細(xì)
- 必須使用 camelCase 駝峰命名
- 必須指定類(lèi)型
- 必須加上注釋?zhuān)砻髌浜x
- 必須加上 required 或者 default冤寿，兩者二選其一
- 如果有業(yè)務(wù)需要歹苦，必須加上 validator 驗(yàn)證
正例：
props: {
// 組件狀態(tài)，用于控制組件的顏色
status: {
type: String,
required: true,
validator: function (value) {
return [
'succ',
'info',
'error'
].indexOf(value) !== -1
}
},
// 用戶級(jí)別督怜，用于顯示皇冠個(gè)數(shù)
userLevel：{
type: String,
required: true
}
}
##### 8) 為組件樣式設(shè)置作用域
正例：
<template>
<button class="btn btn-close">X</button>
</template>
<style scoped>
.btn-close {
background-color: red;
}
</style>
反例：
<template>
<button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
background-color: red;
}
</style>
##### 9) 如果特性元素較多殴瘦，應(yīng)該主動(dòng)換行。
正例：
<MyComponent foo="a" bar="b" baz="c"
foo="a" bar="b" baz="c"
foo="a" bar="b" baz="c"
/>
反例：
<MyComponent foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c" foo="a" bar="b" baz="c"/>
#### 2.1.2. 模板中使用簡(jiǎn)單的表達(dá)式
組件模板應(yīng)該只包含簡(jiǎn)單的表達(dá)式号杠，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法蚪腋。復(fù)雜表達(dá)式會(huì)讓你的模板變得不那么聲明式。我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么姨蟋，而非如何計(jì)算那個(gè)值屉凯。而且計(jì)算屬性和方法使得代碼可以重用。
正例：
<template>
<p>{{ normalizedFullName }}</p>
</template>
// 復(fù)雜表達(dá)式已經(jīng)移入一個(gè)計(jì)算屬性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
反例：
<template>
<p>
{{
fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}}
</p>
</template>
#### 2.1.3 指令都使用縮寫(xiě)形式
指令推薦都使用縮寫(xiě)形式眼溶，(用 : 表示 v-bind: 悠砚、用 @ 表示 v-on: 和用 # 表示 v-slot:)
正例：
<input
@input="onInput"
@focus="onFocus"
反例：
<input
v-on:input="onInput"
@focus="onFocus"
#### 2.1.4 標(biāo)簽順序保持一致
單文件組件應(yīng)該總是讓標(biāo)簽順序保持為 `
正例：
<template>...</template>
<script>...</script>
<style>...</style>
反例：
<template>...</template>
<style>...</style>
<script>...</script>
#### 2.1.5 必須為 v-for 設(shè)置鍵值 key
#### 2.1.6 v-show 與 v-if 選擇
如果運(yùn)行時(shí)，需要非常頻繁地切換堂飞，使用 v-show 灌旧；如果在運(yùn)行時(shí)，條件很少改變酝静，使用 v-if节榜。
#### 2.1.7 script 標(biāo)簽內(nèi)部結(jié)構(gòu)順序
components > props > data > computed > watch > filter > 鉤子函數(shù)（鉤子函數(shù)按其執(zhí)行順序） > methods
#### 2.1.8 Vue Router 規(guī)范
##### 1) 頁(yè)面跳轉(zhuǎn)數(shù)據(jù)傳遞使用路由參數(shù)
頁(yè)面跳轉(zhuǎn)，例如 A 頁(yè)面跳轉(zhuǎn)到 B 頁(yè)面别智，需要將 A 頁(yè)面的數(shù)據(jù)傳遞到 B 頁(yè)面宗苍，推薦使用 路由參數(shù)進(jìn)行傳參，而不是將需要傳遞的數(shù)據(jù)保存 vuex，然后在 B 頁(yè)面取出 vuex 的數(shù)據(jù)讳窟，因?yàn)槿绻?B 頁(yè)面刷新會(huì)導(dǎo)致 vuex 數(shù)據(jù)丟失让歼，導(dǎo)致 B 頁(yè)面無(wú)法正常顯示數(shù)據(jù)。
正例：
let id = ' 123';
this.$router.push({ name: 'userCenter', query: { id: id } });
##### 2) 使用路由懶加載（延遲加載）機(jī)制
{
path: '/uploadAttachment',
name: 'uploadAttachment',
meta: {
title: '上傳附件'
},
component: () => import('@/view/components/uploadAttachment/index.vue')
},
##### 3) router 中的命名規(guī)范
path丽啡、childrenPoints 命名規(guī)范采用`kebab-case`命名規(guī)范（盡量vue文件的目錄結(jié)構(gòu)保持一致谋右，因?yàn)槟夸洝⑽募际莁kebab-case`补箍，這樣很方便找到對(duì)應(yīng)的文件）
name 命名規(guī)范采用`KebabCase`命名規(guī)范且和component組件名保持一致８闹础（因?yàn)橐３謐eep-alive特性，keep-alive按照component的name進(jìn)行緩存坑雅，所以兩者必須高度保持一致）
// 動(dòng)態(tài)加載
export const reload = [
{
path: '/reload',
name: 'reload',
component: Main,
meta: {
title: '動(dòng)態(tài)加載',
icon: 'icon iconfont'
},
children: [
{
path: '/reload/smart-reload-list',
name: 'SmartReloadList',
meta: {
title: 'SmartReload',
childrenPoints: [
{
title: '查詢',
name: 'smart-reload-search'
},
{
title: '執(zhí)行reload',
name: 'smart-reload-update'
},
{
title: '查看執(zhí)行結(jié)果',
name: 'smart-reload-result'
}
]
},
component: () =>
import('@/views/reload/smart-reload/smart-reload-list.vue')
}
]
}
];
##### 4) router 中的 path 命名規(guī)范
path除了采用`kebab-case`命名規(guī)范以外辈挂，必須以 / 開(kāi)頭，即使是children里的path也要以 / 開(kāi)頭裹粤。如下示例
-
目的：
經(jīng)常有這樣的場(chǎng)景：某個(gè)頁(yè)面有問(wèn)題终蒂，要立刻找到這個(gè)vue文件，如果不用以/開(kāi)頭遥诉，path為parent和children組成的拇泣，可能經(jīng)常需要在router文件里搜索多次才能找到，而如果以/開(kāi)頭矮锈，則能立刻搜索到對(duì)應(yīng)的組件
*
{
path: '/file',
name: 'File',
component: Main,
meta: {
title: '文件服務(wù)',
icon: 'ios-cloud-upload'
},
children: [
{
path: '/file/file-list',
name: 'FileList',
component: () => import('@/views/file/file-list.vue')
},
{
path: '/file/file-add',
name: 'FileAdd',
component: () => import('@/views/file/file-add.vue')
},
{
path: '/file/file-update',
name: 'FileUpdate',
component: () => import('@/views/file/file-update.vue')
}
]
}
### (二) Vue 項(xiàng)目目錄規(guī)范
#### 2.2.1 基礎(chǔ)
vue 項(xiàng)目中的所有命名一定要與后端命名統(tǒng)一霉翔。
比如權(quán)限：后端 privilege, 前端無(wú)論 router , store, api 等都必須使用 privielege 單詞！
#### 2.2.2 使用 Vue-cli 腳手架
使用 vue-cli3 來(lái)初始化項(xiàng)目苞笨，項(xiàng)目名按照上面的命名規(guī)范早龟。
#### 2.2.3 目錄說(shuō)明
目錄名按照上面的命名規(guī)范，其中 components 組件用大寫(xiě)駝峰猫缭，其余除 components 組件目錄外的所有目錄均使用 kebab-case 命名。
src 源碼目錄
|-- api 所有api接口
|-- assets 靜態(tài)資源壹店，images, icons, styles等
|-- components 公用組件
|-- config 配置信息
|-- constants 常量信息猜丹，項(xiàng)目所有Enum, 全局常量等
|-- directives 自定義指令
|-- filters 過(guò)濾器，全局工具
|-- datas 模擬數(shù)據(jù)硅卢，臨時(shí)存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模擬接口射窒，臨時(shí)存放
|-- plugins 插件，全局使用
|-- router 路由将塑，統(tǒng)一管理
|-- store vuex, 統(tǒng)一管理
|-- themes 自定義樣式主題
|-- views 視圖目錄
| |-- role role模塊名
| |-- |-- role-list.vue role列表頁(yè)面
| |-- |-- role-add.vue role新建頁(yè)面
| |-- |-- role-update.vue role更新頁(yè)面
| |-- |-- index.less role模塊樣式
| |-- |-- components role模塊通用組件文件夾
| |-- employee employee模塊
##### 1) api 目錄
- 文件脉顿、變量命名要與后端保持一致。
- 此目錄對(duì)應(yīng)后端 API 接口点寥，按照后端一個(gè) controller 一個(gè) api js 文件艾疟。若項(xiàng)目較大時(shí)，可以按照業(yè)務(wù)劃分子目錄，并與后端保持一致蔽莱。
- api 中的方法名字要與后端 api url 盡量保持語(yǔ)義高度一致性弟疆。
- 對(duì)于 api 中的每個(gè)方法要添加注釋?zhuān)⑨屌c后端 swagger 文檔保持一致。
正例：
后端 url： EmployeeController.java
/employee/add
/employee/delete/{id}
/employee/update
前端： employee.js
// 添加員工
addEmployee: (data) => {
return postAxios('/employee/add', data)
},
// 更新員工信息
updateEmployee: (data) => {
return postAxios('/employee/update', data)
},
// 刪除員工
deleteEmployee: (employeeId) => {
return postAxios('/employee/delete/' + employeeId)
},
##### 2) assets 目錄
assets 為靜態(tài)資源盗冷，里面存放 images, styles, icons 等靜態(tài)資源怠苔，靜態(tài)資源命名格式為 kebab-case
|assets
|-- icons
|-- images
| |-- background-color.png
| |-- upload-header.png
|-- styles
##### 3) components 目錄
此目錄應(yīng)按照組件進(jìn)行目錄劃分，目錄命名為 KebabCase仪糖，組件命名規(guī)則也為 KebabCase
|components
|-- error-log
| |-- index.vue
| |-- index.less
|-- markdown-editor
| |-- index.vue
| |-- index.js
|-- kebab-case
##### 4) constants 目錄
此目錄存放項(xiàng)目所有常量柑司，如果常量在 vue 中使用，請(qǐng)使用 vue-enum 插件(https://www.npmjs.com/package/vue-enum)
目錄結(jié)構(gòu)：
|constants
|-- index.js
|-- role.js
|-- employee.js
例子： employee.js
export const EMPLOYEE_STATUS = {
NORMAL: {
value: 1,
desc: '正常'
},
DISABLED: {
value: 1,
desc: '禁用'
},
DELETED: {
value: 2,
desc: '已刪除'
}
};
export const EMPLOYEE_ACCOUNT_TYPE = {
QQ: {
value: 1,
desc: 'QQ登錄'
},
WECHAT: {
value: 2,
desc: '微信登錄'
},
DINGDING: {
value: 3,
desc: '釘釘?shù)卿?
},
USERNAME: {
value: 4,
desc: '用戶名密碼登錄'
}
};
export default {
EMPLOYEE_STATUS,
EMPLOYEE_ACCOUNT_TYPE
};
##### 5) router 與 store 目錄
這兩個(gè)目錄一定要將業(yè)務(wù)進(jìn)行拆分锅劝，不能放到一個(gè) js 文件里攒驰。
router 盡量按照 views 中的結(jié)構(gòu)保持一致
store 按照業(yè)務(wù)進(jìn)行拆分不同的 js 文件
##### 6) views 目錄
- 命名要與后端、router鸠天、api 等保持一致
- components 中組件要使用 PascalCase 規(guī)則
|-- views 視圖目錄
| |-- role role模塊名
| | |-- role-list.vue role列表頁(yè)面
| | |-- role-add.vue role新建頁(yè)面
| | |-- role-update.vue role更新頁(yè)面
| | |-- index.less role模塊樣式
| | |-- components role模塊通用組件文件夾
| | | |-- role-header.vue role頭部組件
| | | |-- role-modal.vue role彈出框組件
| |-- employee employee模塊
| |-- behavior-log 行為日志log模塊
| |-- code-generator 代碼生成器模塊
#### 2.2.4 注釋說(shuō)明
整理必須加注釋的地方
- 公共組件使用說(shuō)明
- api 目錄的接口 js 文件必須加注釋
- store 中的 state, mutation, action 等必須加注釋
- vue 文件中的 template 必須加注釋?zhuān)粑募^大添加 start end 注釋
- vue 文件的 methods讼育，每個(gè) method 必須添加注釋
- vue 文件的 data, 非常見(jiàn)單詞要加注釋
#### 2.2.5 其他
##### 1) 盡量不要手動(dòng)操作 DOM
因使用 vue 框架，所以在項(xiàng)目開(kāi)發(fā)中盡量使用 vue 的數(shù)據(jù)驅(qū)動(dòng)更新 DOM稠集，盡量（不到萬(wàn)不得已）不要手動(dòng)操作 DOM奶段，包括：增刪改 dom 元素、以及更改樣式剥纷、添加事件等痹籍。
##### 2) 刪除無(wú)用代碼
因使用了 git/svn 等代碼版本工具，對(duì)于無(wú)用代碼必須及時(shí)刪除晦鞋，例如：一些調(diào)試的 console 語(yǔ)句蹲缠、無(wú)用的棄用功能代碼。