UniApp规范

1. 命名规范

1.1 文件命名

• 文件名统一使用小写字母，多个单词之间使用连字符（-）分隔，如：user-profile.vue、api-request.js
• 组件文件命名采用大驼峰命名法（PascalCase），如：UserProfile.vue、TodoList.vue

1.2 变量命名

• 变量名使用小驼峰命名法（camelCase），如：userName、isLoading
• 常量使用全大写字母，多个单词之间使用下划线分隔，如：MAX_COUNT、API_BASE_URL
• 布尔值变量使用 is、has、can 等前缀，如：isVisible、hasPermission

1.3 函数命名

• 函数名使用小驼峰命名法（camelCase）
• 函数名应具有语义化，能够清晰表达函数的功能，如：getUserInfo()、formatDate()

2. 缩进规范

• 统一使用 2 个空格进行缩进，不要使用 Tab 键
• 在 VS Code 中可以通过设置 "editor.tabSize": 2 和 "editor.insertSpaces": true 来保持一致

3. 换行规范

• 每行代码长度不应超过 100 个字符
• 逗号后必须添加空格，如：const arr = [1, 2, 3]
• 对象属性、数组元素等应适当换行以提高可读性：

// 好的示例
const user = {
  id: 1,
  name: 'John',
  email: 'john@example.com',
  age: 25
}

// 数组换行示例
const fruits = [
  'apple',
  'banana',
  'orange',
  'grape'
]

4. Vue 开发规范（基于 Vue 3）

4.1 组件结构

• 组件选项应按照以下顺序排列：
  1. name
  2. components
  3. props
  4. emits
  5. setup 或 data、computed、watch
  6. 生命周期钩子
  7. methods

4.2 模板规范

• 模板中的组件名应使用帕斯卡命名法（PascalCase）
• 组件属性应按重要性排序，使用缩进保持层次清晰
• 指令缩写使用 : 表示 v-bind，@ 表示 v-on

<template>
  <UserProfile 
    :user-info="userInfo" 
    @update="handleUpdate"
  />
</template>

4.3 Composition API 规范

• 使用 <script setup> 语法糖简化组件编写
• 逻辑相关的代码应组织在一起，使用注释分隔不同功能模块
• 响应式数据使用 ref 和 reactive 合理区分

5. React 开发规范

5.1 组件规范

• 函数组件优先于类组件
• 组件文件应默认导出组件本身
• 组件属性应使用 TypeScript 接口定义类型

5.2 Hooks 规范

• 自定义 Hooks 应以 use 开头命名
• Hooks 应在组件顶层调用，不能在条件语句中使用
• 相关的状态和方法应组织在一起

6. CSS/样式规范

6.1 命名规范

• 使用 BEM 命名方法论（Block Element Modifier）
• 类名使用小写字母，多个单词之间使用连字符分隔，如：.user-profile__avatar--large

6.2 样式组织

• 全局样式与组件样式分离
• 使用 SCSS/LESS 时合理嵌套，嵌套层级不超过 3 层
• 颜色、间距等变量统一管理

7. 注释规范

7.1 文件头部注释

每个文件头部应包含文件描述、作者、创建时间等信息：

/**
 * 用户信息组件
 * @author 前端组
 * @date 2025-10-25
 * @description 用于展示用户基本信息
 */

7.2 函数注释

复杂函数应添加注释说明参数、返回值及功能：

/**
 * 格式化日期
 * @param {string} date - 日期字符串
 * @returns {string} 格式化后的日期
 */
function formatDate(date) {
  // ...
}