一、組件文件
vue
只要有可以拼接文件的構建系統，就把每一個組件單獨分紅文件。編輯器
當你須要編輯一個組件或查閱一個組件的用法時，能夠更快速的找到它。ide
二、單文件組件文件的大小寫
ui
單文件組件的文件名應該要麼始終是單詞大寫開頭 (PascalCase)，要麼始終是橫線鏈接 (kebab-case)。url
單詞大寫開頭對於代碼編輯器的自動補全最爲友好，由於這使得咱們在 JS(X) 和模板中引用組件的方式儘量的一致。然而，混用文件命名方式有的時候會致使大小寫不敏感的文件系統的問題，這也是橫線鏈接命名一樣徹底可取的緣由。spa
應用特定樣式和約定的基礎組件 (也就是展現類的、無邏輯的或無狀態的組件) 應該所有以一個特定的前綴開頭，好比 Base、App 或 V。code
四、單例組件名
component
只應該擁有單個活躍實例的組件應該以 The 前綴命名，以示其惟一性。對象
這不意味着組件只可用於一個單頁面，而是每一個頁面只使用一次。這些組件永遠不接受任何 prop，由於它們是爲你的應用定製的，而不是它們在你的應用中的上下文。若是你發現有必要添加 prop，那就代表這其實是一個可複用的組件，只是目前在每一個頁面裏只使用一次。
五、緊密耦合的組件名
和父組件緊密耦合的子組件應該以父組件名做爲前綴命名。
若是一個組件只在某個父組件的場景下有意義，這層關係應該體如今其名字上。由於編輯器一般會按字母順序組織文件，因此這樣作能夠把相關聯的文件排在一塊兒。
六、組件名中的單詞順序
組件名應該以高級別的 (一般是通常化描述的) 單詞開頭，以描述性的修飾詞結尾。
七、自閉合組件
在單文件組件、字符串模板和 JSX 中沒有內容的組件應該是自閉合的——但在 DOM 模板裏永遠不要這樣作。
自閉合組件表示它們不只沒有內容，並且刻意沒有內容。其不一樣之處就好像書上的一頁白紙對比貼有「本頁有意留白」標籤的白紙。並且沒有了額外的閉合標籤，你的代碼也更簡潔。
不幸的是，HTML 並不支持自閉合的自定義元素——只有官方的「空」元素。因此上述策略僅適用於進入 DOM 以前 Vue 的模板編譯器可以觸達的地方，而後再產出符合 DOM 規範的 HTML。
八、模板中的組件名大小寫
對於絕大多數項目來講，在單文件組件和字符串模板中組件名應該老是 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 一樣是能夠接受的。
九、JS/JSX 中的組件名大小寫
JS/JSX 中的組件名應該始終是 PascalCase 的，儘管在較爲簡單的應用中只使用 Vue.component 進行全局組件註冊時，可使用 kebab-case 字符串。
十、完整單詞的組件名
組件名應該傾向於完整單詞而不是縮寫。
編輯器中的自動補全已經讓書寫長命名的代價很是之低了，而其帶來的明確性倒是很是寶貴的。不經常使用的縮寫尤爲應該避免。
十一、Prop 名大小寫
在聲明 prop 的時候，其命名應該始終使用 camelCase，而在模板和 JSX 中應該始終使用 kebab-case。
咱們單純的遵循每一個語言的約定。在 JavaScript 中更天然的是 camelCase。而在 HTML 中則是 kebab-case。
十二、多個特性的元素
多個特性的元素應該分多行撰寫，每一個特性一行。
在 JavaScript 中，用多行分隔對象的多個屬性是很常見的最佳實踐，由於這樣更易讀。模板和 JSX 值得咱們作相同的考慮。
1三、模板中簡單的表達式
組件模板應該只包含簡單的表達式，複雜的表達式則應該重構爲計算屬性或方法。
複雜表達式會讓你的模板變得不那麼聲明式。咱們應該儘可能描述應該出現的是什麼，而非如何計算那個值。並且計算屬性和方法使得代碼能夠重用。
1四、簡單的計算屬性
應該把複雜計算屬性分割爲儘量多的更簡單的屬性。
1五、帶引號的特性值
非空 HTML 特性值應該始終帶引號 (單引號或雙引號，選你 JS 裏不用的那個)。
在 HTML 中不帶空格的特性值是能夠沒有引號的，但這鼓勵了你們在特徵值裏不寫空格，致使可讀性變差。
指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 應該要麼都用要麼都不用。