init: 初始化项目文档中心
- 添加前端设计文档(rui-admin、收银系统、模块打包) - 添加前端实施计划(收银后台功能完善) - 添加通用规范(API、编码、数据库、前端开发规则) - 建立文档索引和使用指南
This commit is contained in:
@@ -0,0 +1,111 @@
|
||||
# 前端开发规则
|
||||
|
||||
> 适用于 {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` |
|
||||
Reference in New Issue
Block a user