vue项目风格指南

最新推荐文章于 2022-05-25 10:31:08 发布

chensunxu

最新推荐文章于 2022-05-25 10:31:08 发布

阅读量191

点赞数 1

分类专栏： vue2.0

本文链接：https://blog.csdn.net/chensunxu/article/details/108558423

版权

vue2.0 专栏收录该内容

7 篇文章 0 订阅

订阅专栏

规则归类

# 优先级 A：必要的

这些规则会帮你规避错误，所以学习并接受它们带来的全部代价吧。这里面可能存在例外，但应该非常少，且只有你同时精通 JavaScript 和 Vue 才可以这样做。

# 优先级 B：强烈推荐

这些规则能够在绝大多数工程中改善可读性和开发体验。即使你违反了，代码还是能照常运行，但例外应该尽可能少且有合理的理由。

# 优先级 C：推荐

当存在多个同样好的选项，选任意一个都可以确保一致性。在这些规则里，我们描述了每个选项并建议一个默认的选择。也就是说只要保持一致且理由充分，你可以随意在你的代码库中做出不同的选择。请务必给出一个好的理由！通过接受社区的标准，你将会：

训练你的大脑，以便更容易的处理你在社区遇到的代码；
不做修改就可以直接复制粘贴社区的代码示例；
能够经常招聘到和你编码习惯相同的新人，至少跟 Vue 相关的东西是这样的。

# 优先级 D：谨慎使用

有些 Vue 特性的存在是为了照顾极端情况或帮助老代码的平稳迁移。当被过度使用时，这些特性会让你的代码难于维护甚至变成 bug 的来源。这些规则是为了给有潜在风险的特性敲个警钟，并说明它们什么时候不应该使用以及为什么。

# 其他

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

# 组件数据

组件的 data 必须是一个函数。

Vue.component('some-comp', {
  data: function () {
    return {
      foo: 'bar'
    }
  }
})

// In a .vue file
export default {
  data () {
    return {
      foo: 'bar'
    }
  }
}

# Prop定义的必要

props: {
  status: String,
  default: ''
}

// 多种类型
props: {
  status: [String, Number],
  default: ''
}

// 更好的做法！
props: {
  status: {
    type: String,
    required: true,
    validator: function (value) {
      return [
        'syncing',
        'synced',
        'version-conflict',
        'error'
      ].indexOf(value) !== -1
    }
  }
}

# 避免 v-if 和 v-for 用在一起

永远不要把 v-if 和 v-for 同时用在同一个元素上。

一般我们在两种常见的情况下会倾向于这样做：

为了过滤一个列表中的项目 (比如 v-for="user in users" v-if="user.isActive")。在这种情形下，请将 users 替换为一个计算属性 (比如 activeUsers)，让其返回过滤后的列表。
为了避免渲染本应该被隐藏的列表 (比如 v-for="user in users" v-if="shouldShowUsers")。这种情形下，请将 v-if 移动至容器元素上 (比如 ul、ol)。

<ul>
  <li v-for="user in activeUsers" :key="user.id">
    {{ user.name }}
  </li>
</ul>

<ul v-if="shouldShowUsers">
  <li v-for="user in users" :key="user.id">
    {{ user.name }}
  </li>
</ul>

# 为 v-for 设置键值

<ul>
  <li v-for="todo in todos" :key="todo.id">
    {{ todo.text }}
  </li>
</ul>

# 为组件样式设置作用域

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

<!-- 使用 `scoped` attribute -->
<style scoped>
.button {
  border: none;
  border-radius: 2px;
}

.button-close {
  background-color: red;
}
</style>

# 组件文件

只要有能够拼接文件的构建系统，就把每个组件单独分成文件。

当你需要编辑一个组件或查阅一个组件的用法时，可以更快速的找到它。

components/
|- TodoList.vue
|- TodoItem.vue

# 单文件组件文件的大小写

单文件组件的文件名应该始终是单词大写开头 (PascalCase)

components/
|- MyComponent.vue

使用的时候始终是横线连接

<template>
  <div>
    <my-component />
  </div>
</template>
<script>
import MyComponent from '@/components/MyComponent'
export default {
  components: { MyComponent }
}
</script>

# 应用特定样式和约定的基础组件 (也就是展示类的、无逻辑的或无状态的组件) 应该全部以一个特定的前缀开头，比如 Base。

components/
|- BaseButton.vue
|- BaseTable.vue
|- BaseIcon.vue

# 单例组件名

只应该拥有单个活跃实例的组件应该以 The 前缀命名，以示其唯一性。

这不意味着组件只可用于一个单页面，而是每个页面只使用一次。这些组件永远不接受任何 prop，因为它们是为你的应用定制的，而不是它们在你的应用中的上下文。如果你发现有必要添加 prop，那就表明这实际上是一个可复用的组件，只是目前在每个页面里只使用一次。

components/
|- TheHeading.vue
|- TheSidebar.vue

# 紧密耦合的组件名

和父组件紧密耦合的子组件应该以父组件名作为前缀命名。

如果一个组件只在某个父组件的场景下有意义，这层关系应该体现在其名字上。因为编辑器通常会按字母顺序组织文件，所以这样做可以把相关联的文件排在一起。

components/
|- TodoList.vue
|- TodoListItem.vue
|- TodoListItemButton.vue

# 组件名中的单词顺序

组件名应该以高级别的 (通常是一般化描述的) 单词开头，以描述性的修饰词结尾。

components/
|- SearchButtonClear.vue
|- SearchButtonRun.vue
|- SearchInputQuery.vue
|- SearchInputExcludeGlob.vue
|- SettingsCheckboxTerms.vue
|- SettingsCheckboxLaunchOnStartup.vue

# 自闭合组件

在单文件组件、字符串模板中没有内容的组件应该是自闭合的——但在 DOM 模板里永远不要这样做。

自闭合组件表示它们不仅没有内容，而且刻意没有内容。其不同之处就好像书上的一页白纸对比贴有“本页有意留白”标签的白纸。而且没有了额外的闭合标签，你的代码也更简洁。

不幸的是，HTML 并不支持自闭合的自定义元素——只有官方的“空”元素。所以上述策略仅适用于进入 DOM 之前 Vue 的模板编译器能够触达的地方，然后再产出符合 DOM 规范的 HTML。

<!-- 在单文件组件、字符串模板中 -->
<my-component />

<!-- 在 DOM 模板中 -->
<my-component></my-component>

# 模板中的组件名大小写

对于绝大多数项目来说，在单文件组件和字符串模板中组件名应该总是 PascalCase 的——但是在 DOM 模板中总是 kebab-case 的。

<!-- 在单文件组件和字符串模板中 -->
<MyComponent/>

<!-- 在 DOM 模板中 -->
<my-component></my-component>

# JS/JSX 中的组件名大小写

JS/JSX 中的组件名应该始终是 PascalCase 的，尽管在较为简单的应用中只使用 Vue.component 进行全局组件注册时，可以使用 kebab-case 字符串。

import MyComponent from './MyComponent.vue'

export default {
  name: 'MyComponent',
  // ...
}

# 完整单词的组件名

components/
|- StudentDashboardSettings.vue
|- UserProfileOptions.vue

# 组件/实例的选项的顺序

组件/实例的选项应该有统一的顺序。

副作用 (触发组件外的影响)
- el
全局感知 (要求组件以外的知识)
- name
- parent
组件类型 (更改组件的类型)
- functional
模板修改器 (改变模板的编译方式)
- delimiters
- comments
模板依赖 (模板内使用的资源)
- components
- directives
- filters
组合 (向选项里合并 property)
- extends
- mixins
接口 (组件的接口)
- inheritAttrs
- model
- props/propsData
本地状态 (本地的响应式 property)
- data
- computed
事件 (通过响应式事件触发的回调)
- watch
- 生命周期钩子 (按照它们被调用的顺序)
  - beforeCreate
  - created
  - beforeMount
  - mounted
  - beforeUpdate
  - updated
  - activated
  - deactivated
  - beforeDestroy
  - destroyed
非响应式的 property (不依赖响应系统的实例 property)
- methods
渲染 (组件输出的声明式描述)
- template/render
- renderError

# 元素 attribute 的顺序

元素 (包括组件) 的 attribute 应该有统一的顺序。

这是我们为组件选项推荐的默认顺序。它们被划分为几大类，所以你也能知道新添加的自定义 attribute 和指令应该放到哪里。

定义 (提供组件的选项)
- is
列表渲染 (创建多个变化的相同元素)
- v-for
条件渲染 (元素是否渲染/显示)
- v-if
- v-else-if
- v-else
- v-show
- v-cloak
渲染方式 (改变元素的渲染方式)
- v-pre
- v-once
全局感知 (需要超越组件的知识)
- id
唯一的 attribute (需要唯一值的 attribute)
- ref
- key
双向绑定 (把绑定和事件结合起来)
- v-model
其它 attribute (所有普通的绑定或未绑定的 attribute)
事件 (组件事件监听器)
- v-on
内容 (覆写元素的内容)
- v-html
- v-text

# 单文件组件的顶级元素的顺序

<!-- Component.vue -->
<template>...</template>
<script>/* ... */</script>
<style>/* ... */</style>

单文件组件应该总是让 <template> 、<script>和 <style> 标签的顺序保持一致。且 <style> 要放在最后，因为另外两个标签至少要有一个。

优先级 D 的规则：谨慎使用 (有潜在危险的模式)

# scoped 中的元素选择器

元素选择器应该避免在 scoped 中出现。

在 scoped 样式中，类选择器比元素选择器更好，因为大量使用元素选择器是很慢的。

反例

<template>
  <button>X</button>
</template>

<style scoped>
button {
  background-color: red;
}
</style>

好的例子

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

<style scoped>
.btn-close {
  background-color: red;
}
</style>

# 没有在 v-if/v-else-if/v-else 中使用 key

如果一组 v-if + v-else 的元素类型相同，最好使用 key (比如两个 <div> 元素)。

默认情况下，Vue 会尽可能高效的更新 DOM。这意味着其在相同类型的元素之间切换时，会修补已存在的元素，而不是将旧的元素移除然后在同一位置添加一个新元素。如果本不相同的元素被识别为相同，则会出现意料之外的结果。

反例

<div v-if="error">
  错误：{{ error }}
</div>
<div v-else>
  {{ results }}
</div>

好例子

<div v-if="error" key="search-status" >
  错误：{{ error }}
</div>
<div v-else key="search-results">
  {{ results }}
</div>

其他

# CSS最佳定义排序方式：https://blog.csdn.net/chensunxu/article/details/108305218

# 组件/实例的选项的顺序：https://blog.csdn.net/chensunxu/article/details/108592393

chensunxu

关注

1
点赞
踩
0

收藏

觉得还不错? 一键收藏
0
评论
vue项目风格指南

# 组件数据组件的data必须是一个函数。Vue.component('some-comp', { data: function () { return { foo: 'bar' } }})// In a .vue fileexport default { data () { return { foo: 'bar' } }}# Prop定义的必要props: { status: String...
复制链接

扫一扫