# vue 开发规范

本节对 vue 的使用提出一些基本的要求，目的为了减少错误，统一整体风格，方便管理和维护。

# 命名规范

# 1.普通变量命名规范

命名方法：驼峰命名法
命名规范：
- 命名要有语义化，比如我想申明一个变量，用来表示我的学校，那么我们可以这样定义const mySchool = "我的学校";
- 命名是复数的时候需要加s,比如我想申明一个数组，表示很多人的名字，那么我们可以这样定义const names = new Array();

# 2.常量

命名方法 : 全部大写
命名规范 : 使用大写字母和下划线来组合命名，下划线用以分割单词。

const MAX_COUNT = 10
const URL = 'https://www.baidu.com/'

1
2

# 3.组件命名规范

官方文档推荐及使用遵循规则：

PascalCase (单词首字母大写命名)是最通用的声明约定

kebab-case (短横线分隔命名) 是最通用的使用约定
组件命名遵循以下原则，使用单词首字母大写命名(PascalCase)进行组件声明，使用短横线分隔命名<car-lib></car-lib>进行使用

1. 组件名为多个单词
组件名应该始终是多个单词的，根组件 App 除外。

// 反例
export default {
 name: 'Todo',
 // ...
}
// 正例
export default {
 name: 'TodoItem',
 // ...
}

1
2
3
4
5
6
7
8
9
10

2. 组件数据

组件的 data 必须是一个函数。当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方)，它的值必须是返回一个对象的函数。

// In a .vue file

// 反例
export default {
 data: {
 foo: 'bar'
 }
}

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

// 在一个 Vue 的根实例上直接使用对象是可以的， 因为只存在一个这样的实例。
new Vue({
 data: {
 foo: 'bar'
 }
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24

3.组件文件
只要有能够拼接文件的构建系统，就把每个组件单独分成文件。当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。

// 反例
Vue.component('TodoList', {
 // ...
})
Vue.component('TodoItem', {
 // ...
})


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

1
2
3
4
5
6
7
8
9
10
11
12
13

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

// 反例
components/
|- myComponent.vue
|- mycomponent.vue


// 正例
components/
|- MyComponent.vue

1
2
3
4
5
6
7
8
9

5.基础组件名
应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。

// 反例
components/
|- MyButton.vue
|- VueTable.vue
|- Icon.vue


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

1
2
3
4
5
6
7
8
9
10
11
12

6.模板中的组件名大小写
总是 PascalCase 的

// 反例
<mycomponent/>

// 正例
<MyComponent/>

1
2
3
4
5

7.Prop

在声明 prop 的时候，其命名应该始终使用驼峰格式（camelCase）命名，而在模板中应该始终使用连接线（-） kebab-case

// 反例
// Vue
props: {
    article-status: Boolean
}
// HTML
<article-item :articleStatus="true"></article-item>

// 正例
// Vue
props: {
    articleStatus: Boolean
}
// HTML
<article-item :article-status="true"></article-item>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15

8.单文件组件的顶级元素顺序
为了统一和便于阅读，应该按 <template> script> <style>的顺序放置。

// 反例
<style>
/* CSS */
</style>
<script>
/* JavaScript */
</script>
<template>
<!-- HTML -->
</template>

// 正例
<template>
<!-- HTML -->
</template>
<script>
/* JavaScript */
</script>
<style>
/* CSS */
</style>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21

# 4.method 命名规范

驼峰式命名

// 反例
  go、nextPage、show、open、login
 
// 正例
  jumpPage、openCarInfoDialog

1
2
3
4
5

请求数据方法，以 data 结尾

// 反例
 takeData、confirmData、getList、postForm
 
// 正例
  getListData、postFormData

1
2
3
4
5

# 5.注释规范

代码注释在一个项目的后期维护中显的尤为重要，所以我们要为每一个被复用的组件编写组件使用说明，为组件中每一个方法编写方法说明

# 务必添加注释列表

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

  // 1.单行注释
  var name = "abc"; 


 //2.注释块
 
   /**
  * 组件名称
  * @Description 组件描述
  * @Author 组件作者
  * @Date 2020年12月02日12:00
  * @param {Object} [title]    - 参数说明
  * @example 调用示例
  **/

1
2
3
4
5
6
7
8
9
10
11
12
13
14

# Props 规范

Prop 定义应该尽量详细。在你提交的代码中，prop 的定义应该尽量详细，至少需要指定其类型。

// 反例  这样做只有开发原型系统时可以接受
props: ['status']

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

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18

# 指令规范

1.指令有缩写一律采用缩写形式

// 反例
  v-bind:class="{'show-left'：true}"
  v-on:click="getListData"

 // 正例
  :class="{'show-left'：true}"
  @click="getListData"

1
2
3
4
5
6
7

v-for 循环必须加上 key 属性，在整个 for 循环中 key 需要唯一

<!-- 反例 -->
  <ul>
    <li v-for="todo in todos" :key="todo.id">
      {{ todo.text }}
    </li>
  </ul>

  <!-- 正例 -->
  <ul>
    <li v-for="todo in todos">
      {{ todo.text }}
    </li>
  </ul>

1
2
3
4
5
6
7
8
9
10
11
12
13

3.避免 v-if 和 v-for 同时用在一个元素上（性能问题）
4.隐性的父子组件通信

// 反例
Vue.component('TodoItem', {
 props: {
 todo: {
 type: Object,
 required: true
 }
 },
 methods: {
 removeTodo () {
 var vm = this
 vm.$parent.todos = vm.$parent.todos.filter(function (todo) {
 return todo.id !== vm.todo.id
 })
 }
 },
 template: `
 <span>
 {{ todo.text }}
 <button @click="removeTodo">
 X
 </button>
 </span>
 `
})

 // 正例
Vue.component('TodoItem', {
 props: {
 todo: {
 type: Object,
 required: true
 }
 },
 template: `
 <input
 :value="todo.text"
 @input="$emit('input', $event.target.value)"
 >
 `
})

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41

# CSS 规范

# 通用规范

统一使用"-"连字符
省略值为 0 时的单位

// 反例
  padding-bottom: 0px;
  margin: 0em;

 // 正例
  padding-bottom: 0;
  margin: 0;

1
2
3
4
5
6
7

如果 CSS 可以做到，就不要使用 JS
元素选择器应该避免在 scoped 中出现。官方文档说明：在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。
命名要有语义化

# 编码规范

使用 ES6 风格编码

定义变量使用 let ,定义常量使用 const
静态字符串一律使用单引号或反引号，动态字符串使用反引号

# 其他

调试信息 console.log() debugger 使用完及时删除

← JavaScript 编码规范前端检查 →