Vue.js style guide · Gitlab 中文文檔

# Vue.js style guide > 原文：[https://docs.gitlab.com/ee/development/fe_guide/style/vue.html](https://docs.gitlab.com/ee/development/fe_guide/style/vue.html) * [Linting](#linting) * [Basic Rules](#basic-rules) * [Naming](#naming) * [Alignment](#alignment) * [Quotes](#quotes) * [Props](#props) * [Data](#data) * [Directives](#directives) * [Closing tags](#closing-tags) * [Component usage within templates](#component-usage-within-templates) * [Ordering](#ordering) * [`:key`](#key) * [Vue and Bootstrap](#vue-and-bootstrap) * [The JavaScript/Vue Accord](#the-javascriptvue-accord) # Vue.js style guide[](#vuejs-style-guide "Permalink") ## Linting[](#linting "Permalink") 我們默認為[eslint-vue-plugin](https://github.com/vuejs/eslint-plugin-vue) ，其`plugin:vue/recommended` . 請檢查此[規則](https://github.com/vuejs/eslint-plugin-vue#bulb-rules)以獲取更多文檔. ## Basic Rules[](#basic-rules "Permalink") 1. 該服務具有自己的文件 2. 商店有自己的文件 3. 使用捆綁文件中的函數實例化 Vue 組件： ``` // bad class { init() { new Component({}) } } // good document.addEventListener('DOMContentLoaded', () => new Vue({ el: '#element', components: { componentName }, render: createElement => createElement('component-name'), })); ``` 4. 不要將單例用于服務或商店 ``` // bad class Store { constructor() { if (!this.prototype.singleton) { // do something } } } // good class Store { constructor() { // do something } } ``` 5. 將`.vue`用于 Vue 模板. 不要在 HAML 中使用`%template` . ## Naming[](#naming "Permalink") 1. **擴展名** ：對 Vue 組件使用`.vue`擴展名. 不要將`.js`用作文件擴展名（ [＃34371](https://gitlab.com/gitlab-org/gitlab-foss/-/issues/34371) ）. 2. **參考命名** ：將 PascalCase 用于其實例： ``` // bad import cardBoard from 'cardBoard.vue' components: { cardBoard, }; // good import CardBoard from 'cardBoard.vue' components: { CardBoard, }; ``` 3. **道具命名：**避免使用 DOM 組件道具名稱. 4. **道具命名：**使用 kebab-case 代替 camelCase 在模板中提供道具. ``` // bad <component class="btn"> // good <component css-class="btn"> // bad <component myProp="prop" /> // good <component my-prop="prop" /> ``` ## Alignment[](#alignment "Permalink") 1. 對于模板方法，請遵循以下對齊方式： 1. 具有多個屬性，所有屬性都應換行： ``` // bad <component v-if="bar" param="baz" /> <button class="btn">Click me</button> // good <component v-if="bar" param="baz" /> <button class="btn"> Click me </button> ``` 2. 如果只有一個屬性，則標簽可以是內聯的： ``` // good <component bar="bar" /> // good <component bar="bar" /> // bad <component bar="bar" /> ``` ## Quotes[](#quotes "Permalink") 1. 對于所有其他 JS，請始終在模板內使用雙引號`"`在模板內使用單引號`'` . ``` // bad template: ` <button :class='style'>Button</button> ` // good template: ` <button :class="style">Button</button> ` ``` ## Props[](#props "Permalink") 1. 道具應聲明為對象 ``` // bad props: ['foo'] // good props: { foo: { type: String, required: false, default: 'bar' } } ``` 2. 聲明道具時應始終提供必需的鑰匙 ``` // bad props: { foo: { type: String, } } // good props: { foo: { type: String, required: false, default: 'bar' } } ``` 3. 如果不需要道具，則應提供默認密鑰. *注意：*在某些情況下，我們需要檢查屬性的存在. 在這些上，不應提供默認密鑰. ``` // good props: { foo: { type: String, required: false, } } // good props: { foo: { type: String, required: false, default: 'bar' } } // good props: { foo: { type: String, required: true } } ``` ## Data[](#data "Permalink") 1. `data`方法應始終是一個函數 ``` // bad data: { foo: 'foo' } // good data() { return { foo: 'foo' }; } ``` ## Directives[](#directives "Permalink") 1. 速記`@`優先于`v-on` ``` // bad <component v-on:click="eventHandler"/> // good <component @click="eventHandler"/> ``` 2. 速記`:`優于`v-bind` ``` // bad <component v-bind:class="btn"/> // good <component :class="btn"/> ``` 3. Shorthand `#` is preferable over `v-slot` ``` // bad <template v-slot:header></template> // good <template #header></template> ``` ## Closing tags[](#closing-tags "Permalink") 1. 首選自閉合組件標簽 ``` // bad <component></component> // good <component /> ``` ## Component usage within templates[](#component-usage-within-templates "Permalink") 1. 在模板中使用組件時，將組件的 kebab 命名的名稱優先于其他樣式 ``` // bad <MyComponent /> // good <my-component /> ``` ## Ordering[](#ordering "Permalink") 1. `.vue`文件中的標記順序 ``` <script> // ... </script> <template> // ... </template> // We don't use scoped styles but there are few instances of this <style> // ... </style> ``` 2. Vue 組件中[的屬性](https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md) ：檢查[組件 rule 中的屬性順序](https://github.com/vuejs/eslint-plugin-vue/blob/master/docs/rules/order-in-components.md) . ## `:key`[](#key "Permalink") 使用`v-for`您需要為每個項目提供*唯一的* `:key`屬性. 1. 如果要迭代的數組元素具有唯一的`id` ，則建議使用它： ``` <div v-for="item in items" :key="item.id" >  </div> ``` 2. 當要迭代的元素沒有唯一 ID 時，可以將數組索引用作`:key`屬性 ``` <div v-for="(item, index) in items" :key="index" >  </div> ``` 3. 當將`v-for`與`template`并且有多個子元素時， `:key`值必須唯一. 建議使用`kebab-case`名稱空間. ``` <template v-for="(item, index) in items"> <span :key="`span-${index}`"></span> <button :key="`button-${index}`"></button> </template> ``` 4. 處理嵌套`v-for`使用與上述相同的準則. ``` <div v-for="item in items" :key="item.id" > <span v-for="element in array" :key="element.id" >  </span> </div> ``` 有用的鏈接： 1. [`key`](https://vuejs.org/v2/guide/list.html#key) 2. [Vue Style Guide: Keyed v-for](https://vuejs.org/v2/style-guide/#Keyed-v-for-essential) ## Vue and Bootstrap[](#vue-and-bootstrap "Permalink") 1. 工具提示：請勿依賴 Vue 組件的`has-tooltip`類名稱 ``` // bad <span class="has-tooltip" title="Some tooltip text"> Text </span> // good <span v-tooltip title="Some tooltip text"> Text </span> ``` 2. 工具提示：使用工具提示時，請包含工具提示指令`./app/assets/javascripts/vue_shared/directives/tooltip.js` 3. 不要更改`data-original-title` . ``` // bad <span data-original-title="tooltip text">Foo</span> // good <span title="tooltip text">Foo</span> $('span').tooltip('_fixTitle'); ``` ## The JavaScript/Vue Accord[](#the-javascriptvue-accord "Permalink") 該協議的目的是確保我們都在同一頁面上. 1. 編寫 Vue 時，您可能無法在應用程序中使用 jQuery. 1. 如果您需要從 DOM 抓取數據，則可以在引導應用程序以使用`dataset`抓取數據屬性時查詢 DOM 1 次. 您可以在沒有 jQuery 的情況下執行此操作. 2. 您可以[按照 docs 中的此示例](https://vuejs.org/v2/examples/select2.html)在 Vue.js 中使用 jQuery 依賴關系. 3. 如果需要在 Vue 應用程序內部偵聽外部 jQuery 事件，則可以使用 jQuery 事件偵聽器. 4. 我們將避免在不需要時添加新的 jQuery 事件. 與其添加新的 jQuery 事件，不如看看[執行相同任務的不同方法](https://vuejs.org/v2/api/#vm-emit) . 2. 您可以一次引導`window`對象，同時引導您的應用程序以獲取應用程序特定的數據（例如， `scrollTo`可以隨時訪問）. 在應用程序引導期間執行此訪問. 3. 您可能會臨時需要立即但不符合我們標準的代碼來編寫技術債，以備以后重構. 維護人員首先要對技術債務保持滿意. 應該為該技術債務創建一個問題，以便對其進行進一步評估和討論. 在接下來的幾個月中，您應該解決該技術債務，其優先級由維護者確定. 4. 在產生技術債務時，您必須事先為該代碼編寫測試，并且這些測試可能不會被重寫. 例如，將 jQuery 測試重寫為 Vue 測試. 5. 您可以選擇將 VueX 用作集中式狀態管理. 如果選擇不使用 VueX，則必須使用可以在[Vue.js 文檔中](https://vuejs.org/v2/guide/state-management.html#Simple-State-Management-from-Scratch)找到的*存儲模式* . 6. 選擇集中式狀態管理解決方案后，必須將其用于整個應用程序. 即不要混淆并匹配您的狀態管理解決方案.