前言
最近接手了一个经过了几代人开发(想想都可怕)的项目,由于之前的前端人员已经离职,所以只剩下我和一个前端老大。因为经过了不同人员的开发,代码质量参差不齐,且没有一个统一的规范。
所以。重构的重担就压倒我的肩膀上来了。以下只针对VUE开发规范中的一些个人见解以及网络上一些优秀开发规范,如有不妥,还望海涵!总体来说,Vue官方规范就够用了!
缩进
自古难题:到底是两个空格的缩进好,还是4个空格的缩进好?
复制代码
在我看来,两个空格的缩进看起来空格太少了,可读性远不如4空格的。看起来一点也不优雅。如果说4空格占空间大,但是在发布的时候可以压缩啊,这时候不是就不需要考虑几个空格了吗?
其实你不打空格都行,只要是你团队不杀你祭天就可以了。在同一个团队,至少是一个项目中我们应该约定统一的规范。反正不混用空格和Tab就行了。
空格
善用空格会使你的代码更美观易读,如:
// 没有空格
let num='';
num=1+2345+(3*889)-67/45;
for(var i=0;i<8;i++){}
// 有空格
let num = '';
num = 1 + 2345 + (3 * 889) - 67 / 45;
for(var i = 0; i < 8; i++){}
复制代码
总之我觉得第二种看上去更加美观,尤其是代码量大的情况下更加表现的明显。
风格指南
组件数据
组件的 data 必须是一个函数。
// bad
export default {
data: {
foo: 'bar'
}
}
// good
export default {
data () {
return {
foo: 'bar'
}
}
}
复制代码
单文件组件文件名称
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。
// bad
mycomponent.vue
myComponent.vue
// good
my-component.vue
MyComponent.vue
复制代码
紧密耦合的组件名
和父组件紧密耦合的子组件应该以父组件名作为前缀命名。
// bad
components/
|- TodoList.vue
|- TodoItem.vue
└─ TodoButton.vue
// good
components/
|- TodoList.vue
|- TodoListItem.vue
└─ TodoListItemButton.vue
复制代码
自闭合组件
在单文件组件中没有内容的组件应该是自闭合的
<!-- bad -->
<my-component></my-component>
<!-- good -->
<my-component />
复制代码
Prop 名大小写
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板中应该始终使用 kebab-case。
// bad
export default {
props: {
'greeting-text': String
}
};
// good
export default {
props: {
greetingText: String
}
}
复制代码
<!-- bad -->
<welcome-message greetingText="hi" />
<!-- good -->
<welcome-message greeting-text="hi" />
复制代码
Props 换行
多个 Props 的元素应该分多行撰写,每个 Props 一行,闭合标签单起一行。
<!-- bad -->
<my-component foo="a" bar="b" baz="c" />
<!-- good -->
<my-component
foo="a"
bar="b"
baz="c"
/>
复制代码
指令缩写
指令缩写,用 : 表示 v-bind: ,用 @ 表示 v-on:
<!-- bad -->
<input
v-bind:value="value"
v-on:input="onInput"
>
<!-- good -->
<input
:value="value"
@input="onInput"
>
复制代码
Props 顺序
标签的 Props 应该有统一的顺序,依次为指令、属性和事件。
<!-- good -->
<my-component
v-if="if"
v-show="show"
v-model="value"
ref="ref"
:key="key"
:text="text"
@input="onInput"
@change="onChange"
/>
复制代码
组件选项的顺序
组件选项应该有统一的顺序。
<!-- good -->
export default {
name: '',
mixins: [],
components: {},
props: {},
data() {},
computed: {},
watch: {},
created() {},
mounted() {},
destroyed() {},
methods: {}
};
复制代码
组件选项中的空行
组件选项较多时,建议在属性之间添加空行。
<!-- good -->
export default {
computed: {
formattedValue() {
// ...
},
styles() {
// ...
}
},
methods: {
onInput() {
// ...
},
onChange() {
// ...
}
}
};
复制代码
单文件组件顶级标签的顺序
单文件组件应该总是让顶级标签的顺序保持一致,且标签之间留有空行。
<!-- good -->
<template>
...
</template>
<script>
/* ... */
</script>
<style>
/* ... */
</style>
复制代码
小结
总之这种东西是仁者见仁,智者见智。自己的写的开心就好。