vifo
d0771597a6
- 添加前端设计文档（rui-admin、收银系统、模块打包） - 添加前端实施计划（收银后台功能完善） - 添加通用规范（API、编码、数据库、前端开发规则） - 建立文档索引和使用指南
112 lines
3.0 KiB
Markdown
112 lines
3.0 KiB
Markdown
# 前端开发规则
|
||
|
||
> 适用于 {root} 仓库下所有前端工程
|
||
|
||
## 技术栈
|
||
|
||
| 场景 | 框架 | UI 库 | CSS |
|
||
|------|------|------|-----|
|
||
| **管理后台 PC** | Vue 3 + TypeScript + Vite | Element Plus | UnoCSS |
|
||
| **移动端/小程序** | uniapp (Vue 3) + TypeScript | uView Plus | UnoCSS |
|
||
| **H5 官网** | Vue 3 + TypeScript + Vite | — | UnoCSS |
|
||
|
||
## 统一规范
|
||
|
||
### 必选
|
||
|
||
- **Vue 3** Composition API（`<script setup lang="ts">`）
|
||
- **TypeScript** 严格模式
|
||
- **UnoCSS** 原子化 CSS（替代 Tailwind / 手写 CSS）
|
||
- **pnpm** 包管理器
|
||
- **ESLint** + `@antfu/eslint-config`
|
||
- **Vite** 构建工具
|
||
|
||
### 推荐
|
||
|
||
- **Pinia** 状态管理
|
||
- **Vue Router** 路由
|
||
- **Axios** HTTP 请求（统一拦截器 + Token 刷新）
|
||
- **unplugin-auto-import** 自动导入 Vue/API
|
||
- **unplugin-vue-components** 自动导入组件
|
||
- **Vitest** 单元测试
|
||
|
||
### 禁止
|
||
|
||
- Vue 2 / Options API
|
||
- JavaScript（必须 TS）
|
||
- CSS 文件（使用 UnoCSS 原子类）
|
||
- npm/yarn（必须 pnpm）
|
||
- 多行 CSS 样式块（用 UnoCSS 属性化或原子类替代）
|
||
|
||
## 项目结构
|
||
|
||
```
|
||
admin-ui/（或 web-ui/）
|
||
├── package.json
|
||
├── vite.config.ts
|
||
├── uno.config.ts
|
||
├── tsconfig.json
|
||
├── index.html
|
||
├── src/
|
||
│ ├── App.vue
|
||
│ ├── main.ts
|
||
│ ├── router/
|
||
│ ├── stores/ # Pinia
|
||
│ ├── api/ # Axios 封装 + 接口
|
||
│ ├── views/ # 页面组件
|
||
│ ├── components/ # 公共组件
|
||
│ ├── composables/ # 组合函数
|
||
│ ├── utils/ # 工具函数
|
||
│ └── styles/ # 仅放 UnoCSS 快捷方式或极少全局样式
|
||
└── public/
|
||
```
|
||
|
||
## API 调用规范
|
||
|
||
```typescript
|
||
// api/user.ts
|
||
import { request } from '@/utils/request'
|
||
|
||
export interface UserInfo {
|
||
id: number
|
||
username: string
|
||
nickname: string
|
||
}
|
||
|
||
export const userApi = {
|
||
page: (params: any) => request.get<PageResult<UserInfo>>('/user/info/page', { params }),
|
||
create: (data: UserInfo) => request.post('/user/info/create', data),
|
||
update: (data: UserInfo) => request.put('/user/info/update', data),
|
||
remove: (id: number) => request.delete(`/user/info/${id}`),
|
||
}
|
||
```
|
||
|
||
## UnoCSS 使用
|
||
|
||
```vue
|
||
<template>
|
||
<!-- 原子类 -->
|
||
<div class="flex items-center gap-4 p-4 bg-white rounded shadow">
|
||
<span class="text-lg font-bold text-primary">标题</span>
|
||
<el-button type="primary" class="ml-auto">
|
||
操作
|
||
</el-button>
|
||
</div>
|
||
</template>
|
||
|
||
<style lang="scss" scoped>
|
||
// 仅极少情况下使用，优先用 UnoCSS 原子类或 shortcuts
|
||
</style>
|
||
```
|
||
|
||
## 命名规范
|
||
|
||
| 类型 | 规则 | 示例 |
|
||
|------|------|------|
|
||
| 文件名 | PascalCase | `UserList.vue`, `useTable.ts` |
|
||
| 目录名 | kebab-case | `user-info/`, `order-detail/` |
|
||
| 变量/函数 | camelCase | `userList`, `fetchData` |
|
||
| 组件 | PascalCase | `<UserCard />` |
|
||
| Pinia store | useXxxStore | `useUserStore` |
|
||
| 路径 | 小写短横线 | `/user/info`, `/order/detail` |
|