这是我参与11月更文挑战的第21天,活动详情查看:2021最后一次更文挑战
一、开发工具使用规范
建议使用统一开发工具vscode;
二、注释规范
注释规范主要是作者规范和函数规范。
作者规范:
/*
* @Author:
* @Date: 2020-06-01 11:58:32
* @LastEditors:
*/
函数规范:
/**
* @Desc:
* @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=””这种模式。