Vue.js style guide

原文:https://docs.gitlab.com/ee/development/fe_guide/style/vue.html

Vue.js style guide

Linting

我们默认为eslint-vue-plugin ,其plugin:vue/recommended . 请检查此规则以获取更多文档.

Basic Rules

  1. 该服务具有自己的文件
  2. 商店有自己的文件
  3. 使用捆绑文件中的函数实例化 Vue 组件:

    1. // bad
    2. class {
    3. init() {
    4. new Component({})
    5. }
    6. }
    7. // good
    8. document.addEventListener('DOMContentLoaded', () => new Vue({
    9. el: '#element',
    10. components: {
    11. componentName
    12. },
    13. render: createElement => createElement('component-name'),
    14. }));
  4. 不要将单例用于服务或商店

    1. // bad
    2. class Store {
    3. constructor() {
    4. if (!this.prototype.singleton) {
    5. // do something
    6. }
    7. }
    8. }
    9. // good
    10. class Store {
    11. constructor() {
    12. // do something
    13. }
    14. }
  5. .vue用于 Vue 模板. 不要在 HAML 中使用%template .

Naming

  1. 扩展名 :对 Vue 组件使用.vue扩展名. 不要将.js用作文件扩展名( #34371 ).
  2. 参考命名 :将 PascalCase 用于其实例:

    1. // bad
    2. import cardBoard from 'cardBoard.vue'
    3. components: {
    4. cardBoard,
    5. };
    6. // good
    7. import CardBoard from 'cardBoard.vue'
    8. components: {
    9. CardBoard,
    10. };
  3. 道具命名:避免使用 DOM 组件道具名称.

  4. 道具命名:使用 kebab-case 代替 camelCase 在模板中提供道具.

    1. // bad
    2. <component class="btn">
    3. // good
    4. <component css-class="btn">
    5. // bad
    6. <component myProp="prop" />
    7. // good
    8. <component my-prop="prop" />

Alignment

  1. 对于模板方法,请遵循以下对齐方式:

    1. 具有多个属性,所有属性都应换行:

      1. // bad
      2. <component v-if="bar"
      3. param="baz" />
      4. <button class="btn">Click me</button>
      5. // good
      6. <component
      7. v-if="bar"
      8. param="baz"
      9. />
      10. <button class="btn">
      11. Click me
      12. </button>
    2. 如果只有一个属性,则标签可以是内联的:

      1. // good
      2. <component bar="bar" />
      3. // good
      4. <component
      5. bar="bar"
      6. />
      7. // bad
      8. <component
      9. bar="bar" />

Quotes

  1. 对于所有其他 JS,请始终在模板内使用双引号"在模板内使用单引号' .

    1. // bad
    2. template: `
    3. <button :class='style'>Button</button>
    4. `
    5. // good
    6. template: `
    7. <button :class="style">Button</button>
    8. `

Props

  1. 道具应声明为对象

    1. // bad
    2. props: ['foo']
    3. // good
    4. props: {
    5. foo: {
    6. type: String,
    7. required: false,
    8. default: 'bar'
    9. }
    10. }
  2. 声明道具时应始终提供必需的钥匙

    1. // bad
    2. props: {
    3. foo: {
    4. type: String,
    5. }
    6. }
    7. // good
    8. props: {
    9. foo: {
    10. type: String,
    11. required: false,
    12. default: 'bar'
    13. }
    14. }
  3. 如果不需要道具,则应提供默认密钥. 注意:在某些情况下,我们需要检查属性的存在. 在这些上,不应提供默认密钥.

    1. // good
    2. props: {
    3. foo: {
    4. type: String,
    5. required: false,
    6. }
    7. }
    8. // good
    9. props: {
    10. foo: {
    11. type: String,
    12. required: false,
    13. default: 'bar'
    14. }
    15. }
    16. // good
    17. props: {
    18. foo: {
    19. type: String,
    20. required: true
    21. }
    22. }

Data

  1. data方法应始终是一个函数

    1. // bad
    2. data: {
    3. foo: 'foo'
    4. }
    5. // good
    6. data() {
    7. return {
    8. foo: 'foo'
    9. };
    10. }

Directives

  1. 速记@优先于v-on

    1. // bad
    2. <component v-on:click="eventHandler"/>
    3. // good
    4. <component @click="eventHandler"/>
  2. 速记:优于v-bind

    1. // bad
    2. <component v-bind:class="btn"/>
    3. // good
    4. <component :class="btn"/>
  3. Shorthand # is preferable over v-slot

    1. // bad
    2. <template v-slot:header></template>
    3. // good
    4. <template #header></template>

Closing tags

  1. 首选自闭合组件标签

    1. // bad
    2. <component></component>
    3. // good
    4. <component />

Component usage within templates

  1. 在模板中使用组件时,将组件的 kebab 命名的名称优先于其他样式

    1. // bad
    2. <MyComponent />
    3. // good
    4. <my-component />

Ordering

  1. .vue文件中的标记顺序

    1. <script>
    2. // ...
    3. </script>
    4. <template>
    5. // ...
    6. </template>
    7. // We don't use scoped styles but there are few instances of this
    8. <style>
    9. // ...
    10. </style>
  2. Vue 组件中的属性 :检查组件 rule 中的属性顺序 .

:key

使用v-for您需要为每个项目提供唯一的 :key属性.

  1. 如果要迭代的数组元素具有唯一的id ,则建议使用它:

    1. <div
    2. v-for="item in items"
    3. :key="item.id"
    4. >
    5. <!-- content -->
    6. </div>
  2. 当要迭代的元素没有唯一 ID 时,可以将数组索引用作:key属性

    1. <div
    2. v-for="(item, index) in items"
    3. :key="index"
    4. >
    5. <!-- content -->
    6. </div>
  3. 当将v-fortemplate并且有多个子元素时, :key值必须唯一. 建议使用kebab-case名称空间.

    1. <template v-for="(item, index) in items">
    2. <span :key="`span-${index}`"></span>
    3. <button :key="`button-${index}`"></button>
    4. </template>
  4. 处理嵌套v-for使用与上述相同的准则.

    1. <div
    2. v-for="item in items"
    3. :key="item.id"
    4. >
    5. <span
    6. v-for="element in array"
    7. :key="element.id"
    8. >
    9. <!-- content -->
    10. </span>
    11. </div>

有用的链接:

  1. key
  2. Vue Style Guide: Keyed v-for

Vue and Bootstrap

  1. 工具提示:请勿依赖 Vue 组件的has-tooltip类名称

    1. // bad
    2. <span
    3. class="has-tooltip"
    4. title="Some tooltip text">
    5. Text
    6. </span>
    7. // good
    8. <span
    9. v-tooltip
    10. title="Some tooltip text">
    11. Text
    12. </span>
  2. 工具提示:使用工具提示时,请包含工具提示指令./app/assets/javascripts/vue_shared/directives/tooltip.js

  3. 不要更改data-original-title .

    1. // bad
    2. <span data-original-title="tooltip text">Foo</span>
    3. // good
    4. <span title="tooltip text">Foo</span>
    5. $('span').tooltip('_fixTitle');

The JavaScript/Vue Accord

该协议的目的是确保我们都在同一页面上.

  1. 编写 Vue 时,您可能无法在应用程序中使用 jQuery.
    1. 如果您需要从 DOM 抓取数据,则可以在引导应用程序以使用dataset抓取数据属性时查询 DOM 1 次. 您可以在没有 jQuery 的情况下执行此操作.
    2. 您可以按照 docs 中的此示例在 Vue.js 中使用 jQuery 依赖关系.
    3. 如果需要在 Vue 应用程序内部侦听外部 jQuery 事件,则可以使用 jQuery 事件侦听器.
    4. 我们将避免在不需要时添加新的 jQuery 事件. 与其添加新的 jQuery 事件,不如看看执行相同任务的不同方法 .
  2. 您可以一次引导window对象,同时引导您的应用程序以获取应用程序特定的数据(例如, scrollTo可以随时访问). 在应用程序引导期间执行此访问.
  3. 您可能会临时需要立即但不符合我们标准的代码来编写技术债,以备以后重构. 维护人员首先要对技术债务保持满意. 应该为该技术债务创建一个问题,以便对其进行进一步评估和讨论. 在接下来的几个月中,您应该解决该技术债务,其优先级由维护者确定.
  4. 在产生技术债务时,您必须事先为该代码编写测试,并且这些测试可能不会被重写. 例如,将 jQuery 测试重写为 Vue 测试.
  5. 您可以选择将 VueX 用作集中式状态管理. 如果选择不使用 VueX,则必须使用可以在Vue.js 文档中找到的存储模式 .
  6. 选择集中式状态管理解决方案后,必须将其用于整个应用程序. 即不要混淆并匹配您的状态管理解决方案.