Pospal

Appearance

Vue 规范 ​

vue 项目规范以 Vue 官方规范 规范中的 规范为基础，在其上面进行项目开发，故所有代码均遵守该规范。请仔仔细细阅读 Vue 官方规范，切记，此为第一步。

组件规范 ​

组件名为多个单词 ​

组件名应该始终是多个单词组成（大于等于 2），且命名规范为KebabCase格式。 这样做可以避免跟现有的以及未来的 HTML 元素相冲突，因为所有的 HTML 元素名称都是单个单词的。

正例：

js
export default {
  name: 'TodoItem',
};

反例：

js
export default {
  name: 'Todo',
  // ...
};
export default {
  name: 'todo-item',
  // ...
};

组件文件名为 pascal-case 格式 ​

正例：

bash
components/
|- my-component.vue

反例：

bash
components/
|- myComponent.vue
|- MyComponent.vue

和父组件紧密耦合的子组件应该以父组件名作为前缀命名 ​

正例：

bash
components/
|- todo-list.vue
|- todo-list-item.vue
|- todo-list-item-button.vue
|- user-profile-options.vue （完整单词）

反例：

bash
components/
|- TodoList.vue
|- TodoItem.vue
|- TodoButton.vue
|- UProfOpts.vue （使用了缩写）

在 Template 模版中使用组件，应使用 PascalCase 模式，并且使用自闭合组件 ​

正例：

html
<!-- 在单文件组件、字符串模板和 JSX 中 -->
<MyComponent />
<Row><table :column="data" /></Row>

反例：

html
<my-component /> <row><table :column="data" /></row>

为组件样式设置作用域 ​

正例：

html
<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 使用 `scoped` 特性 -->
<style scoped>
  .btn-close {
    background-color: red;
  }
</style>

反例：

html
<template>
  <button class="btn btn-close">X</button>
</template>
<!-- 没有使用 `scoped` 特性 -->
<style>
  .btn-close {
    background-color: red;
  }
</style>

模板中使用简单的表达式 ​

正例：

vue
<template>
  <p>{{ normalizedFullName }}</p>
</template>
<script>
export default {
  computed: {
    normalizedFullName: function () {
      return this.fullName
        .split(' ')
        .map(function (word) {
          return word[0].toUpperCase() + word.slice(1);
        })
        .join(' ');
    },
  },
};
</script>

反例：

vue
<template>
  <p>
    {{
      fullName
        .split(' ')
        .map(function (word) {
          return word[0].toUpperCase() + word.slice(1);
        })
        .join(' ')
    }}
  </p>
</template>

标签顺序保持一致 ​

单文件组件应该总是让标签顺序保持为

正例：

vue
<template></template>
<script></script>
<style></style>
vue
<script setup></script>
<template></template>
<style></style>

反例：

vue
<template></template>
<style></style>
<script></script>
vue
<template></template>
<script setup></script>
<style></style>

Eslint 规则 ​

TIP

详细规则见vue-eslint-rules，以下为调整的一些规则

  • 【关闭】限制自定义组件的属性风格

    eslint: attribute-hyphenation

    太过严格了,所以关闭

  • 【关闭】属性按照指定的顺序

    eslint: attributes-order

    太过严格了,所以关闭

  • 【关闭】自定义事件名必须用 kebab-case 风格

    eslint: custom-event-name-casing

    太过严格了,所以关闭

  • 【调整】限制每行的最大属性/属性数以提高可读性

    eslint: max-attributes-per-line

    bash
    'vue/max-attributes-per-line': [
    'error',
    {
        singleline: 4,
        multiline: {
            max: 1,
        },
    },
]

  • 【调整】将自动关闭标志作为配置的样式

    eslint: html-self-closing

    bash
    'vue/html-self-closing': [
    'error',
    {
        html: {
            void: 'always',
            normal: 'never',
            component: 'always',
        },
        svg: 'always',
        math: 'always',
    },
],

  • 【调整】模版中已定义的变量必须使用

    eslint: html-self-closing

    以_开头的可以被忽略

    bash
    'vue/no-unused-vars': [
    'error',
    {
        ignorePattern: '^_',
        varsIgnorePattern: '^_',
    },
],