Vue项目风格指南

一、必要

1、组件名应该始终是多个单词

Vue.component('todo-item', {
  // ...
})

export default {
  name: 'TodoItem',
  // ...
}

2、组件的 data 必须是一个函数

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

3、Prop 定义应该尽量详细，至少需要指定其类型

props: {
  status: String
}

4、总是用 key 配合 v-for

  
    {{ todo.text }}
  

5、永远不要把 v-if 和 v-for 同时用在同一个元素上

  
    {{ user.name }}
  

6、为组件样式设置作用域

  X




.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}

7、私有属性名使用 $_ 前缀

var myGreatMixin = {
  // ...
  methods: {
    $_myGreatMixin_update: function () {
      // ...
    }
  }
}

二、强烈推荐（增强可读性）

1、只要有能够拼接文件的构建系统，就把每个组件单独分成文件

components/
|- TodoList.vue
|- TodoItem.vue

2、单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)

components/
|- MyComponent.vue

3、应用特定样式和约定的基础组件应该全部以一个特定的前缀开头，比如 Base、App 或 V。

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

4、只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

components/
|- TheHeading.vue
|- TheSidebar.vue

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

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

6、组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue

7、在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

8、对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

9、JS/JSX 中的组件名应该始终是 PascalCase 的

Vue.component('MyComponent', {
  // ...
})

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent',
  // ...
}

10、组件名应该倾向于完整单词而不是缩写

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

11、在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case

props: {
  greetingText: String
}

12、多个特性的元素应该分多行撰写，每个特性一行。

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

{{ normalizedFullName }}


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

14、应该把复杂计算属性分割为尽可能多的更简单的属性。

computed: {
  basePrice: function () {
    return this.manufactureCost / (1 - this.profitMargin)
  },
  discount: function () {
    return this.basePrice * (this.discountPercent || 0)
  },
  finalPrice: function () {
    return this.basePrice - this.discount
  }
}

15、非空 HTML 特性值应该始终带引号 (单引号或双引号，选你 JS 里不用的那个)。