Vue2开发规范

组件名为多个单词

good

Vue.component('todo-item', {
  // ...
})
export default {
  name: 'TodoItem',
  // ...
}

no good

Vue.component('todo', {
  // ...
})
export default {
  name: 'Todo',
  // ...
}

这是为了避免与现在以及未来的html元素标签冲突，当然这里Vue的内置组件component、根组件App、过渡trasition除外

除根组件APP外，组件的data必须是一个函数

good

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

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

no good

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

export default {
  data: {
    foo: 'bar'
  }
}

Prop的定义应该尽量详细

good

props: {
  status: String
}

excellent

props: {
  status: { type: String, default: '' }
}

wonderful

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

no good

props: ['status']

为v-for设置键值

good

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

no good

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

避免v-if和v-for一起使用

good

<ul>
  <li
    v-for="user in activeUsers"
    :key="user.id"
  >
    {{ user.name }}
  </li>
</ul>

no good

<ul>
  <li v-for="user in users"
      v-if="user.isActive"
      :key="user.id">
    {{ user.name }}
  </li>
</ul>

因为v-for的优先级高于v-if

为组件样式设置作用域

good

<template>
  <button class="button button-close">X</button>
</template>
<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}
.button-close {
  background-color: red;
}
</style>

no good

<template>
  <button class="btn btn-close">X</button>
</template>
<style>
.btn-close {
  background-color: red;
}
</style>

根组件APP和布局组件layout的样式作用域可以是全局的，其它的都应该有作用域

私有的property名

good

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

excellent

var myGreatMixin = {
  // ...
  methods: {
    publicMethod() {
      // ...
      myPrivateFunction()
    }
  }
}
function myPrivateFunction() {
  // ...
}
export default myGreatMixin

no good

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

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

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

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

Components

• 所有components下的文件应当以首字母大写（PascalCase）开头，index之类的文件名除外

Views

• 代表路由的.vue文件或者文件夹用短横线连接（kebab-case）

All JS File

• 所有js文件遵循短横线连接（kebab-case）
• 变量命名应该具有语义，而不是瞎起名字
• 函数、变量使用camelCase
• 常量字母都大写
• 字符串使用单引号
• 字符串拼接使用模板字符串
• 句尾加分号

template下的标签

原则上是当html拿来写

<Select v-model="ojbk">
  <Option v-for="item in list">
    {{ item.name }}
  </Option>
</Select>

但是直到我遇到iview，我发现楼上这样写在下拉选中的时候会换行，阿伊，阿伊，emmmmm，那就不要用html的写法去写了

这种看着也还行吧

<Select v-model="ojbk">
  <Option 
    v-for="item in list"
  >{{ item.name }}</Option>
</Select>

不习惯那这样

<Select v-model="ojbk">
  <Option v-for="item in list">{{ item.name }}</Option>
</Select>

注意配置下编辑器的代码格式化风格，不然有可能白搞

• html属性值使用双引号

组件名的顺序- 从右往左读

建议是从右往左读，看着清晰、简洁、明了， 比如说：

内部立项 Internal project approval
项目审批 Project approval

在命名的时候应该这样

views/
ApprovalProjectInternal.vue
ApprovalPriject.vue
抑或是
views/
approval-project-internal.vue
approval-project.vue

参考

vue.js风格指南：https://cn.vuejs.org/v2/style-guide/