VUE规范
基于Vue官方风格指南整理
一、强制
1. 组件名为多个单词
组件名应该始终是多个单词的,根组件 App 除外。
正例:
export default {
name: 'TodoItem',
// ...
}
反例:
export default {
name: 'Todo',
// ...
}
2. 组件数据
组件的 data 必须是一个函数。
当在组件中使用 data 属性的时候 (除了 new Vue 外的任何地方),它的值必须是返回一个对象的函数。
3. Prop定义
Prop 定义应该尽量详细。
在你提交的代码中,prop 的定义应该尽量详细,至少需要指定其类型。
正例
props: {
status: String
}
// 更好的做法!
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
反例:
props: ['status']
4.为v-for设置键值
总是用 key 配合 v-for。
在组件上_总是_必须用 key 配合 v-for,以便维护内部组件及其子树的状态。甚至在元素上维护可预测的行为,比如动画中的对象固化 (object constancy),也是一种好的做法。
正例
<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>
5.避免 v-if 和 v-for 用在一起
永远不要把 v-if 和 v-for 同时用在同一个元素上。一般我们在两种常见的情况下会倾向于这样做:
1、为了过滤一个列表中的项目 (比如 v-for=“user in users” v-if=“user.isActive”)。在这种情形下,请将 users 替换为一个计算属性 (比如 activeUsers),让其返回过滤后的列表。
2、为了避免渲染本应该被隐藏的列表 (比如 v-for=“user in users” v-if=“shouldShowUsers”)。这种情形下,请将 v-if 移动至容器元素上 (比如 ul, ol)
正例:
<ul v-if="shouldShowUsers">
<li
v-for="user in users"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
反例:
<ul>
<li
v-for="user in users"
v-if="shouldShowUsers"
:key="user.id"
>
{{ user.name }}
</li>
</ul>
二、推荐写法
1、组件文件
每个组件单独分成文件。
当你需要编辑一个组件或查阅一个组件的用法时,可以更快速的找到它。
例如:
components/
|- TodoList.vue
|- TodoItem.vue
2、单文件组件文件的大小写
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase)
正例:
components/
|- MyComponent.vue
反例:
components/
|- myComponent.vue
|- mycomponent.vue
3. 基础组件名
基础组件应该全部以一个特定的前缀开头,比如 Base、App 或 V。
例如:
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
4.完整单词的组件名
组件名应该倾向于完整单词而不是缩写。
正例:
components/
|- button.vue
反例:
components/
|- btn.vue
5.多个特性的元素
多个特性的元素应该分多行撰写,每个特性一行。
正例:
<MyComponent
foo="a"
bar="b"
baz="c"
/>
反例:
<MyComponent foo="a" bar="b" baz="c"/>
6.单文件组件的顶级元素的顺序
script、template和style标签的顺序保持一致
附录
- 推荐使用vs code进行前端编码
- vs code 插件
- Vetur
- Vue 2 Snippets
- ESlint
- Auto Close Tag
- vscode-icons