前端規(guī)范
1婚瓜、命名規(guī)范
1.1 目錄命名
全部采用小寫方式腐泻， 以中劃線分隔，有復(fù)數(shù)結(jié)構(gòu)時(shí)毁兆，要采用復(fù)數(shù)命名法主到， 縮寫不用復(fù)數(shù)茶行。
例： scripts/styles/components/images
【特殊】：vue components 中組件中使用 kebab-case 或 pascal贸呢。
例： TimePicker 或 time-picker
1.2 JS、CSS拢军、HTML、PNG文件命名
采用小寫方式怔鳖， 以中劃線分隔.
例： assets/images/login-bg.png
1.3 命名嚴(yán)謹(jǐn)性
代碼中的命名嚴(yán)禁使用拼音與英文混合的方式茉唉，更不允許直接使用中文的方式。 說明：正確的 英文拼寫和語法可以讓閱讀者易于理解结执，避免歧義度陆。注意，即使純拼音命名方式也要避免采用
2献幔、HTML規(guī)范(Vue Template同適用)
2.1 HTML類型
推薦使用 HTML5 的文檔類型申明：
（建議使用 text/html 格式的 HTML懂傀。避免使用 XHTML。XHTML 以及它的屬性蜡感，比如 application/xhtml+xml 在瀏覽器中的應(yīng)用支持與優(yōu)化空間都十分有限）蹬蚁。
規(guī)定字符編碼
IE 兼容模式
規(guī)定字符編碼
<!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>
2.2 分塊注釋
在每一個(gè)塊狀元素，列表元素和表格元素后郑兴，加上一對(duì) HTML 注釋犀斋。
2.3 標(biāo)簽語義化
HTML5 中新增很多語義化標(biāo)簽，所以優(yōu)先使用語義化標(biāo)簽情连，避免一個(gè)頁面都是 div 或者 p 標(biāo) 簽叽粹。
例：
<header></header>
<footer></footer>
2.4 縮進(jìn)
縮進(jìn)使用2個(gè)空格(一個(gè)tab)
3 CSS規(guī)范
3.1 命名
必須由英文字母、數(shù)字或“-”下劃線組成却舀，必須以字母開頭虫几，不能為純數(shù)字。設(shè)計(jì)者要用有意義的單詞或縮寫組合來命名選擇符
id采用駝峰命名
scss中的變量挽拔、函數(shù)辆脸、混合采用駝峰命名
3.2 選擇器
3.2.1 css選擇器中避免使用標(biāo)簽名
避免css中出現(xiàn)HTML標(biāo)簽，并且在css選擇器中出現(xiàn)標(biāo)簽名會(huì)存在潛在的問題篱昔。
3.2.2 使用直接子選擇器
如果不寫很通用的每强，需要匹配到DOM末端的選擇器，考慮直接選擇器
no：
.box .content {
font-size: 18px;
}
yes：
.box > .content {
font-size: 18px;
}
3.3 盡量使用縮寫屬性
no：
padding-left: 15px;
font-family: serif;
font-size: 18px;
line-height: 1.6;
yes：
padding: 0 10px 15px 20px;
font: 18px/1.6 serif;
3.4 每個(gè)選擇器及屬性獨(dú)占一行
no：
.box{
width: 100%; height: 80%;
}
yes：
.box {
width: 100%;
height: 80%;
}
3.5 省略0后面的單位
no：
.box {
padding: 0px;
}
yes：
.box {
padding: 0;
}
3.6 避免使用ID選擇器及全部標(biāo)簽選擇器州刽，防止污染全局樣式
no：
#header {
margin: 0;
}
yes：
.header {
margin: 0;
}
4空执、SASS規(guī)范
4.1 編碼
使用UTF-8編碼，每個(gè)SASS文件的第一行必須是定義編碼的@charset "UTF-8";如果沒定義編碼穗椅，很有可能會(huì)出現(xiàn)跨平臺(tái)兼容問題辨绊。
4.2 代碼組織
2.變量聲明;
1.@import;
3.樣式聲明;
$base-font-size: 12px !default;
@import "base/config";
@import "biz/page";
body {
background: #fff;
}
4.3 @import語句
同一個(gè)SASS文件中所有的@import必須放在用一塊，不得分開匹表；
建議使用雙引號(hào)引入SASS文件门坷，至少同一個(gè)項(xiàng)目要保持一致宣鄙；
4.4 變量
變量名必須采用小寫字母，以中劃線分割形式默蚌，不得使用駝峰
no：
$cardColor: #fff;
yes：
$card-color: #fff;
4.5繼承
使用繼承時(shí)冻晤，如果在聲明塊內(nèi)書寫@extend語句，必須在開頭
no：
.box {
color: #fff;
@extend sameStyle;
}
yes：
.box {
@extend sameStyle;
color: #fff;
}
4.6 避免嵌套過多層
將簽到深度限制在3級(jí)绸吸。避免大量的嵌套規(guī)則鼻弧。當(dāng)可讀性收到影響時(shí)
4.7 BEM命名
SASS內(nèi)使用BEM命名時(shí)，請(qǐng)勿使用縮寫與嵌套锦茁；
SASS BEM使用縮寫會(huì)不利于名稱搜索攘轩、排查定位；另外码俩，BEM本來就是為了解決嵌套問題度帮，因此沒必要多此一舉。
no：
.box {
color: #fff;
$__item {
width: 100%;
}
}
yes：
.box {
color: #fff;
}
.box__item {
width: 100%;
}
5稿存、JavaScript規(guī)范
5.1命名
5.1.1 采用小寫駝峰命名 lowerCamelCase笨篷，代碼中的命名均不能以下劃線， 也不能以下劃線或美元符號(hào)結(jié)束
5.1.2 方法名瓣履、參數(shù)名冕屯、成員變量、局部變量都統(tǒng)一使用 lowerCamelCase 風(fēng) 格拂苹，必須遵從駝峰形式安聘；method 方法命名必須是 動(dòng)詞 或者 動(dòng)詞+名詞 形式
增刪改查：add / update / delete / detail / get
其他常用單詞：
附： 函數(shù)方法常用的動(dòng)詞:
get 獲取/set 設(shè)置,
add 增加/remove 刪除,
create 創(chuàng)建/destory 銷毀,
start 啟動(dòng)/stop 停止,
open 打開/close 關(guān)閉,
read 讀取/write 寫入,
load 載入/save 保存,
begin 開始/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 撤銷/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)聽,
build 構(gòu)建/publish 發(fā)布,
input 輸入/output 輸出,
encode 編碼/decode 解碼,
encrypt 加密/decrypt 解密,
compress 壓縮/decompress 解壓縮,
pack 打包/unpack 解包,
parse 解析/emit 生成,
connect 連接/disconnect 斷開,
send 發(fā)送/receive 接收,
download 下載/upload 上傳,
refresh 刷新/synchronize 同步,
update 更新/revert 復(fù)原,
lock 鎖定/unlock 解鎖,
check out 簽出/check in 簽入,
submit 提交/commit 交付,
push 推/pull 拉,
expand 展開/collapse 折疊,
enter 進(jìn)入/exit 退出,
abort 放棄/quit 離開,
obsolete 廢棄/depreciate 廢舊,
collect 收集/aggregate 聚集
5.1.3 常量命名全部大寫，單詞間用下劃線隔開瓢棒，力求語義表達(dá)完整清楚浴韭， 不要嫌名字長
5.2 代碼格式
5.2.1 使用 2 個(gè)空格進(jìn)行縮進(jìn)
5.2.2 不同邏輯、不同語義脯宿、不同業(yè)務(wù)的代碼之間插入一個(gè)空行分隔開來以 提升可讀性
5.3 對(duì)象聲明
5.3.1 使用字面值創(chuàng)建對(duì)象 let user = {};
5.3.2 使用字面量來代替對(duì)象構(gòu)造器 var user = { age: 0, name: 1, city: 3 };
5.5 使用 ES6+
必須優(yōu)先使用 ES6+ 中新增的語法糖和函數(shù)念颈。這將簡化你的程序，并讓你的代碼更加靈活和可復(fù) 用连霉。比如箭頭函數(shù)榴芳、await/async ， 解構(gòu)跺撼， let 窟感， for…of 等等。
5.6括號(hào)
下列關(guān)鍵字后必須有大括號(hào)（即使代碼塊的內(nèi)容只有一行）：if, else, for, while, do, switch, try,catch, finally, with歉井。
5.7 undefined 判斷
永遠(yuǎn)不要直接使用 undefined 進(jìn)行變量判斷柿祈；使用 typeof 和字符串’undefined’對(duì)變量進(jìn)行判斷。if (typeof person === 'undefined') { ... }
5.8 條件判斷和循環(huán)最多三層
條件判斷能使用三目運(yùn)算符和邏輯運(yùn)算符解決的，就不要使用條件判斷躏嚎，但是謹(jǐn)記不要寫太長的 三目運(yùn)算符蜜自。如果超過 3 層請(qǐng)抽成函數(shù)，并寫清楚注釋卢佣。
5.9 this 的轉(zhuǎn)換命名
對(duì)上下文 this 的引用只能使用 ’self’ 來命名重荠。
6 Vue項(xiàng)目規(guī)范
6.1 Vue編碼基礎(chǔ)
vue 項(xiàng)目規(guī)范以 Vue 官方規(guī)范 中的 A 規(guī)范為基礎(chǔ)，在其上面進(jìn)行項(xiàng)目開發(fā)虚茶，故所有代碼均遵守該規(guī)范晚缩。
請(qǐng)仔仔細(xì)細(xì)閱讀 Vue 官方規(guī)范，切記媳危，此為第一步。
6.2 組件規(guī)范
6.2.1 組件名為多個(gè)單詞冈敛。
組件名應(yīng)該始終是多個(gè)單詞組成（大于等于 2）待笑，且命名規(guī)范為KebabCase格式。
這樣做可以避免跟現(xiàn)有的以及未來的 HTML 元素相沖突抓谴，因?yàn)樗械?HTML 元素名稱都是單個(gè)單詞的暮蹂。
6.2.2 組件文件名為 pascal-case 格式
components/
|- my-component.vue
6.2.3 基礎(chǔ)組件文件名為 base 開頭，使用完整單詞而不是縮寫癌压。
components/
|- base-button.vue
|- base-table.vue
|- base-icon.vue
6.2.4 和父組件緊密耦合的子組件應(yīng)該以父組件名作為前綴命名
components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整單詞）
6.2.5 在 Template 模版中使用組件仰泻，應(yīng)使用 PascalCase 模式，并且使用自閉合組件滩届。
<!-- 在單文件組件集侯、字符串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data"/></Row>
6.2.5 組件的 data 必須是一個(gè)函數(shù)
當(dāng)在組件中使用 data 屬性的時(shí)候 (除了 new Vue 外的任何地方)，它的值必須是返回一個(gè)對(duì)象的函數(shù)帜消。因?yàn)槿绻苯邮且粋€(gè)對(duì)象的話棠枉，子組件之間的屬性值會(huì)互相影響。
6.2.7 Prop 定義應(yīng)該盡量詳細(xì)
必須使用 camelCase 駝峰命名
必須指定類型
必須加上注釋泡挺，表明其含義
必須加上 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
}
}
6.2.8 為組件樣式設(shè)置作用域
使用 scoped 設(shè)置作用域
6.3.1 模板中使用簡單的表達(dá)式
組件模板應(yīng)該只包含簡單的表達(dá)式，復(fù)雜的表達(dá)式則應(yīng)該重構(gòu)為計(jì)算屬性或方法媳溺。復(fù)雜表達(dá)式會(huì)讓你的模板變得不那么聲明式月幌。我們應(yīng)該盡量描述應(yīng)該出現(xiàn)的是什么，而非如何計(jì)算那個(gè)值悬蔽。而且計(jì)算屬性和方法使得代碼可以重用飞醉。
6.3.2 指令都使用縮寫形式
指令推薦都使用縮寫形式，(用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:)
6.3.3 標(biāo)簽順序保持一致
<template>...</template>
<script>...</script>
<style>...</style>
6.3.5 必須為 v-for 設(shè)置鍵值 key
6.3.6 v-show 與 v-if 選擇
如果運(yùn)行時(shí)缅帘，需要非常頻繁地切換轴术，使用 v-show ；如果在運(yùn)行時(shí)钦无，條件很少改變逗栽，使用 v-if。
6.3.7 script 標(biāo)簽內(nèi)部結(jié)構(gòu)順序
components > props > data > computed > watch > filter > 鉤子函數(shù)（鉤子函數(shù)按其執(zhí)行順序） > methods
6.4 Vue Router 規(guī)范
6.4.1 頁面跳轉(zhuǎn)數(shù)據(jù)傳遞使用路由參數(shù)
頁面跳轉(zhuǎn)失暂，例如 A 頁面跳轉(zhuǎn)到 B 頁面彼宠，需要將 A 頁面的數(shù)據(jù)傳遞到 B 頁面，推薦使用 路由參數(shù)進(jìn)行傳參弟塞，而不是將需要傳遞的數(shù)據(jù)保存 vuex凭峡，然后在 B 頁面取出 vuex 的數(shù)據(jù)，因?yàn)槿绻?B 頁面刷新會(huì)導(dǎo)致 vuex 數(shù)據(jù)丟失决记，導(dǎo)致 B 頁面無法正常顯示數(shù)據(jù)摧冀。
6.4.2 使用路由懶加載（延遲加載）機(jī)制
{
path: '/upload-attachment',
name: 'upload-attachment',
meta: {
title: '上傳附件'
},
component: () => import('@/view/components/uploadAttachment/index.vue')
},
6.4.3 router 中的命名規(guī)范
path、childrenPoints 命名規(guī)范采用kebab-case命名規(guī)范（盡量vue文件的目錄結(jié)構(gòu)保持一致系宫，因?yàn)槟夸浰靼骸⑽募际莐ebab-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')
}
]
}
];
6.4.4 router 中的 path 命名規(guī)范
path除了采用kebab-case命名規(guī)范以外潮罪，必須以 / 開頭康谆，即使是children里的path也要以 / 開頭。如下示例
經(jīng)常有這樣的場(chǎng)景：某個(gè)頁面有問題嫉到，要立刻找到這個(gè)vue文件秉宿，如果不用以/開頭，path為parent和children組成的屯碴，可能經(jīng)常需要在router文件里搜索多次才能找到描睦，而如果以/開頭，則能立刻搜索到對(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')
}
]
}
6.5 Vue 項(xiàng)目目錄規(guī)范
6.5.1 基礎(chǔ)
vue 項(xiàng)目中的所有命名一定要與后端命名統(tǒng)一导而。
比如權(quán)限：后端 privilege, 前端無論 router , store, api 等都必須使用 privielege 單詞忱叭！
6.5.2 使用 Vue-cli 腳手架
使用 vue-cli3 來初始化項(xiàng)目，項(xiàng)目名按照上面的命名規(guī)范今艺。
6.5.3 目錄說明
目錄名按照上面的命名規(guī)范韵丑，其中 components 組件用大寫駝峰，其余除 components 組件目錄外的所有目錄均使用 kebab-case 命名虚缎。
src 源碼目錄
|-- api 所有api接口
|-- assets 靜態(tài)資源撵彻，images, icons, styles等
|-- components 公用組件
|-- config 配置信息
|-- constants 常量信息钓株，項(xiàng)目所有Enum, 全局常量等
|-- directives 自定義指令
|-- filters 過濾器，全局工具
|-- datas 模擬數(shù)據(jù)陌僵，臨時(shí)存放
|-- lib 外部引用的插件存放及修改文件
|-- mock 模擬接口轴合，臨時(shí)存放
|-- plugins 插件，全局使用
|-- router 路由碗短，統(tǒng)一管理
|-- store vuex, 統(tǒng)一管理
|-- themes 自定義樣式主題
|-- views 視圖目錄
| |-- role role模塊名
| |-- |-- role-list.vue role列表頁面
| |-- |-- role-add.vue role新建頁面
| |-- |-- role-update.vue role更新頁面
| |-- |-- index.less role模塊樣式
| |-- |-- components role模塊通用組件文件夾
| |-- employee employee模塊
6.5.4 api 目錄
- 文件受葛、變量命名要與后端保持一致。
- 此目錄對(duì)應(yīng)后端 API 接口偎谁，按照后端一個(gè) controller 一個(gè) api js 文件总滩。若項(xiàng)目較大時(shí)，可以- 按照業(yè)務(wù)劃分子目錄巡雨，并與后端保持一致闰渔。
- api 中的方法名字要與后端 api url 盡量保持語義高度一致性。
- 對(duì)于 api 中的每個(gè)方法要添加注釋铐望，注釋與后端 swagger 文檔保持一致冈涧。
