142 lines
2.7 KiB
Markdown
142 lines
2.7 KiB
Markdown
# 12.7 前端编码规范
|
|
|
|
:::tip 概述
|
|
前端编码规范涵盖 Vue 组件、TypeScript、API 模块、样式和代码风格等方面。
|
|
:::
|
|
|
|
## Vue 组件规范
|
|
|
|
```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 规范
|
|
|
|
```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 模块规范
|
|
|
|
```typescript
|
|
// 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` |
|
|
|
|
## 代码风格
|
|
|
|
```bash
|
|
# ESLint 检查
|
|
pnpm lint:eslint
|
|
|
|
# Prettier 格式化
|
|
pnpm lint:prettier
|
|
|
|
# Stylelint 检查
|
|
pnpm lint:stylelint
|
|
```
|
|
|
|
:::warning 禁止事项
|
|
- 不要使用 `any` 类型（除非确实无法确定类型）
|
|
- 不要使用 `console.log`（生产环境）
|
|
- 不要在模板中写复杂逻辑（提取为 computed 或方法）
|
|
- 不要在 `setup` 外使用 Composition API
|
|
::: |