Vue

平原孙大妈
209 阅读2分钟

风格指南

优先级为A的规则

  • 组件名为多个单词 ('todo-item')
  • 组件的 data 必须是一个函数。
data: function () {
    return {
      foo: 'bar'
    }
  }
  • Prop 定义应该尽量详细,至少需要指定其类型
  • 总是用 key 配合 v-for
  • 永远不要把 v-if 和 v-for 同时用在同一个元素上(高效、解藕)
  • 更倾向于选用基于 class 的策略而不是 scoped 特性
  • 私有属性名 (在插件、混入等扩展中始终为自定义的私有属性使用 $_ 前缀。并附带一个命名空间以回避和其它作者的冲突)

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

  • 组件文件
  • 单文件组件的文件名应该要么始终是单词大写开头 (MyComponent.vue)，要么始终是横线连接 (my-component.vue)
  • 基础组件名(应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base、App 或 V)
components/
|- VButton.vue
|- VTable.vue
|- VIcon.vue
  • 单例组件名 (只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性)
  • 紧密耦合的组件名(和父组件紧密耦合的子组件应该以父组件名作为前缀命名)
components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue
  • 组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾
components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue
  • 在单文件组件、字符串模板和 JSX 中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做
  • 对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的
  • JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串
  • 组件名应该倾向于完整单词而不是缩写
  • 在声明 prop 的时候，其命名应该始终使用 camelCase，而在模板和 JSX 中应该始终使用 kebab-case
props: {
  greetingText: String
}
<WelcomeMessage greeting-text="hi"/>
  • 多个特性的元素应该分多行撰写，每个特性一行
<img
  src="https://vuejs.org/images/logo.png"
  alt="Vue Logo"
>
  • 组件模板应该只包含简单的表达式，复杂的表达式则应该重构为计算属性或方法
  • 应该把复杂计算属性分割为尽可能多的更简单的属性
  • 非空 HTML 特性值应该始终带引号
<AppSidebar :style="{ width: sidebarWidth + 'px' }">
  • 指令缩写 (用 : 表示 v-bind: 和用 @ 表示 v-on:) 应该要么都用要么都不用

优先级 C 的规则：推荐 (将选择和认知成本最小化)

avatar
文章
阅读
粉丝