vue3 - 代码编写规范

1. 目录结构

├── src/
│   ├── assets/          # 静态资源
│   ├── components/      # 组件
│   │   ├── base/        # 基础 UI 组件（按钮、输入框等）
│   │   ├── business/    # 业务组件（用户卡片、商品卡片等）
│   │   ├── common/      # 全局复用组件
│   ├── views/           # 视图页面
│   ├── store/           # 状态管理
│   ├── router/          # 路由
│   ├── api/             # API 请求
│   ├── utils/           # 工具函数
│   ├── config/          # 全局配置
│   ├── mock/            # Mock 数据
│   ├── hooks/           # 组合式 API 自定义 Hooks
│   ├── directives/      # 自定义指令
│   ├── main.ts          # 入口文件
│   ├── App.vue          # 根组件
├── public/              # 静态文件
├── vite.config.ts       # Vite 配置
├── tsconfig.json        # TypeScript 配置

2. 代码风格

2.1 变量命名

• 变量命名使用小驼峰命名法（camelCase）

  const userName = '张三';

• 常量使用全大写 + 下划线

  const API_BASE_URL = 'https://api.example.com';

• 组件命名使用大驼峰命名法（PascalCase）

  import UserProfile from '@/components/UserProfile.vue';

2.2 组件结构

<script setup lang="ts">
import { ref } from 'vue';
const count = ref(0);
</script>

<template>
  <div>
    <p>{{ count }}</p>
    <button @click="count++">Increment</button>
  </div>
</template>

<style scoped>
div {
  text-align: center;
}
</style>

2.3 组件属性顺序

1. import 语句
2. defineProps / defineEmits
3. ref / reactive 变量
4. 事件处理函数（根据逻辑分组）
5. computed / watch
6. 生命周期钩子
7. template
8. style

3. 代码封装规范

3.1 组件封装

• 基础 UI 组件（如按钮、弹框） → components/base/
• 业务组件（如用户卡片、商品卡片） → components/business/
• 全局通用组件（如导航栏、页脚） → components/common/

3.2 何时使用 TSX 组件

• 动态渲染复杂结构（如表格列渲染）
• 需要高性能渲染的大量数据列表
• 可跨多个项目复用的组件

3.3 何时封装 utils/

• 无状态纯函数，可复用逻辑（如格式化、计算）
• 业务无关工具（如 deepClone、debounce）

3.4 何时封装常量与 Mock 数据

• 全局配置项 → config/
• 开发调试时需要的假数据 → mock/
• 不可变的静态数据（如枚举、地区代码） → constants.ts

3.5 何时使用自定义 Hooks（存放在 hooks/）

• 跨组件逻辑复用（如 useAuth）
• 封装 API 逻辑（如 useFetchUser）
• 处理 DOM 操作（如 useScroll）

3.6 何时使用自定义指令（存放在 directives/）

• 全局 DOM 操作（如 v-focus、v-permission）
• 特定交互行为封装（如点击外部关闭菜单）