3 流程規(guī)范
3.1. 開發(fā)流程
3.2. git工作流程
git commit 規(guī)范：
'build', //構(gòu)建相關(guān)
'ci', // 自動(dòng)化流程配置相關(guān)
'chore',// 構(gòu)建過程或輔助工具的變動(dòng)
'docs',// 文檔相關(guān)
'feat', // 新增功能
'fix',// 修復(fù)bug
'perf',// 性能相關(guān)
'refactor',// 重構(gòu)
'revert',// 回滾
'style',// 修改代碼格式岔激，不影響代碼邏輯（注意,不是樣式的修改）
'test' // 測(cè)試相關(guān)
3.3. 部署流程
3.3.1 手動(dòng)部署
1紫新、使用webpack對(duì)項(xiàng)目進(jìn)行打包 npm run build
2朋腋、將生成的dist文件夾傳輸?shù)絥ginx代理的文件夾中惯吕。
3.3.2 自動(dòng)部署
1、首先, Jenkins從Gitlab或Github等git倉庫拉取項(xiàng)目代碼
2、對(duì)于前端項(xiàng)目使用npm install 下載依賴
3、使用webpack對(duì)項(xiàng)目進(jìn)行打包 npm run build
4倍试、將生成的dist文件夾打包傳輸?shù)揭渴鸬倪h(yuǎn)程服務(wù)器
5、構(gòu)建完成會(huì)將構(gòu)建信息推送相關(guān)人的郵箱
3.3.3 CI/CD 持續(xù)集成和持續(xù)交付
1蛋哭、在代碼提交之后县习，CI 系統(tǒng)會(huì)自動(dòng)通過 webhook 檢測(cè)到代碼變更，自動(dòng)觸發(fā) CI 流程具壮。
2准颓、然后會(huì)進(jìn)行靜態(tài)代碼檢測(cè)，通常是進(jìn)行一些快速的錯(cuò)誤檢查過程棺妓，比如語法檢查攘已，如果有錯(cuò)誤就直接終止流程。
3怜跑、在進(jìn)行完基礎(chǔ)的代碼檢查之后样勃，會(huì)進(jìn)入自動(dòng)構(gòu)建環(huán)節(jié)，比如要進(jìn)行代碼效驗(yàn)性芬、代碼壓縮峡眶、自動(dòng)化測(cè)試等操作。
4植锉、在構(gòu)建完成之后辫樱，會(huì)進(jìn)行一些回歸測(cè)試、自動(dòng)化測(cè)試俊庇、集成測(cè)試以及壓力測(cè)試等狮暑。
5鸡挠、在完成了必要的測(cè)試工作之后，就可以將代碼部署到對(duì)應(yīng)的環(huán)境中搬男，在部署到生產(chǎn)環(huán)境之前拣展，應(yīng)該先部署在測(cè)試環(huán)境中再次驗(yàn)證。在部署到生產(chǎn)環(huán)境應(yīng)使用對(duì)應(yīng)的部署策略：藍(lán)綠部署缔逛、灰度部署等备埃。
6、在部署階段褐奴，我們還要對(duì)項(xiàng)目的各個(gè)指標(biāo)進(jìn)行監(jiān)控按脚，出現(xiàn)異常及時(shí)做回滾操作。
4 UI設(shè)計(jì)規(guī)范
4.1 elementUI 設(shè)計(jì)原則
4.2 設(shè)計(jì)元素規(guī)范
基礎(chǔ)設(shè)計(jì)元素為抽象出來的最底層的設(shè)計(jì)元素歉糜，包括標(biāo)準(zhǔn)色乘寒、尺寸、文字匪补、邊距、間距烂翰、圓角夯缺、動(dòng)畫等「使ⅲ基礎(chǔ)設(shè)計(jì)元素是頁面展示的基礎(chǔ)踊兜，決定了我們項(xiàng)目頁面的基調(diào)。因?yàn)槠湓谧畹讓蛹烟瘢岳碚撋蠎?yīng)該是在前端開始開發(fā)項(xiàng)目前就已經(jīng)確定好內(nèi)容捏境。基礎(chǔ)設(shè)計(jì)元素規(guī)范的質(zhì)量直接影響了后續(xù)前端開發(fā)的效率毁葱。
下圖列舉了基礎(chǔ)設(shè)計(jì)規(guī)范的具體內(nèi)容垫言，主要包括標(biāo)準(zhǔn)色、文字倾剿、圓角筷频、邊距、間距和動(dòng)畫：
4.3 后臺(tái)管理界面規(guī)范
后臺(tái)管理頁面規(guī)范是基于elementUI設(shè)計(jì)和設(shè)計(jì)元素規(guī)范的基礎(chǔ)上前痘，定制后臺(tái)管理界面規(guī)范凛捏，是為了統(tǒng)一后臺(tái)管理界面樣式，保持一種統(tǒng)一對(duì)外輸出界面芹缔。提升用戶視覺體驗(yàn)坯癣。主要包括layout 主題 和頁面元素組件設(shè)計(jì)。
1最欠、layout主題：
菜單欄：
$menuText 菜單文字顏色
$menuActiveText 菜單文字選中顏色
$menuBackground 菜單背景
$menuHover 菜單鼠標(biāo)懸停
$subMenuBackground子菜單背景
$subMenuHover 子菜單鼠標(biāo)懸停
$sideBarWidth 菜單寬度
導(dǎo)航欄：
$navbarBackground 導(dǎo)航欄背景顏色
$navbarColor 導(dǎo)航欄字體顏色
$navbarHeight 導(dǎo)航欄高度
2示罗、頁面元素組件
頁面邊距: 15px
頁面顏色: #f7f7f7
表單：尺寸：默認(rèn)/40px
間距：8px
提交/搜索按鈕：type：primary
提交按鈕帶加載狀態(tài)：loading
表格: 樣式：帶邊框蓬网，默認(rèn)左對(duì)齊，帶加載狀態(tài)
當(dāng)內(nèi)容過長被隱藏時(shí)顯示tip：show-overflow-tooltip
操作按鈕：type：text/primary 尺寸：small/32px 間距：4px 刪除按鈕：type：danger
分頁： 樣式：顯示總條數(shù)鹉勒，上一頁帆锋，下一頁，帶背景禽额，前往頁數(shù)
交互：Dialog 對(duì)話框：禁止點(diǎn)擊空白處關(guān)閉彈框锯厢。
Input 輸入框: 默認(rèn)加上 clearable屬性，可清空脯倒。
Select 選擇器：接口獲取的數(shù)據(jù)比較多時(shí)实辑，可以利用搜索功能快速查找選項(xiàng)。加上 clearable屬性藻丢，可清空剪撬。
