規(guī)范目的

為提高團(tuán)隊(duì)協(xié)作效率
便于后臺(tái)人員添加功能及前端后期優(yōu)化維護(hù)
輸出高質(zhì)量的文檔

命名規(guī)范

為了讓大家書(shū)寫(xiě)可維護(hù)的代碼，而不是一次性的代碼
讓團(tuán)隊(duì)當(dāng)中其他人看你的代碼能一目了然
甚至一段時(shí)間時(shí)候后你再看你某個(gè)時(shí)候?qū)懙拇a也能看

css命名規(guī)范

遵循bem命名規(guī)范（bem命名規(guī)范官方文檔）
1）塊：具有獨(dú)立意義的實(shí)體（eg: header、container、menu、form、input）
2) 元素：塊的一部分，沒(méi)有獨(dú)立意義，與塊語(yǔ)義相關(guān)
3）修飾符：塊、元素的修飾標(biāo)志，使用修飾符更改某些外觀、行為

常用Block命名有：
header、container、menu、form、input …
ui開(kāi)頭的為通用基礎(chǔ)組件；ui-btn（按鈕），ui-input（輸入框），ui-cell，ui-panel，ui-actionsheet，feed…
業(yè)務(wù)頁(yè)面結(jié)合功能進(jìn)行組件劃分，獨(dú)立業(yè)務(wù)功能組件，組合頁(yè)面+功能命名，公用業(yè)務(wù)抽象業(yè)務(wù)功能命名；
獨(dú)立業(yè)務(wù)功能組件Block

常用元素Element命名有：
hd（頭部），bd（主體），ft（底部），lt（左側(cè)），ct（中間），rt（右側(cè)），title（頭部標(biāo)題），menu（頭部菜單），list（主體列表,）item（主體列表），icon（左側(cè)圖標(biāo)）, form、input、submit、checkbox、ridio…

常用Modifier命名有：
default（默認(rèn)）、primary（主要）、success（成功）、error（失敗）、danger（危險(xiǎn)）、warning（警告）、disabled（禁用），checked（選中），fixed（固定），lg（大號(hào)），sm（小號(hào)）、xs（超小）、yellow，size-big，color-yellow…

在這里插入代碼片

js命名規(guī)范

普通變量命名：小駝峰命名法

命名必須是跟需求的內(nèi)容相關(guān)的詞
命名是復(fù)數(shù)的時(shí)候需要加s

常量命名：全部大寫(xiě)

使用大寫(xiě)字母和下劃線來(lái)組合命名，下劃線用以分割單詞

const MAX_COUNT = 10 const URL = 'https://www.baidu.com/'

組件命名：

聲明約定：PascalCase (單詞首字母大寫(xiě)命名)
使用約定：kebab-case (短橫線分隔命名)

Home.vue <template><div class="home"><home-header></home-header><div class="home__container"><ui-button></ui-button></div></div> </template> <script> import UiButton from "./ui/button"; import HomeHeader from "./components/Header"; export default {name: "Community",components: {UiButton,HomeHeader } </script>

method 方法命名命名規(guī)范：小駝峰式命名

統(tǒng)一使用動(dòng)詞或者動(dòng)詞+名詞形式
請(qǐng)求數(shù)據(jù)方法，以 data 結(jié)尾
init、refresh 單詞除外，盡量使用常用單詞開(kāi)頭（set、get、go、can、has、is）
壞的命名：go、nextPage、show、open、login
好的命名：jumpPage、openCarInfoDialog、getListData、postFormData
函數(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 聚集

props 命名

聲明的時(shí)候始終使用 camelCase
模板中應(yīng)該始終使用 kebab-case

文件|文件夾命名

名字至少兩個(gè)單詞
盡量是名詞,且使用大駝峰命名法
業(yè)務(wù)模塊開(kāi)頭的單詞就是所屬模塊名字
公共模塊以業(yè)務(wù)語(yǔ)義命名

頁(yè)面規(guī)范

1. 所有頁(yè)面必須進(jìn)行結(jié)構(gòu)化劃分，一個(gè)頁(yè)面由多個(gè)自定義結(jié)構(gòu)塊組成

2. 結(jié)構(gòu)盡可能最小單元化，增強(qiáng)復(fù)用，常見(jiàn)基礎(chǔ)結(jié)構(gòu)有button、 input等；

3. 頁(yè)面結(jié)構(gòu)一律遵循bem命名規(guī)范

4. bem命令的結(jié)構(gòu)，默認(rèn)樣式不需要嵌套，bem結(jié)構(gòu)內(nèi)不允許非bem規(guī)范的class類(lèi)出現(xiàn)

5. b跟e之間通過(guò)__連接，e跟m之間通過(guò)–連接，b、e、m如果是多單詞組合通過(guò)-連接，避免多層嵌套連接.block-ext-ext-ext，最多連接三個(gè)

.block__elem--mod { } .block-ext__elem-ext--mod-ext { }

6. b跟m組合用于擴(kuò)展結(jié)構(gòu)，通過(guò)嵌套覆蓋默認(rèn)結(jié)構(gòu)樣式

<div class=”block block--mod”><div class=“block__elem”>...</div> </div> .block--mod .block__elem { }

7. bem結(jié)構(gòu)內(nèi)部可以包含多個(gè)bem子結(jié)構(gòu)，每個(gè)子結(jié)構(gòu)根據(jù)唯一性原則可直接掛載根Block，避免多層嵌套

<div class=”block”><div class=“block__tp”><div class=“block__tp-lt”><div class=“block__title”></div></div><div class=“block__tp-rt”><div class=“block__item”></div></div></div><div class=“block__ft”><div class=“block__ft-lt”><div class=“block__ft-title”></div></div><div class=“block__ft-rt”><div class=“block__ft-item”></div></div></div> </div> Bad：. block__tp-lt-title、. block__tp-rt-item Good：根據(jù)唯一性原則可優(yōu)化為 . block__title、. block__ item或. block__ft-title、. block__ft-item

8. 最小元素內(nèi)，可直接復(fù)用元素標(biāo)簽

<div class=”block”><div class=“block__elem”><img src=”” /><span></span><i class=””></i></div> </div> . block__elem img { } . block__elem span { } . block__elem i { }

9. 頁(yè)面引入使用組件規(guī)范：

頁(yè)面結(jié)合功能進(jìn)行組件劃分：
通用基礎(chǔ)組件，以u(píng)i-開(kāi)頭命名（ui-btn（按鈕），ui-input（輸入框），ui-cell，ui-panel…）
獨(dú)立業(yè)務(wù)功能組件，以頁(yè)面+功能命名（home-header, home-footer…）
公用業(yè)務(wù)抽象，以業(yè)務(wù)功能命名

Home.vue <template><div class="home"><home-header :options="menuList" :type="state"></home-header><div class="home__container"><home-swiper></home-swiper><home-intro><ui-button></ui-button></home-intro></div><home-footer :options="homeInfo"></home--footer></div> </template> <script> import UiButton from "./ui/button"; import HomeHeader from "./components/Header"; import HomeSwiper from "./components/HomeSwiper "; import HomeIntro from "./components/HomeIntro "; import HomeFooter from "./components/Footer"; export default {name: "Home",components: {UiButton,HomeHeader,HomeSwiper,HomeIntro,HomeFooter } </script>

10. vue 頁(yè)面文件基本結(jié)構(gòu)

<template><div><!--必須在div中編寫(xiě)頁(yè)面--></div> </template> <script> export default {components : {},data () {return {}},mounted() {}，methods: {} } </script> <!--聲明語(yǔ)言，并且添加scoped--> <style lang="scss" scoped> </style>

11. vue組件選項(xiàng)順序

- components- props- data- computed- created- mounted- metods- filter- watch

12. 多個(gè)特性的元素規(guī)范：

分多行撰寫(xiě)，每個(gè)特性一行

<imgsrc="https://vuejs.org/images/logo.png"alt="Vue Logo" > <my-componentfoo="a"bar="b"baz="c" > </my-component>

元素特性的順序：指令放前面，原生屬性放后面

- v-if- v-else-if- v-else- v-show- v-cloak- v-pre- v-once- v-model- v-bind,:- v-on,@- v-html- v-text- is- v-for- key- class- id,ref- name- data-*- src, for, type, href,value,max-length,max,min,pattern- title, alt，placeholder- aria-*, role- required,readonly,disabled

結(jié)構(gòu)化規(guī)范

目錄文件夾及子文件規(guī)范

src 源碼目錄 |-- api 接口，統(tǒng)一管理 |-- assets 靜態(tài)資源，統(tǒng)一管理 |-- components 公用組件，全局文件 |-- filters 過(guò)濾器，全局工具 |-- icons 圖標(biāo)，全局資源 |-- datas 模擬數(shù)據(jù)，臨時(shí)存放 |-- lib 外部引用的插件存放及修改文件 |-- mock 模擬接口，臨時(shí)存放 |-- router 路由，統(tǒng)一管理 |-- store vuex, 統(tǒng)一管理 |-- views 視圖目錄 | |-- staffWorkbench 視圖模塊名 | |-- |-- staffWorkbench.vue 模塊入口頁(yè)面 | |-- |-- indexComponents 模塊頁(yè)面級(jí)組件文件夾 | |-- |-- components 模塊通用組件文件夾

注釋規(guī)范

代碼注釋在一個(gè)項(xiàng)目的后期維護(hù)中顯的尤為重要，所以我們要為每一個(gè)被復(fù)用的組件編寫(xiě)組件使用說(shuō)明，為組件中每一個(gè)方法編寫(xiě)方法說(shuō)明

務(wù)必添加注釋的地方：

公共組件使用說(shuō)明

各組件中重要函數(shù)或者類(lèi)說(shuō)明

復(fù)雜的業(yè)務(wù)邏輯處理說(shuō)明

特殊情況的代碼處理說(shuō)明,對(duì)于代碼中特殊用途的變量、存在臨界值、函數(shù)中使用的 hack、使用了某種算法或思路等需要進(jìn)行注釋描述

多重 if 判斷語(yǔ)句

注釋塊必須以/（至少兩個(gè)星號(hào)）開(kāi)頭/

單行注釋使用//

注釋單獨(dú)一行，不要在代碼后的同一行內(nèi)加注釋 // 姓名 var name = “abc”; 函數(shù)使用說(shuō)明/*** 函數(shù)名稱(chēng)* @param {Object} [title] - 參數(shù)說(shuō)明* @param {String} [columns] - 參數(shù)說(shuō)明* @example 調(diào)用示例**/組件使用說(shuō)明，和調(diào)用說(shuō)明/*** 組件名稱(chēng)* @module 組件存放位置* @desc 組件描述* @author 組件作者* @date 2017年12月05日17:22:43* @param {Object} [title] - 參數(shù)說(shuō)明* @param {String} [columns] - 參數(shù)說(shuō)明* @example 調(diào)用示例* <hbTable :title="title" :columns="columns" :tableData="tableData"></hbTable>**/路由注釋與函數(shù)注釋差不多

源碼風(fēng)格

統(tǒng)一的編碼規(guī)范，可使代碼更易于閱讀，易于理解，易于維護(hù)。
盡量按照 ESLint 格式要求編寫(xiě)代碼

使用 ES6 風(fēng)格編碼

1. 定義變量使用 let ,定義常量使用 const

2. 靜態(tài)字符串一律使用單引號(hào)或反引號(hào)，動(dòng)態(tài)字符串使用反引號(hào)

// badconst a = 'foobar'const b = 'foo' + a + 'bar'// goodconst a = 'foobar'const b = `foo${a}bar`const c = 'foobar'

3. 解構(gòu)賦值

數(shù)組成員對(duì)變量賦值時(shí)，優(yōu)先使用解構(gòu)賦值

// 數(shù)組解構(gòu)賦值const arr = [1, 2, 3, 4]// badconst first = arr[0]const second = arr[1]// goodconst [first, second] = arr

函數(shù)的參數(shù)如果是對(duì)象的成員，優(yōu)先使用解構(gòu)賦值

// 對(duì)象解構(gòu)賦值// badgetFullName(user) {const firstName = user.firstNameconst lastName = user.lastName}// goodgetFullName(obj) {const { firstName, lastName } = obj}

4.拷貝數(shù)組 ：使用擴(kuò)展運(yùn)算符（…）拷貝數(shù)組

const items = [1, 2, 3, 4, 5]// badconst itemsCopy = items// goodconst itemsCopy = [...items]

5.箭頭函數(shù)

需要使用函數(shù)表達(dá)式的場(chǎng)合，盡量用箭頭函數(shù)代替。因?yàn)檫@樣更簡(jiǎn)潔，而且綁定了 this

// badconst self = this;const boundMethod = function(...params) {return method.apply(self, params);}// acceptableconst boundMethod = method.bind(this);// bestconst boundMethod = (...params) => method.apply(this, params);

6.模塊

如果模塊只有一個(gè)輸出值，就使用 export default，如果模塊有多個(gè)輸出值，就不使用 export default，export default 與普通的 export 不要同時(shí)使用

// badimport * as myObject from './importModule'// goodimport myObject from './importModule'

如果模塊默認(rèn)輸出一個(gè)函數(shù)，函數(shù)名的首字母應(yīng)該小寫(xiě)。

function makeStyleGuide() {}export default makeStyleGuide;

如果模塊默認(rèn)輸出一個(gè)對(duì)象，對(duì)象名的首字母應(yīng)該大寫(xiě)。

const StyleGuide = {es6: {}};export default StyleGuide;

組合輸出對(duì)象

util.js const StyleGuide = {es6: {} }; function makeStyleGuide() {} export default {StyleGuide，makeStyleGuide }使用： import Utils from './util'let msg = Utils.StyleGuide Utils.makeStyleGuide()

指令規(guī)范

1. 指令有縮寫(xiě)一律采用縮寫(xiě)形式

// badv-bind:class="{'show-left'：true}"v-on:click="getListData"// good:class="{'show-left'：true}"@click="getListData"

2. v-for 循環(huán)必須加上 key 屬性，在整個(gè) for 循環(huán)中 key 需要唯一

<!-- bad --><ul><li v-for="todo in todos">{{ todo.text }}</li></ul><!-- good --><ul><li v-for="todo in todos" :key="todo.id">{{ todo.text }}</li></ul>

3.避免 v-if 和 v-for 同時(shí)用在一個(gè)元素上（性能問(wèn)題）

以下為兩種解決方案：
將數(shù)據(jù)替換為一個(gè)計(jì)算屬性，讓其返回過(guò)濾后的列表

<!-- bad --><ul><li v-if="user.isActive" v-for="user in users" :key="user.id">{{ user.name }}</li></ul><!-- good --><ul><li v-for="user in activeUsers" :key="user.id">{{ user.name }}</li></ul><script>computed: {activeUsers: function () {return this.users.filter(function (user) {return user.isActive})}}</script>

將 v-if 移動(dòng)至容器元素上 (比如 ul, ol)

<!-- good --><ul v-if="shouldShowUsers"><li v-for="user in users" :key="user.id">{{ user.name }}</li></ul>

其他

1. 避免 this.$parent

2.調(diào)試信息 console.log() debugger 使用完及時(shí)刪除

3.除了三目運(yùn)算，if,else 等禁止簡(jiǎn)寫(xiě)

// badif (true)alert(name);console.log(name)// goodif (true) {alert(name);}console.log(name);

CSS 規(guī)范

通用規(guī)范

統(tǒng)一使用"-"連字符

省略值為 0 時(shí)的單位

如果 CSS 可以做到，就不要使用 JS

建議并適當(dāng)縮寫(xiě)值，提高可讀性，特殊情況除外

聲明應(yīng)該按照下表的順序：左到右，從上到下

// bad.box {font-family: 'Arial', sans-serif;border: 3px solid #ddd;left: 30%;position: absolute;text-transform: uppercase;background-color: #eee;right: 30%;isplay: block;font-size: 1.5rem;overflow: hidden;padding: 1em;margin: 1em;}// good.box {display: block;position: absolute;left: 30%;right: 30%;overflow: hidden;margin: 1em;padding: 1em;background-color: #eee;border: 3px solid #ddd;font-family: 'Arial', sans-serif;font-size: 1.5rem;text-transform: uppercase;}

元素選擇器應(yīng)該避免在 scoped 中出現(xiàn)，大量使用元素選擇器是很慢的。

分類(lèi)的命名方法：

使用單個(gè)字母加上"-"為前綴布局（grid）（.g-）；模塊（module）（.m-）；元件（unit）（.u-）；功能（function）（.f-）；皮膚（skin）（.s-）；狀態(tài)（.z-）。

統(tǒng)一語(yǔ)義理解和命名

sass 規(guī)范

當(dāng)使用 Sass 的嵌套功能的時(shí)候，重要的是有一個(gè)明確的嵌套順序，以下內(nèi)容是一個(gè) SCSS 塊應(yīng)具有的順序。

當(dāng)前選擇器的樣式屬性

父級(jí)選擇器的偽類(lèi)選擇器 (:first-letter, :hover, :active etc)

偽類(lèi)元素 (:before and :after)

父級(jí)選擇器的聲明樣式 (.selected, .active, .enlarged etc.)

用 Sass 的上下文媒體查詢(xún)

子選擇器作為最后的部分

特殊規(guī)范

對(duì)用頁(yè)面級(jí)組件樣式，應(yīng)該是有作用域的
對(duì)于公用組件或者全局組件庫(kù)，我們應(yīng)該更傾向于選用基于 class 的 BEM 策略

<style lang='scss'></style> // bad<!-- 使用 scoped 作用域 --><style lang='scss' scoped></style> // good<!-- 使用 BEM 約定 --><style> // good.c-Button {border: none;border-radius: 2px;}.c-Button--close {background-color: red;}</style>

總結(jié)

以上是生活随笔為你收集整理的Vue开发规范的全部?jī)?nèi)容，希望文章能夠幫你解決所遇到的問(wèn)題。

如果覺(jué)得生活随笔網(wǎng)站內(nèi)容還不錯(cuò)，歡迎將生活随笔推薦給好友。