rxthinkcmf-wiki/RXThinkCMF_ThinkPhp8_NaiveVue/zh/standards/frontend-code.md

12.7 前端编码规范

:::tip 概述 前端编码规范涵盖 Vue 组件、TypeScript、API 模块、样式和代码风格等方面。 :::

Vue 组件规范

<!-- 推荐的组件结构 -->
<template>
  <!-- 模板内容 -->
</template>

<script setup lang="ts">
// 使用 <script setup lang="ts"> 语法
import { ref, onMounted } from 'vue';

// Props 定义
interface Props {
  id: number;
  name?: string;
}
const props = withDefaults(defineProps<Props>(), {
  name: '',
});

// 响应式数据
const loading = ref(false);
const tableData = ref<any[]>([]);

// 方法
const fetchData = async () => {
  loading.value = true;
  try {
    const res = await getExamplePage({ pageNo: 1, pageSize: 20 });
    tableData.value = res.records;
  } finally {
    loading.value = false;
  }
};

// 生命周期
onMounted(() => fetchData());
</script>

<style scoped>
/* 组件样式 */
</style>

TypeScript 规范

// 接口定义
interface User {
  id: number;
  username: string;
  realname: string;
  status: number;
}

// 枚举定义
enum UserStatus {
  ENABLE = 1,
  DISABLE = 2,
}

// API 响应类型
interface PageResult<T> {
  records: T[];
  total: number;
  size: number;
  current: number;
  pages: number;
}

// Props 类型
interface TableProps {
  data: any[];
  loading?: boolean;
  columns: Column[];
}

API 模块规范

// ui/src/api/system/user.ts
import { http } from '@/utils/http/axios';

// 查询用 GET + params
export function getUserPage(params?: Record<string, any>) {
  return http.request({ url: '/user/page', method: 'GET', params });
}

// 新增用 POST + data
export function userAdd(data: any) {
  return http.request({ url: '/user/add', method: 'POST', data });
}

// 修改用 PUT + data
export function userUpdate(data: any) {
  return http.request({ url: '/user/update', method: 'PUT', data });
}

// 删除用 DELETE
export function userDelete(id: number) {
  return http.request({ url: '/user/delete/' + id, method: 'DELETE' });
}

命名规范

类型	规范	示例
组件文件	PascalCase	BasicTable.vue
API 文件	camelCase	user.ts
API 函数	camelCase	getUserPage
Store 文件	camelCase	user.ts
常量	UPPER_SNAKE_CASE	ACCESS_TOKEN
CSS 类	kebab-case	page-container

代码风格

# ESLint 检查
pnpm lint:eslint

# Prettier 格式化
pnpm lint:prettier

# Stylelint 检查
pnpm lint:stylelint

:::warning 禁止事项

• 不要使用 any 类型（除非确实无法确定类型）
• 不要使用 console.log（生产环境）
• 不要在模板中写复杂逻辑（提取为 computed 或方法）
• 不要在 setup 外使用 Composition API :::