命名规范
组件命名规范
- 单文件组件的文件名应该始终是单词大写开头 (PascalCase)。
components/
|- MyComponent.vue
- 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头,比如 Base、App 或 V。
components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue
- 只应该拥有单个活跃实例的组件应该以 The 前缀命名,以示其唯一性。
components/
|- TheHeading.vue
|- TheSidebar.vue
- 和父组件紧密耦合的子组件应该以父组件名作为前缀命名
components/
|- SearchSidebar.vue
|- SearchSidebarNavigation.vue
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
- 对于绝大多数项目来说,在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。
<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>
<!-- 在 DOM 模板中 -->
<my-component></my-component>
<!-- 在所有地方 -->
<my-component></my-component>
- 组件名应该倾向于完整单词而不是缩写。
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
prop命名规范
1.在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
可读性相关
1.Prop 定义应该尽量详细,至少需要指定其类型。
props: {
status: String
}
// 更好的做法!
props: {
status: {
type: String,
required: true,
validator: function (value) {
return [
'syncing',
'synced',
'version-conflict',
'error'
].indexOf(value) !== -1
}
}
}
2.多个特性的元素应该分多行撰写,每个特性一行。
<img
src="https://vuejs.org/images/logo.png"
alt="Vue Logo"
>
<MyComponent
foo="a"
bar="b"
baz="c"
/>
3.组件模板应该只包含简单的表达式,复杂的表达式则应该重构为计算属性或方法
<!-- 在模板中 -->
{{ normalizedFullName }}
// 复杂表达式已经移入一个计算属性
computed: {
normalizedFullName: function () {
return this.fullName.split(' ').map(function (word) {
return word[0].toUpperCase() + word.slice(1)
}).join(' ')
}
}
性能相关
- v-for必须配合key使用,可以提高部分情况下Vue的渲染性能。
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
- scoped 样式中避免使用元素选择器,因为遍历元素的效率通常很低。
注释规范
代码注释在一个项目的后期维护中显的尤为重要,所以我们要为每一个被复用的组件编写组件使用说明,为组件中每一个方法编写方法说明。 以下情况,务必添加注释
1.公共组件使用说明;
2.各组件中重要函数或者类说明;
3.复杂的业务逻辑处理说明;
4.特殊情况的代码处理说明,对于代码中特殊用途的变量、存在临界值、函数中使用的hack、使用了某种算法或思路等需要进行注释描述 ;
5.注释块必须以 /**(至少两个星号)开头**/
;
6.单行注释使用//
开发规范
1.eslint
环境配置及包管理
- 为了兼容老项目,建议使用nvm方便切换node环境。
- 使用yarn或者cnpm下载依赖包