目的及文檔說明 規(guī)范的目的是為了統(tǒng)一編碼風(fēng)格規(guī)范，提高代碼質(zhì)量和可讀性，增強(qiáng)團(tuán)隊(duì)協(xié)作開發(fā)效率（參考騰訊、百度、字節(jié)跳動(dòng)，同時(shí)參考前端代碼規(guī)范 --代碼規(guī)范篇 - 掘金 (juejin.cn) [1] 等前端規(guī)范）
HTML 規(guī)范 2.1.語義化標(biāo)簽 標(biāo)簽語義化，切忌清一色的 div 元素。列表可以使用 ul li，文字使用 p 標(biāo)簽，標(biāo)題使用 h* 標(biāo)簽，等等。 HTML5 推出了語義化的標(biāo)簽，建議使用：section，aside，header，footer，article，等 HTML5 布局標(biāo)簽。
2.2.自定義標(biāo)簽 使用自閉標(biāo)簽的寫法，如下
<my-owner-components />2.3. 多特性分行寫 <template><scroll ref ="scrollWrap" class ="home-scroll-warp" :data ="homeData" :pullDownRefresh ="true" :pullUpLoad ="true" pullingDown ="pullingDownGetNewData" pullingUp ="pullingUpGetMore" /template> 2.4. 使用表達(dá)式 在模版中使用表達(dá)式，復(fù)雜情況使用計(jì)算屬性或函數(shù)，如下：
<template><div v-show ="getLimitData(data)" > </div > /template> / 反例 div>/template> 2.5.代碼嵌套 根據(jù)元素嵌套規(guī)范，每個(gè)塊狀元素獨(dú)立一行，內(nèi)聯(lián)元素可選，如下：
// 第一種 <h1 > </h1 > <p > </p > /div> span><span > </span > /p> / 第二種 h1><p > </p > /div> span><span > </span > /p> 2.6.避免重復(fù) 避免過多重復(fù)代碼，如果超過三行類似的代碼，配置數(shù)據(jù)再循環(huán)遍歷
2.7.活用 v-show, v-if (不要同時(shí)出現(xiàn)在一個(gè)標(biāo)簽上） v-show 不會(huì)改變 dom 樹，也就是說不會(huì)導(dǎo)致重排。 v-if 會(huì)改變 dom 樹，會(huì)導(dǎo)致重排。 2.7 注釋規(guī)范 <!-- 單行注釋 --><div class ="test" > <!-- 組件注釋 --> <gdCustomTable ref ="gdCustomTable" /> <!-- 其他注釋 --> <div > ...</div > </div > <div > 內(nèi)容</div > CSS 規(guī)范 推薦使用 UnoCSS 引擎進(jìn)行原子化 CSS 開發(fā) 推薦使用 scss 預(yù)編譯 由于樣式的情況比較多也比較復(fù)雜 做出如下規(guī)范
3.1.避免 避免使用標(biāo)簽選擇器。因?yàn)樵? Vue 中，特別是在局部組件，使用標(biāo)簽選擇器效率特別低，損耗性能，建議需要的情況，直接定義 class；
非特殊情況下，禁止使用 ID 選擇器定義樣式。有 JS 邏輯的情況除外；
避免大量的嵌套規(guī)則，控制在 3 級(jí)之內(nèi)，對(duì)于超過 4 級(jí)的嵌套，考慮重寫或新建子項(xiàng)；
避免使用 ID 選擇器及全局標(biāo)簽選擇器防止污染全局樣式；
3.2.推薦使用 提取公用樣式進(jìn) assets 文件 styles 里，按模塊/功能區(qū)分； |assets/* 推薦 */ /* 不推薦 */ 使用 scoped 關(guān)鍵字，約束樣式生效的范圍 <style lang="scss" scoped>/style> 使用變量 可復(fù)用屬性盡量抽離為頁面變量，易于統(tǒng)一維護(hù) /* css */ color : red;/* scss */ $color : red;color : $color;3.3.書寫順序 CSS 屬性書寫順序：先決定定位寬高顯示大小，再做局部細(xì)節(jié)修飾，推薦順序（可以提升瀏覽器渲染 dom 的性能）：
定位屬性(或顯示屬性，display)->寬高屬性->邊距屬性(margin, padding)->字體，背景，顏色等，修飾屬性的定義，這樣定義為了更好的可讀性，讓別人只要看一眼就能在腦海中浮現(xiàn)最終顯示的效果。
布局定位屬性：display / position / float / clear / visibility / overflow
自身屬性：width / height / margin / padding / border / background
文本屬性：color / font / text-decoration / text-align / vertical-align / white- space / break-word
其他屬性（CSS3）：content / cursor / border-radius / box-shadow / text-shadow / background:linear-gradient … 以下給出常用的定義示例：
.class-name {position : fixed;100 px;0 ;0 ;0 ;100 %;100 %;10 px;10 px;14 px;000 ;2 px;1.42 ;3.4.樣式覆蓋 組件內(nèi)部需要覆蓋 UI 框架樣式，必須在最外層組件加類名
3.5.注釋規(guī)范 以/ 注釋內(nèi)容 /格式注釋，前后空格，嵌套子類需要一個(gè)回車分割開
/* 注釋內(nèi)容 */ width : 20 px;/* 這里需要換行 */ color : blueJS 規(guī)范 4.1.在 vue-cli 腳手架使用架自帶的指向 src 開發(fā)目錄的 '@' 符號(hào)引入文件資源； 4.2.使用計(jì)算屬性規(guī)避 v-if 和 v-for 用在一起； 4.3.統(tǒng)一使用單引號(hào)； 4.4.堅(jiān)持單一原則，函數(shù)內(nèi)僅做該函數(shù)應(yīng)該做的，盡量避免通過傳入標(biāo)記控制不同行為； 4.5.優(yōu)先考慮三目運(yùn)算符，但謹(jǐn)記不要寫超過 3 層的三目運(yùn)算符； 4.6.對(duì)于無用代碼必須及時(shí)刪除，例如：一些調(diào)試的 console 語句、無用的棄用功能代碼，如在開發(fā)分支可提交打印代碼，但要注意打印格式，如下： // 推薦 console .log('路由' : 文件路由, '打印簡(jiǎn)述' : 打印數(shù)據(jù))// 不推薦 console .log(打印數(shù)據(jù), '1111' )4.7.條件語句避免負(fù)面條件，特指調(diào)用某一函數(shù)； // 不推薦 if (!isUserNotBlocked(user)) {// ... 4.8.請(qǐng)求數(shù)據(jù)的方法，推薦使用 async await， 需注意錯(cuò)誤捕捉 /**@param req 接口api@param params 參數(shù) const loading = ref(false )async httpInterface(req, params) {try {true const res = await req(params)return Promise .resolve(res)catch (e) {return Promise .reject(e)finally {false 4.9.注釋規(guī)范 單行注釋：雙斜線后應(yīng)跟空格，且縮進(jìn)與上下文的代碼保持一致；或在行尾注釋，在行尾依然需要左右空格； // 一些說明... const userID = 24 ;const userID = 12 ; // 一些說明 多行注釋：一般用于注釋難以理解的、可能存在錯(cuò)誤的、邏輯強(qiáng)的代碼，且縮進(jìn)一致； /* const a = 1 ；函數(shù)注釋：寫明傳入?yún)?shù)名稱，類型，推薦完整注釋以下格式； /**@Description 加入購(gòu)物車@Author lint @Date 2020-09-08@param {Number} goodId 商品id@param {Array<Number>} specs sku規(guī)格@param {Number} amount 數(shù)量@param {String} remarks 備注@returns <Promise> 購(gòu)物車信息 (goodId, specs, amount, remarks ) => {return axios.post('***' , { goodId, specs, amount, remarks })命名規(guī)范 5.1.目錄命名 文件目錄命名 按照小駝峰命名，首字母小寫（如：projectName） 組件目錄命名 目錄命名為小駝峰，公用組件加上 gd 前綴，如： |components5.2.文件命名 按照小駝峰命令，英文單詞過長(zhǎng)或超出 2 個(gè)以上，可縮略至前四位，如
// 業(yè)務(wù)統(tǒng)計(jì) // 縮略 5.3.圖片命名 圖片使用 img，圖標(biāo)使用 icon
5.4.方法命名 按照小駝峰命名法，可使用常見動(dòng)詞約定； can 判斷是否可執(zhí)行某個(gè)動(dòng)作，函數(shù)返回一個(gè)布爾值。true：可執(zhí)行；false：不可執(zhí)行has 判斷是否含有某個(gè)值， 函數(shù)返回一個(gè)布爾值。- true：含有此值；false：不含有此值is： 判斷是否為某個(gè)值，函數(shù)返回一個(gè)布爾值。true：為某個(gè)值；false：不為某個(gè)值get： 獲取某個(gè)之，函數(shù)返回一個(gè)非布爾值set： 設(shè)置某個(gè)值，無返回值、返回是否設(shè)置成功或者返回鏈?zhǔn)綄?duì)象 load 加載某些數(shù)據(jù),無返回值或者返回是否加載完成的結(jié)果語義化英文命名，僅組件內(nèi)部使用方法前加上_（下劃線）區(qū)分，如下 // 公共方法的定義，可以提供外面使用 // 私有方法，下劃線定義，僅供組件內(nèi)使用。多單詞，注意與系統(tǒng)名字沖突！ 引入組件：首字母大寫的駝峰法命名。推薦使用 ES6 的方式引入 import Article from 'xxx' import ArticleDetail from 'xxx' 變量：使用駝峰式命名，優(yōu)先使用let、const、避免使用var let userName = ref('luffy' )const userInfo = reactive({name : 'luffy' const Api = {'***' , // 獲取事項(xiàng)分類 '***' ,, // 獲取事項(xiàng)列表 5.5.常用詞 簡(jiǎn)寫 說明 get\set 取值\給值 add\remove 增加\移除 show\hide 顯示\隱藏 view 查看 browse 瀏覽 edit 修改 save 保存 delete 刪除 find 查詢 undo 撤銷 redo 重做 clean 清除 index 索引 observe 觀察 send\receive 發(fā)送\接收 refresh\synchronize 刷新\同步
數(shù)據(jù)類型/標(biāo)簽 簡(jiǎn)寫后綴 object obj array arr json json function fn message msg button btn
5.6.樣式命名 class 命名以小寫字母開頭，小寫字母、中劃線和數(shù)字組成。不建議使用駝峰法命名 class 的屬性。以下是一些常用到的 class 的名字：
列表項(xiàng): .xx-list-item; Git 規(guī)范 master 分支作為主干分支，及生產(chǎn)環(huán)境，多人協(xié)同開發(fā)時(shí)一定要按照分支規(guī)范去建立和提交分支，具體如下：
master 分支：主干分支，與線上正式版本保持一致 dev 分支：開發(fā)分支，始終與 master 分支保持一致 feature 分支：版本開發(fā)分支（多個(gè)） test 分支：版本測(cè)試分支（多個(gè)，對(duì)應(yīng) feature） 6.1.分支關(guān)系
6.2.使用說明 多人在同一個(gè)分支上開發(fā)時(shí)，分支名稱可按照版本號(hào)命名，注意記錄版本號(hào)對(duì)應(yīng)功能點(diǎn)； dev 分支可提交打印說明，注意打印說明格式，其他分支不可提交； 提交時(shí)盡量書寫提交代碼修改的地方或功能，不要提交無用信息。
400 186 1886
