vue前端开发规范

一、开发工具使用规范

1. 建议使用统一开发工具vscode;
2. 使用统一缩进，以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。

参考文档