前端vue開發規範

2021-10-04 23:51:46 字數 1778 閱讀 9354

1.建議使用vscode(可根據個人開發習慣進行選擇)

2.vscode 使用外掛程式建議

3.使用統一縮排,以tab縮排,乙個tab大小為2個空格

1.變數名,檔名,元件名,檔名等遵循駝峰命名規則:多單詞拼接首字母小寫,如:userinfo、productinfo ;同時遵循語義化規則,能直觀明白意圖,如:getuserinfo;setusername

2.變數宣告(var,let,const),定義常量使用const,定義變數盡量使用let

1.公共元件使用說明

2.各元件中重要函式或者類說明

3.複雜的業務邏輯處理說明

4.已注釋掉的**要說明注釋原因

5.多重 if 判斷語句

6.注釋塊必須以/(至少兩個星號)開頭/,單行注釋使用//

1.使用語義化標籤如section footer header 進行布局頁面結構

2.使用標準html5文件型別宣告

3.使用utf-8 編碼

4.盡量使用比較少的標籤

統一使用"-"連字元

省略值為 0 時的單位

如果 css 可以做到,就不要使用 js

建議並適當縮寫值,提高可讀性

編碼規範

使用es6風格進行編碼

解構賦值

箭頭函式

正確使用模組,如果模組只有乙個輸出值,就使用 export default,如果模組有多個輸出值,就不使用 export default,export default 與普通的 export 不要同時使用

多個非同步操作時使用promise物件進行封裝

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

指令規範

指令有縮寫一律採用縮寫形式

:

class

="classname"

@click=

"getdata"

v-for 迴圈必須加上 key 屬性,在整個 for 迴圈中 key 需要唯一
>

v-for

="(item,index) in list"

:key

="index"

>}li

>

ul>

避免 v-if 和 v-for 同時用在乙個元素上(效能問題)

props 規範

props 定義應該盡量詳細

props:

}

vue 檔案結構

單檔案元件,頂級元素的順序

>

>

>

按照這個順序組織**就可以。注意style只能在最下面,script和template至少要有乙個

多個特性的元素規範

多個特性的元素應該分多行撰寫,每個特性一行。(增強更易讀)

src=

""alt

="vue logo"

>

:data

="data"

:class

="name"

>

**使用vue-cli作為腳手架搭建vue專案,利用vue全家桶進行開發,修改src目錄如下

views檔案目錄

vue前端開發規範

建議使用統一開發工具vscode 使用統一縮排,以tab縮排 注釋規範主要是作者規範和函式規範。作者規範 author date 2020 06 01 11 58 32 lasteditors 函式規範 description author date 2020 06 08 10 57 39 para...

前端開發規範

前端開發 lang zh cn name renderer content webkit 錯誤示例 body html dom 上面的 會導致一下問題 names 2 插入頁面後,推薦的angularjs寫法 3.4.4 jquey呼叫angularjs的方法 思路 取得angularjs作用域下的...

前端開發規範

1.變數與函式命名 駝峰式 2.元件命名 首字母大寫駝峰式 3.常量命名 字母大寫,單詞間用下劃線分隔 4.優先使用箭頭函式,如果只有乙個引數,也必須function 5.使用模板字串取代連線字串,www.name com 改為www.com 6.宣告變數使用let或const,結束後加分號。7.對...