组件名为多个单词
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/