Vue精简版风格指南（推荐）

Vue精简版风格指南

本文是针对Vue框架的风格指南，旨在提供一些代码风格和组件设计的建议，以确保团队协作的一致性和可读性。

组件定义

组件名

组件名应该始终使用 PascalCase 命名规则，因为这更符合 Vue的内部组件实例化机制，比如：

// 推荐
<template>
  <MyComponent />
</template>

<script>
export default {
  name: 'MyComponent',
  // ...
}
</script>

// 不推荐
<template>
  <my-component />
</template>

<script>
export default {
  name: 'my-component',
  // ...
}
</script>

单文件组件结构

一个单文件组件应该包含：

• 模板
• 脚本
• 样式

其中，脚本必须在样式之前，因为样式可能会依赖于脚本中的变量或计算属性。

Prop定义

Prop应该尽可能详细地定义类型、默认值和验证规则，例如：

props: {
  size: {
    type: String,
    default: 'normal',
    validator(value) {
      return ['small', 'normal', 'large'].indexOf(value) !== -1
    }
  }
}

组件选项顺序

对于组件内的代码顺序，我们推荐下面的顺序：

• 组件名
• Props
• data
• 计算属性
• 生命周期函数
• 方法
• 状态同步操作（watch）

export default {
  name: 'MyComponent',
  props: { /* ... */ },
  data() { /* ... */ },
  computed: { /* ... */ },
  created() { /* ... */ },
  methods: { /* ... */ },
  watch: { /* ... */ }
}

组件样式

命名规则

我们推荐使用 BEM 命名规则（块、元素、修饰符）来命名组件内的样式类。例如：

// 块
.alert { /* ... */ }

// 块 > 元素
.alert__message { /* ... */ }

// 块--修饰符
.alert--success { /* ... */ }

CSS预处理器

我们建议使用 Sass 或者 Less 作为代码预处理器来编写样式，以便于实现变量、混合和函数等功能。

示例说明

组件名

组件名应该使用 PascalCase 命名规则，示例：

// 推荐
<template>
  <MyComponent />
</template>

<script>
export default {
  name: 'MyComponent',
  // ...
}
</script>

// 不推荐
<template>
  <my-component />
</template>

<script>
export default {
  name: 'my-component',
  // ...
}
</script>

Prop定义

Prop应该尽可能详细地定义类型、默认值和验证规则，例如：

props: {
  size: {
    type: String,
    default: 'normal',
    validator(value) {
      return ['small', 'normal', 'large'].indexOf(value) !== -1
    }
  }
}

组件选项顺序

对于组件内的代码顺序，我们推荐下面的顺序：

export default {
  name: 'MyComponent',
  props: { /* ... */ },
  data() { /* ... */ },
  computed: { /* ... */ },
  created() { /* ... */ },
  methods: { /* ... */ },
  watch: { /* ... */ }
}

总结

编写可重用和易维护的Vue组件需要一些规范和适当的习惯。本文所述的Vue精简版风格指南只是其中一些，但这些规则已被广泛应用，并得到了Vue社区的认可。