Vue風格指南

1、組件名爲多個單詞
2、組件的 data 必須是一個函數。
3、Prop 定義應該儘量詳細。

props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

4、總是用 key 配合 v-for。
5、永遠不要把 v-if 和 v-for 同時用在同一個元素上。
6、對於應用來說,頂級 App 組件和佈局組件中的樣式可以是全局的,但是其它所有組件都應該是有作用域的
7、在插件、混入等擴展中始終爲自定義的私有屬性使用 $_ 前綴。並附帶一個命名空間以迴避和其它作者的衝突 (比如 $yourPluginName)。
8、只要有能夠拼接文件的構建系統,就把每個組件單獨分成文件。
9、單文件組件的文件名應該要麼始終是單詞大寫開頭 (PascalCase),要麼始終是橫線連接 (kebab-case)。
10、應用特定樣式和約定的基礎組件 (也就是展示類的、無邏輯的或無狀態的組件) 應該全部以一個特定的前綴開頭,比如 Base、App 或 V。
11、只應該擁有單個活躍實例的組件應該以 The 前綴命名,以示其唯一性。
12、和父組件緊密耦合的子組件應該以父組件名作爲前綴命名。
13、組件名應該以高級別的 (通常是一般化描述的) 單詞開頭,以描述性的修飾詞結尾。
14、在單文件組件、字符串模板和 JSX 中沒有內容的組件應該是自閉合的——但在 DOM 模板裏永遠不要這樣做。
15、對於絕大多數項目來說,在單文件組件和字符串模板中組件名應該總是 PascalCase 的——但是在 DOM 模板中總是 kebab-case 的。
16、JS/JSX 中的組件名應該始終是 PascalCase 的,儘管在較爲簡單的應用中只使用 Vue.component 進行全局組件註冊時,可以使用 kebab-case 字符串。
17、組件名應該傾向於完整單詞而不是縮寫。
18、在聲明 prop 的時候,其命名應該始終使用 camelCase,而在模板和 JSX 中應該始終使用 kebab-case。
19、多個特性的元素應該分多行撰寫,每個特性一行。
20、組件模板應該只包含簡單的表達式,複雜的表達式則應該重構爲計算屬性或方法。
21、應該把複雜計算屬性分割爲儘可能多的更簡單的屬性。
22、非空 HTML 特性值應該始終帶引號 (單引號或雙引號,選你 JS 裏不用的那個)。
23、指令縮寫 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 應該要麼都用要麼都不用。
24、組件/實例的選項應該有統一的順序。
25、元素 (包括組件) 的特性應該有統一的順序。
26、你可能想在多個屬性之間增加一個空行,特別是在這些選項一屏放不下,需要滾動才能都看到的時候。
27、單文件組件應該總是讓 <script><template><style> 標籤的順序保持一致。且 <style> 要放在最後,因爲另外兩個標籤至少要有一個。

發表評論
所有評論
還沒有人評論,想成為第一個評論的人麼? 請在上方評論欄輸入並且點擊發布.
相關文章