Vue Coding Style-李状的博客

Vue 简介

Vue (读音 /vjuː/，类似于 view) 是一套用于构建用户界面的渐进式框架。与其它大型框架不同的是，Vue 被设计为可以自底向上逐层应用。Vue 的核心库只关注视图层，不仅易于上手，还便于与第三方库或既有项目整合。另一方面，当与现代化的工具链以及各种支持类库结合使用时，Vue 也完全能够为复杂的单页应用提供驱动。

优先级 A 的规则：必要的 (规避错误)

组件名为多个单词: 避免跟现有的以及未来的 HTML 元素相冲突
组件的 data (除了 new Vue 外的任何地方)必须是一个函数: 当 data 的值是一个对象时，它会在这个组件的所有实例之间共享，为了每个组件实例都管理其自己的数据，每个实例必须生成一个独立的数据对象，在 JavaScript 中，在一个函数中返回这个对象就可以了。
Prop 定义应该尽量详细
总是用 key 配合 v-for
永远不要把 v-if 和 v-for 同时用在同一个元素上

为组件样式设置作用域: 对于应用来说，顶级 App 组件和布局组件中的样式可以是全局的，但是其它所有组件都应该是有作用域的。使用 scoped 特性或 CSS Modules（基于 class 的类似 BEM 的策略）。

//scoped
<template>
  <button class="button-close">X</button>

</template>


<!-- 使用 `scoped` 特性 -->

<style scoped>

.button-close {

  background-color: red;
}
</style>


//CSS Modules

<template>
  <button :class="[$style.buttonClose]">X</button>

</template>


<!-- 使用 CSS Modules -->

<style module>

.buttonClose {

  background-color: red;
}
</style>

私有属性名: 使用模块作用域保持不允许外部访问的函数的私有性。如果无法做到这一点，就始终为插件、混入等不考虑作为对外公共 API 的自定义私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突 (比如 $_yourPluginName_)。

优先级 B 的规则：强烈推荐 (增强可读性)

组件文件: 只要有能够拼接文件的构建系统，就把每个组件单独分成文件。
文件名命名要么始终是单词大写开头 (PascalCase)，要么始终是横线连接 (kebab-case)
基础组件名: 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V。
单例组件名应该以 The 前缀命名，以示其唯一性
紧密耦合的组件名: 和父组件紧密耦合的子组件应该以父组件名作为前缀命名，不推荐通过在其父组件命名的目录中新建子组件文件夹嵌套子组件。
组件名中的单词顺序: 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。
自闭合组件:
1. 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的:
```


<MyComponent/>
```
2. 在 DOM 模板中，HTML 并不支持自闭合的自定义元素:
```


<my-component></my-component>
```

组件名大小写：

在单文件组件、字符串模板中组件名应该总是 PascalCase 的:
```


<MyComponent/>
```

在 DOM 模板中总是 kebab-case 的:

<!-- 在 DOM 模板中 -->

<my-component></my-component>

JS/JSX 中的组件名大小写: JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串。
完整单词的组件名: 组件名应该倾向于完整单词而不是缩写。
Prop 名大小写: 在声明 prop 的时候，其命名应该始终使用 camelCase(JavaScript中)，而在模板和 JSX 中应该始终使用 kebab-case(HTML中)。
多个特性的元素应该分多行撰写，每个特性一行
简单的表达式： 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法。
简单的计算属性: 应该把复杂计算属性分割为尽可能多的更简单的属性。
带引号的特性值: 非空 HTML 特性值应该始终带引号。
指令缩写： 指令缩写 (用 : 表示 v-bind: 、用 @ 表示 v-on: 和用 # 表示 v-slot:) 应该要么都用要么都不用。
多个属性之间增加一个空行，易于阅读和导航
应该避免在 scoped 中出现元素选择器

「下次一定」

Vue Coding Style

TOC

Vue 简介

优先级 A 的规则：必要的 (规避错误)

优先级 B 的规则：强烈推荐 (增强可读性)

FEATURED TAGS