vuejs编码规范

280 阅读3分钟

命名规范

组件命名规范

  1. 单文件组件的文件名应该始终是单词大写开头 (PascalCase)。
components/
|- MyComponent.vue
  1. 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
  1. 只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
  1. 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
  1. 对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component>

<!-- 在所有地方 -->
<my-component></my-component>
  1. 组件名应该倾向于完整单词而不是缩写。
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

prop命名规范

1.在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。

props: {
  greetingText: String
}

<WelcomeMessage greeting-text="hi"/>

可读性相关

1.Prop 定义应该尽量详细,至少需要指定其类型。

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

2.多个特性的元素应该分多行撰写,每个特性一行。

<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>

<MyComponent
  foo="a"
  bar="b"
  baz="c"
/>

3.组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法

<!-- 在模板中 -->
{{ normalizedFullName }}

// 复杂表达式已经移入一个计算属性
computed: {
  normalizedFullName: function () {
    return this.fullName.split(' ').map(function (word) {
      return word[0].toUpperCase() + word.slice(1)
    }).join(' ')
  }
}

性能相关

  1. v-for必须配合key使用,可以提高部分情况下Vue的渲染性能。
<ul>
  <li
    v-for="todo in todos"
    :key="todo.id"
  >
    {{ todo.text }}
  </li>
</ul>
  1. scoped 样式中避免使用元素选择器,因为遍历元素的效率通常很低。

注释规范

代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。 以下情况,务必添加注释

1.公共组件使用说明;
2.各组件中重要函数或者类说明;
3.复杂的业务逻辑处理说明;
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述 ;
5.注释块必须以 /**(至少两个星号)开头**/;
6.单行注释使用//

开发规范

1.eslint

环境配置及包管理

  1. 为了兼容老项目,建议使用nvm方便切换node环境。
  2. 使用yarn或者cnpm下载依赖包