RuoYi-Vue/docs/standards/frontend-coding-standards.md

# RuoYi-Vue 前端编码规范

## 1. 命名规范

### 1.1 文件命名
- Vue 组件：PascalCase，如 `UserList.vue`
- TypeScript 文件：camelCase，如 `userApi.ts`
- 样式文件：kebab-case，如 `user-list.scss`

### 1.2 组件命名
- 使用多单词，避免与 HTML 元素冲突：`UserList`、`AccountCard`
- 使用 PascalCase：`<template><UserList /></template>`

### 1.3 变量命名
- 使用 camelCase：`const userList = ref([])`
- 常量使用 UPPER_SNAKE_CASE：`const MAX_PAGE_SIZE = 100`

## 2. Vue 组件规范

### 2.1 组件结构
```vue
<template>
  <div class="user-list">
    <!-- 模板内容 -->
  </div>
</template>

<script setup lang="ts">
// 导入
import { ref, reactive, onMounted } from 'vue'

// 类型定义
interface User {
  id: number
  name: string
}

// Props 定义
const props = defineProps<{
  userId: number
}>()

// Emits 定义
const emit = defineEmits<{
  (e: 'update', user: User): void
}>()

// 响应式数据
const userList = ref<User[]>([])
const loading = ref(false)

// 计算属性
const totalCount = computed(() => userList.value.length)

// 方法
async function fetchUsers() {
  loading.value = true
  try {
    // ...
  } finally {
    loading.value = false
  }
}

// 生命周期
onMounted(() => {
  fetchUsers()
})
</script>

<style scoped lang="scss">
.user-list {
  // 样式
}
</style>
```

### 2.2 Composition API
- 优先使用 `<script setup>` 语法
- 使用 TypeScript 类型注解
- 响应式数据使用 `ref` 或 `reactive`

## 3. TypeScript 规范

### 3.1 类型定义
```typescript
// 接口定义
export interface User {
  id: number
  name: string
  email?: string
}

// 类型别名
export type UserStatus = 'active' | 'inactive' | 'deleted'
```

### 3.2 避免 any
- 不使用 `any` 类型
- 使用 `unknown` 代替

## 4. 样式规范

### 4.1 使用 scoped
- 所有组件样式使用 `scoped`
- 避免全局样式污染

### 4.2 CSS 变量
- 使用项目定义的 CSS 变量
- 不使用硬编码颜色值

## 5. 最佳实践

- 组件不超过 300 行
- 方法不超过 50 行
- 使用可选链 `?.` 和空值合并 `??`
- 优先使用 `const`，必要时使用 `let`
- 不使用 `var`