VUE的開發規範

2021-09-12 11:14:22 字數 2378 閱讀 3574

vue規範

一、資料夾結構化規範
二、 vue檔案基本結構

>

>

div>

template

>

>

export

default

,data()

},methods:

,mounted()

}script

>

lang

="less"

scoped

>

style

>

三、 注釋規範

1.公共元件使用說明

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

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

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

5.注釋塊必須以/(至少兩個星號)開頭/;

6.單行注釋使用//;

四、 編碼規範

1.使用es6風格編碼原始碼

定義變數使用let ,定義常量使用const

使用export ,import 模組化

2.元件 props 原子化

提供預設值

使用 type 屬性校驗型別

使用 props 之前先檢查該 prop 是否存在

3.避免 this.par

ent4.

謹慎使用

this

.parent 4.謹慎使用 this.

parent

4.謹慎

使用th

is.

五、元件命名規範

有意義的名詞、簡短、具有可讀性

以小寫開頭,採用短橫線分割命名

資料夾命名主要以功能模組代表命名

六、vue 方法放置順序

components 模板

props 父子元件傳遞資訊

data

created

mounted

activited

update

beforerouteupdate

metods

filter

computed

watch

七 html 規範

1.結構順序和視覺順序基本保持一致

2.結構,表現,行為三者分離,避免內聯

3.保持良好的簡潔的樹形結構

4.結構上如果可以並列書寫,就不要巢狀。

如果可以寫成

那麼就不要寫成

5.如果結構已經可以滿足視覺和語義的要求,那麼就不要有額外的冗餘的結構。

比如已經能滿足要求,那麼就不要再寫成

6.乙個標籤上引用的類名不要過多,越少越好。

比如不要出現這種情況:

7.對於乙個語義化的內部標籤,應盡量避免使用的classname。

比如在這樣乙個列表中,li標籤中的itm應去除:

八 css 規範

1.命名規則

使用類選擇器,放棄id選擇器

nec特殊字元:"-「連字元

分類的命名方法:使用單個字母+」-"為字首

命名應簡約而不失語義

2.**格式

選擇器、屬性和值都使用小寫

單行寫完乙個選擇器定義

最後乙個值也以分號結尾

省略值為0時的單位

使用單引號

根據屬性的重要性按順序書寫

注釋格式:/* 注釋文字 */

選擇器順序

請綜合考慮以下順序依據:

從大到小(以選擇器的範圍為準)

從低到高(以等級上的高低為準)

從先到後(以結構上的先後為準)

從父到子(以結構上的巢狀為準)

九 工程師規範

了解產品和設計

提出疑問和見解

技術調研和培訓

預算人力和時間

職責任務

頁面開發

提取剝離

自測聯調

提交驗收

交接說明

總結分享

變更維護

vue開發規範

團隊合作中規範文件是必須的,在多人合作的專案只有定義好一定的編碼規範才會使得開發井井有序,一目了然,下邊將談一下個人對vue使用規範的一些看法。1.元件命名 元件檔名應該始終以單詞大寫開頭 pascalcase 元件名也是以單詞大寫開頭,當多個單詞拼寫成的元件時,單詞開頭大寫,採用駝峰式命名規則。一...

前端vue開發規範

1.建議使用vscode 可根據個人開發習慣進行選擇 2.vscode 使用外掛程式建議 3.使用統一縮排,以tab縮排,乙個tab大小為2個空格 1.變數名,檔名,元件名,檔名等遵循駝峰命名規則 多單詞拼接首字母小寫,如 userinfo productinfo 同時遵循語義化規則,能直觀明白意圖...

vue前端開發規範

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