一、开发工具使用规范
- 建议使用统一开发工具vscode;
- 使用统一缩进,以tab缩进;
二、注释规范
注释规范主要是作者规范和函数规范。
作者规范:
/*
* @Author:
* @Date: 2020-06-01 11:58:32
* @LastEditors:
*/
函数规范:
/**
* @Description:
* @Author:
* @Date: 2020-06-08 10:57:39
* @param {type}
* @return:
*/
三、命名规范
1. 组件名为多个单词
组件名应该始终是多个单词的,根组件 App 以及 、 之类的 Vue 内置组件除外。
这样做可以避免跟现有的以及未来的 HTML 元素相冲突,因为所有的 HTML 元素名称都是单个单词的。
反例:
Vue.component('todo', {
// ...
})
好例子:
Vue.component('todo-item', {
// ...
})
2.单文件组件文件的大小写
单文件组件的文件名应该要么始终是单词大写开头 (PascalCase),要么始终是横线连接 (kebab-case)。这里我们统一使用单词大写开头。
反例:
components/
|- mycomponent.vue
components/
|- myComponent.vue
好例子:
components/
|- MyComponent.vue
components/
|- my-component.vue
3.组件名中的单词顺序
组件名应该以高级别的 (通常是一般化描述的) 单词开头,以描述性的修饰词结尾。
反例:
components/
|- ClearSearchButton.vue
|- ExcludeFromSearchInput.vue
|- LaunchOnStartupCheckbox.vue
|- RunSearchButton.vue
|- SearchInput.vue
|- TermsCheckbox.vue
好例子:
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
这样很容易就能看出来哪些组件是针对搜索的了。
4.完整单词的组件名
组件名应该倾向于完整单词而不是缩写。
编辑器中的自动补全已经让书写长命名的代价非常之低了,而其带来的明确性却是非常宝贵的。不常用的缩写尤其应该避免。
反例:
components/
|- SdSettings.vue
|- UProfOpts.vue
好例子:
components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue
5.Prop 名大小写
在声明 prop 的时候,其命名应该始终使用 camelCase,而在模板和 JSX 中应该始终使用 kebab-case。
反例:
props: {
'greeting-text': String
}
<WelcomeMessage greetingText="hi"/>
好例子:
props: {
greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
四、样式编写规范
1. 为组件样式设置作用域
对于应用来说,顶级 App 组件和布局组件中的样式可以是全局的,但是其它所有组件都应该是有作用域的。
方案:
- 使用
scoped
attribute - 使用 CSS Modules
- 使用 BEM 约定
2. 样式尽量不写内联模式
比如style=""这种模式。
3.尽可能不写float浮动,禁止滥用定位。
五、其他规范
1. 为 v-for 设置键值
在组件上总是必须用 key 配合 v-for,以便维护内部组件及其子树的状态。而且不加key值时编译器会提示报错。
反例:
<ul>
<li
v-for="todo in todos"
>
{{ todo.text }}
</li>
</ul>
好例子:
<ul>
<li
v-for="todo in todos"
:key="todo.id"
>
{{ todo.text }}
</li>
</ul>
2.隐性的父子组件通信
应该优先通过 prop 和事件进行父子组件之间的通信,而不是 this.$parent 或变更 prop。