規范目的

為提高團隊協作效率
便于后臺人員添加功能及前端后期優化維護
輸出高質量的文檔

命名規范

為了讓大家書寫可維護的代碼，而不是一次性的代碼
讓團隊當中其他人看你的代碼能一目了然
甚至一段時間時候后你再看你某個時候寫的代碼也能看

css命名規范

遵循bem命名規范（bem命名規范官方文檔）
1）塊：具有獨立意義的實體（eg: header、container、menu、form、input）
2) 元素：塊的一部分，沒有獨立意義，與塊語義相關
3）修飾符：塊、元素的修飾標志，使用修飾符更改某些外觀、行為

常用Block命名有：
header、container、menu、form、input …
ui開頭的為通用基礎組件；ui-btn（按鈕），ui-input（輸入框），ui-cell，ui-panel，ui-actionsheet，feed…
業務頁面結合功能進行組件劃分，獨立業務功能組件，組合頁面+功能命名，公用業務抽象業務功能命名；
獨立業務功能組件Block

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

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

在這里插入代碼片

js命名規范

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

命名必須是跟需求的內容相關的詞
命名是復數的時候需要加s

常量命名：全部大寫

使用大寫字母和下劃線來組合命名，下劃線用以分割單詞

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

組件命名：

聲明約定：PascalCase (單詞首字母大寫命名)
使用約定：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 方法命名命名規范：小駝峰式命名

統一使用動詞或者動詞+名詞形式
請求數據方法，以 data 結尾
init、refresh 單詞除外，盡量使用常用單詞開頭（set、get、go、can、has、is）
壞的命名：go、nextPage、show、open、login
好的命名：jumpPage、openCarInfoDialog、getListData、postFormData
函數方法常用的動詞：

get 獲取/set 設置, add 增加/remove 刪除 create 創建/destory 移除 start 啟動/stop 停止 open 打開/close 關閉, read 讀取/write 寫入 load 載入/save 保存, create 創建/destroy 銷毀 begin 開始/end 結束, backup 備份/restore 恢復 import 導入/export 導出, split 分割/merge 合并 inject 注入/extract 提取, attach 附著/detach 脫離 bind 綁定/separate 分離, view 查看/browse 瀏覽 edit 編輯/modify 修改, select 選取/mark 標記 copy 復制/paste 粘貼, undo 撤銷/redo 重做 insert 插入/delete 移除, add 加入/append 添加 clean 清理/clear 清除, index 索引/sort 排序 find 查找/search 搜索, increase 增加/decrease 減少 play 播放/pause 暫停, launch 啟動/run 運行 compile 編譯/execute 執行, debug 調試/trace 跟蹤 observe 觀察/listen 監聽, build 構建/publish 發布 input 輸入/output 輸出, encode 編碼/decode 解碼 encrypt 加密/decrypt 解密, compress 壓縮/decompress 解壓縮 pack 打包/unpack 解包, parse 解析/emit 生成 connect 連接/disconnect 斷開, send 發送/receive 接收 download 下載/upload 上傳, refresh 刷新/synchronize 同步 update 更新/revert 復原, lock 鎖定/unlock 解鎖 check out 簽出/check in 簽入, submit 提交/commit 交付 push 推/pull 拉, expand 展開/collapse 折疊 begin 起始/end 結束, start 開始/finish 完成 enter 進入/exit 退出, abort 放棄/quit 離開 obsolete 廢棄/depreciate 廢舊, collect 收集/aggregate 聚集

props 命名

聲明的時候始終使用 camelCase
模板中應該始終使用 kebab-case

文件|文件夾命名

名字至少兩個單詞
盡量是名詞,且使用大駝峰命名法
業務模塊開頭的單詞就是所屬模塊名字
公共模塊以業務語義命名

頁面規范

1. 所有頁面必須進行結構化劃分，一個頁面由多個自定義結構塊組成

2. 結構盡可能最小單元化，增強復用，常見基礎結構有button、 input等；

3. 頁面結構一律遵循bem命名規范

4. bem命令的結構，默認樣式不需要嵌套，bem結構內不允許非bem規范的class類出現

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

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

6. b跟m組合用于擴展結構，通過嵌套覆蓋默認結構樣式

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

7. bem結構內部可以包含多個bem子結構，每個子結構根據唯一性原則可直接掛載根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：根據唯一性原則可優化為 . block__title、. block__ item或. block__ft-title、. block__ft-item

8. 最小元素內，可直接復用元素標簽

<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. 頁面引入使用組件規范：

頁面結合功能進行組件劃分：
通用基礎組件，以ui-開頭命名（ui-btn（按鈕），ui-input（輸入框），ui-cell，ui-panel…）
獨立業務功能組件，以頁面+功能命名（home-header, home-footer…）
公用業務抽象，以業務功能命名

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 頁面文件基本結構

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

11. vue組件選項順序

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

12. 多個特性的元素規范：

分多行撰寫，每個特性一行

<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

結構化規范

目錄文件夾及子文件規范

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

注釋規范

代碼注釋在一個項目的后期維護中顯的尤為重要，所以我們要為每一個被復用的組件編寫組件使用說明，為組件中每一個方法編寫方法說明

務必添加注釋的地方：

公共組件使用說明

各組件中重要函數或者類說明

復雜的業務邏輯處理說明

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

多重 if 判斷語句

注釋塊必須以/（至少兩個星號）開頭/

單行注釋使用//

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

源碼風格

統一的編碼規范，可使代碼更易于閱讀，易于理解，易于維護。
盡量按照 ESLint 格式要求編寫代碼

使用 ES6 風格編碼

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

2. 靜態字符串一律使用單引號或反引號，動態字符串使用反引號

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

3. 解構賦值

數組成員對變量賦值時，優先使用解構賦值

// 數組解構賦值const arr = [1, 2, 3, 4]// badconst first = arr[0]const second = arr[1]// goodconst [first, second] = arr

函數的參數如果是對象的成員，優先使用解構賦值

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

4.拷貝數組 ：使用擴展運算符（…）拷貝數組

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

5.箭頭函數

需要使用函數表達式的場合，盡量用箭頭函數代替。因為這樣更簡潔，而且綁定了 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.模塊

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

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

如果模塊默認輸出一個函數，函數名的首字母應該小寫。

function makeStyleGuide() {}export default makeStyleGuide;

如果模塊默認輸出一個對象，對象名的首字母應該大寫。

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

組合輸出對象

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

指令規范

1. 指令有縮寫一律采用縮寫形式

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

2. v-for 循環必須加上 key 屬性，在整個 for 循環中 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 同時用在一個元素上（性能問題）

以下為兩種解決方案：
將數據替換為一個計算屬性，讓其返回過濾后的列表

<!-- 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 移動至容器元素上 (比如 ul, ol)

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

其他

1. 避免 this.$parent

2.調試信息 console.log() debugger 使用完及時刪除

3.除了三目運算，if,else 等禁止簡寫

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

CSS 規范

通用規范

統一使用"-"連字符

省略值為 0 時的單位

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

建議并適當縮寫值，提高可讀性，特殊情況除外

聲明應該按照下表的順序：左到右，從上到下

// 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;}

元素選擇器應該避免在 scoped 中出現，大量使用元素選擇器是很慢的。

分類的命名方法：

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

統一語義理解和命名

sass 規范

當使用 Sass 的嵌套功能的時候，重要的是有一個明確的嵌套順序，以下內容是一個 SCSS 塊應具有的順序。

當前選擇器的樣式屬性

父級選擇器的偽類選擇器 (:first-letter, :hover, :active etc)

偽類元素 (:before and :after)

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

用 Sass 的上下文媒體查詢

子選擇器作為最后的部分

特殊規范

對用頁面級組件樣式，應該是有作用域的
對于公用組件或者全局組件庫，我們應該更傾向于選用基于 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>

總結

以上是生活随笔為你收集整理的Vue开发规范的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。