vue的風格指南(強烈推薦)


1、組件文件

只要有能夠拼接文件的構建系統,就把每個組件單獨分成文件。

當你需要編輯一個組件或查閱一個組件的用法時,可以更快速的找到它。

 

2、單文件組件文件的大小寫

單文件組件的文件名應該要么始終是單詞大寫開頭 (PascalCase),要么始終是橫線連接 (kebab-case)。

單詞大寫開頭對於代碼編輯器的自動補全最為友好,因為這使得我們在 JS(X) 和模板中引用組件的方式盡可能的一致。然而,混用文件命名方式有的時候會導致大小寫不敏感的文件系統的問題,這也是橫線連接命名同樣完全可取的原因。

 

3、礎組件名

應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭,比如 BaseApp 或 V

 

4、單例組件名

只應該擁有單個活躍實例的組件應該以 The 前綴命名,以示其唯一性。

這不意味着組件只可用於一個單頁面,而是每個頁面只使用一次。這些組件永遠不接受任何 prop,因為它們是為你的應用定制的,而不是它們在你的應用中的上下文。如果你發現有必要添加 prop,那就表明這實際上是一個可復用的組件,只是目前在每個頁面里只使用一次。

 

5、緊密耦合的組件名

和父組件緊密耦合的子組件應該以父組件名作為前綴命名。

如果一個組件只在某個父組件的場景下有意義,這層關系應該體現在其名字上。因為編輯器通常會按字母順序組織文件,所以這樣做可以把相關聯的文件排在一起。

 

6、組件名中的單詞順序

組件名應該以高級別的 (通常是一般化描述的) 單詞開頭,以描述性的修飾詞結尾。

 

7、自閉合組件

在單文件組件、字符串模板和 JSX 中沒有內容的組件應該是自閉合的——但在 DOM 模板里永遠不要這樣做。

自閉合組件表示它們不僅沒有內容,而且刻意沒有內容。其不同之處就好像書上的一頁白紙對比貼有“本頁有意留白”標簽的白紙。而且沒有了額外的閉合標簽,你的代碼也更簡潔。

不幸的是,HTML 並不支持自閉合的自定義元素——只有官方的“空”元素。所以上述策略僅適用於進入 DOM 之前 Vue 的模板編譯器能夠觸達的地方,然后再產出符合 DOM 規范的 HTML。

 

8、模板中的組件名大小寫

對於絕大多數項目來說,在單文件組件和字符串模板中組件名應該總是 PascalCase 的——但是在 DOM 模板中總是 kebab-case 的。

PascalCase 相比 kebab-case 有一些優勢:

編輯器可以在模板里自動補全組件名,因為 PascalCase 同樣適用於 JavaScript。

<MyComponent> 視覺上比 <my-component> 更能夠和單個單詞的 HTML 元素區別開來,因為前者的不同之處有兩個大寫字母,后者只有一個橫線。

如果你在模板中使用任何非 Vue 的自定義元素,比如一個 Web Component,PascalCase 確保了你的 Vue 組件在視覺上仍然是易識別的。

不幸的是,由於 HTML 是大小寫不敏感的,在 DOM 模板中必須仍使用 kebab-case。

還請注意,如果你已經是 kebab-case 的重度用戶,那么與 HTML 保持一致的命名約定且在多個項目中保持相同的大小寫規則就可能比上述優勢更為重要了。在這些情況下,在所有的地方都使用 kebab-case 同樣是可以接受的。

 

9、JS/JSX 中的組件名大小寫

JS/JSX 中的組件名應該始終是 PascalCase 的,盡管在較為簡單的應用中只使用 Vue.component 進行全局組件注冊時,可以使用 kebab-case 字符串。

 

10、完整單詞的組件名

組件名應該傾向於完整單詞而不是縮寫。

編輯器中的自動補全已經讓書寫長命名的代價非常之低了,而其帶來的明確性卻是非常寶貴的。不常用的縮寫尤其應該避免。

 

11、Prop 名大小寫

在聲明 prop 的時候,其命名應該始終使用 camelCase,而在模板和 JSX 中應該始終使用 kebab-case。

我們單純的遵循每個語言的約定。在 JavaScript 中更自然的是 camelCase。而在 HTML 中則是 kebab-case。

 

12、多個特性的元素

多個特性的元素應該分多行撰寫,每個特性一行。

在 JavaScript 中,用多行分隔對象的多個屬性是很常見的最佳實踐,因為這樣更易讀。模板和 JSX 值得我們做相同的考慮。

 

13、模板中簡單的表達式

組件模板應該只包含簡單的表達式,復雜的表達式則應該重構為計算屬性或方法。

復雜表達式會讓你的模板變得不那么聲明式。我們應該盡量描述應該出現的是什么,而非如何計算那個值。而且計算屬性和方法使得代碼可以重用。

 

14、簡單的計算屬性

應該把復雜計算屬性分割為盡可能多的更簡單的屬性。

 

15、帶引號的特性值

非空 HTML 特性值應該始終帶引號 (單引號或雙引號,選你 JS 里不用的那個)。

在 HTML 中不帶空格的特性值是可以沒有引號的,但這鼓勵了大家在特征值里不寫空格,導致可讀性變差。

 

16、指令縮寫

指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 應該要么都用要么都不用。

 


免責聲明!

本站轉載的文章為個人學習借鑒使用,本站對版權不負任何法律責任。如果侵犯了您的隱私權益,請聯系本站郵箱yoyou2525@163.com刪除。



 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM