在前端开发中，统一的编码规范是提升项目可维护性和代码质量的关键。特别是在 Vue.js 项目中，一个清晰的编码规范能够帮助团队保持一致性，使项目更容易理解、维护和扩展。本篇文章将详细介绍 Vue.js 项目的编码规范，从命名规范到组件编写，帮助您构建高质量的前端代码库。

1. 模块命名规范

模块的命名应遵循 kebab-case 格式，这种风格更适合前端项目中常见的文件系统。模块名称尽量简洁、清晰地描述其功能。以 模块名-子模块名 的形式组织文件，更加便于项目结构的理解。

示例：

// 错误示例
compilerCore
runtimeDom

// 正确示例
compiler-core
runtime-dom

2. 文件夹命名规范

文件夹统一使用 kebab-case 格式命名，以功能为中心进行组织。文件夹名称多采用复数形式，例如 components，services 等，体现文件夹中包含多个同类文件，便于管理。

示例：

├── components
├── hooks
├── services
└── utils

3. 组件文件夹命名规范

组件的文件夹命名应遵循 kebab-case 格式，并根据层次关系进行分层。我们推荐使用 组件名-子组件名 的命名方式，保持文件夹结构清晰。

示例：

├── dropdown
│   ├── dropdown-item
│   └── dropdown-menu
├── checkbox
│   ├── checkbox-button
│   └── checkbox-group

4. 组件规范

在 Vue.js 中，建议遵循以下的组件书写顺序和规范：

  • 组件文件的部分顺序为：script、template、style。
  • script 部分的代码顺序为：imports、props、emits、refs、computed、watch、methods。
  • 在模板 <template> 中，标签属性使用双引号；在 JavaScript 中，字符串使用单引号。

示例：

<script setup lang="ts">
// imports
import { ref, computed } from 'vue';
// props
const props = defineProps({ visible: Boolean });
// refs
const count = ref(0);
// computed
const double = computed(() => count.value * 2);
// methods
const increment = () => count.value++;
</script>

<template>
  <div :class="{ visible: props.visible }">
    <span>{{ double }}</span>
  </div>
</template>

<style scoped lang="less">
/* 样式代码 */
</style>

5. 组件属性与事件命名规范

Props 命名

  • Props 使用 lowerCamelCase 命名，在模板中采用 kebab-case 使用，便于阅读和理解。

示例：

const props = defineProps({ greetingText: String });
<WelcomeMessage greeting-text="Hello" />

事件命名

  • 事件应尽量简洁、清晰，通常使用动词命名。事件定义推荐使用对象形式，便于查看事件参数和返回值类型。

示例：

// 事件定义
export const alertEmits = {
  close: (evt) => evt instanceof Event,
  focus: (evt) => evt instanceof FocusEvent,
};
const emit = defineEmits(alertEmits);

6. JavaScript 变量与方法命名规范

变量和方法命名应遵循清晰、易懂的原则。

Boolean 变量

  • Boolean 类型的变量命名应以 is 或 has 开头，以表明其布尔属性。

示例：

const isVisible = true;
const hasError = false;

方法命名

  • 事件处理类方法以 handle 开头，交互事件以 on 开头。
  • 数据请求方法通常以 get 或 fetch 开头，数据提交方法以 post 或 send 开头。

示例：

function handleClick() { /* ... */ }
function getUserData() { /* ... */ }
function postFormData() { /* ... */ }

7. Class 命名规范

Class 名称建议使用 PascalCase，即首字母大写。通过合理的命名格式提高类的可读性，便于理解和扩展。

示例：

class TypeScope {}
class BaseReactiveHandler {}
class ScriptCompileContext {}

8. 常量与枚举命名规范

常量应使用全大写字母和下划线，保持命名的唯一性。枚举的值使用 PascalCase，并且建议将所有常量集中在 constants.ts 文件中，方便查找和管理。

示例：

// constants.ts
export const MAX_ITEMS = 100;
export const DEFAULT_TIMEOUT = 3000;

// 枚举定义
enum RequestStatus {
  PENDING = 'pending',
  SUCCESS = 'success',
  ERROR = 'error',
}

通过遵循这些编码规范，团队可以在开发过程中减少代码差异性，提高代码一致性，便于后期维护和扩展。希望这些内容能够为您在 Vue.js 项目中提供有价值的指导，构建更高质量的前端代码！