3 流程規(guī)范

3.1. 開(kāi)發(fā)流程

前端開(kāi)發(fā)流程圖.png

3.2. git工作流程

git工作流程-2.png

git commit 規(guī)范：

 'build', //構(gòu)建相關(guān)
  'ci', // 自動(dòng)化流程配置相關(guān)
  'chore',// 構(gòu)建過(guò)程或輔助工具的變動(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)部署

手動(dòng)部署流程圖.png

本地部署流程

1、使用webpack對(duì)項(xiàng)目進(jìn)行打包 npm run build

2、將生成的dist文件夾傳輸?shù)絥ginx代理的文件夾中。

3.3.2 自動(dòng)部署

自動(dòng)部署流程圖.png

jenkins構(gòu)建流程

1、首先, Jenkins從Gitlab或Github等git倉(cāng)庫(kù)拉取項(xiàng)目代碼

2、對(duì)于前端項(xiàng)目使用npm install 下載依賴(lài)

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ù)交付

CI_CD流程圖.png

CI/CD 的具體流程

1、在代碼提交之后，CI 系統(tǒng)會(huì)自動(dòng)通過(guò) webhook 檢測(cè)到代碼變更，自動(dòng)觸發(fā) CI 流程。

2、然后會(huì)進(jìn)行靜態(tài)代碼檢測(cè)，通常是進(jìn)行一些快速的錯(cuò)誤檢查過(guò)程，比如語(yǔ)法檢查，如果有錯(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ì)元素為抽象出來(lái)的最底層的設(shè)計(jì)元素，包括標(biāo)準(zhǔn)色、尺寸、文字、邊距、間距、圓角、動(dòng)畫(huà)等?；A(chǔ)設(shè)計(jì)元素是頁(yè)面展示的基礎(chǔ)，決定了我們項(xiàng)目頁(yè)面的基調(diào)。因?yàn)槠湓谧畹讓樱岳碚撋蠎?yīng)該是在前端開(kāi)始開(kāi)發(fā)項(xiàng)目前就已經(jīng)確定好內(nèi)容?；A(chǔ)設(shè)計(jì)元素規(guī)范的質(zhì)量直接影響了后續(xù)前端開(kāi)發(fā)的效率。

下圖列舉了基礎(chǔ)設(shè)計(jì)規(guī)范的具體內(nèi)容，主要包括標(biāo)準(zhǔn)色、文字、圓角、邊距、間距和動(dòng)畫(huà)：

設(shè)計(jì)元素規(guī)范.drawio.png

4.3 后臺(tái)管理界面規(guī)范

后臺(tái)管理頁(yè)面規(guī)范是基于elementUI設(shè)計(jì)和設(shè)計(jì)元素規(guī)范的基礎(chǔ)上，定制后臺(tái)管理界面規(guī)范，是為了統(tǒng)一后臺(tái)管理界面樣式，保持一種統(tǒng)一對(duì)外輸出界面。提升用戶(hù)視覺(jué)體驗(yàn)。主要包括layout 主題 和頁(yè)面元素組件設(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、頁(yè)面元素組件

頁(yè)面邊距: 15px

頁(yè)面顏色: #f7f7f7

表單：尺寸：默認(rèn)/40px

間距：8px

提交/搜索按鈕：type：primary

提交按鈕帶加載狀態(tài)：loading

表格: 樣式：帶邊框，默認(rèn)左對(duì)齊，帶加載狀態(tài)

當(dāng)內(nèi)容過(guò)長(zhǎng)被隱藏時(shí)顯示tip：show-overflow-tooltip

操作按鈕：type：text/primary 尺寸：small/32px 間距：4px 刪除按鈕：type：danger

分頁(yè)： 樣式：顯示總條數(shù)，上一頁(yè)，下一頁(yè)，帶背景，前往頁(yè)數(shù)

交互：Dialog 對(duì)話(huà)框：禁止點(diǎn)擊空白處關(guān)閉彈框。

Input 輸入框: 默認(rèn)加上 clearable屬性，可清空。

Select 選擇器：接口獲取的數(shù)據(jù)比較多時(shí)，可以利用搜索功能快速查找選項(xiàng)。加上 clearable屬性，可清空。