开发规范总结

224 阅读2分钟

这是我参与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=””这种模式。

3. 尽可能不写float浮动,禁止滥用定位。