2.1 KiB

Raw Blame History Unescape Escape

This file contains ambiguous Unicode characters that may be confused with others in your current locale. If your use case is intentional and legitimate, you can safely ignore this warning. Use the Escape button to highlight these characters.

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 组件结构

<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 类型定义

// 接口定义
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

2.1 KiB Raw Blame History Unescape Escape