128 lines
2.7 KiB
Markdown
128 lines
2.7 KiB
Markdown
|
# Task Show
|
|||
|
|
|
|||
|
|
基于 Vue3 + Element Plus + Pinia + TypeScript + Axios 的前端基础工程
|
|||
|
|
|
|||
|
|
## 技术栈
|
|||
|
|
|
|||
|
|
- **Vue 3** - 渐进式 JavaScript 框架
|
|||
|
|
- **TypeScript** - JavaScript 的超集
|
|||
|
|
- **Vite** - 下一代前端构建工具
|
|||
|
|
- **Element Plus** - 基于 Vue 3 的组件库
|
|||
|
|
- **Pinia** - Vue 的状态管理库
|
|||
|
|
- **Vue Router** - Vue 官方路由管理器
|
|||
|
|
- **Axios** - 基于 Promise 的 HTTP 客户端
|
|||
|
|
|
|||
|
|
## 项目结构
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
TaskShow/
|
|||
|
|
├── src/
|
|||
|
|
│ ├── assets/ # 静态资源
|
|||
|
|
│ ├── components/ # 公共组件
|
|||
|
|
│ ├── router/ # 路由配置
|
|||
|
|
│ │ └── index.ts
|
|||
|
|
│ ├── store/ # Pinia 状态管理
|
|||
|
|
│ │ └── index.ts
|
|||
|
|
│ ├── types/ # TypeScript 类型定义
|
|||
|
|
│ │ └── api.ts
|
|||
|
|
│ ├── utils/ # 工具函数
|
|||
|
|
│ │ └── request.ts # Axios 请求封装
|
|||
|
|
│ ├── views/ # 页面组件
|
|||
|
|
│ │ └── Home.vue
|
|||
|
|
│ ├── App.vue # 根组件
|
|||
|
|
│ └── main.ts # 入口文件
|
|||
|
|
├── index.html # HTML 模板
|
|||
|
|
├── package.json # 项目配置
|
|||
|
|
├── tsconfig.json # TypeScript 配置
|
|||
|
|
├── vite.config.ts # Vite 配置
|
|||
|
|
└── README.md # 项目说明
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm install
|
|||
|
|
# 或
|
|||
|
|
yarn install
|
|||
|
|
# 或
|
|||
|
|
pnpm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 开发
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
# 或
|
|||
|
|
yarn dev
|
|||
|
|
# 或
|
|||
|
|
pnpm dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 构建
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
# 或
|
|||
|
|
yarn build
|
|||
|
|
# 或
|
|||
|
|
pnpm build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 预览构建结果
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run preview
|
|||
|
|
# 或
|
|||
|
|
yarn preview
|
|||
|
|
# 或
|
|||
|
|
pnpm preview
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 请求封装说明
|
|||
|
|
|
|||
|
|
### 使用方式
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
import { request } from '@/utils/request'
|
|||
|
|
|
|||
|
|
// GET 请求
|
|||
|
|
const response = await request.get('/api/users', { id: 1 })
|
|||
|
|
|
|||
|
|
// POST 请求
|
|||
|
|
const response = await request.post('/api/users', { name: 'John' })
|
|||
|
|
|
|||
|
|
// PUT 请求
|
|||
|
|
const response = await request.put('/api/users/1', { name: 'Jane' })
|
|||
|
|
|
|||
|
|
// DELETE 请求
|
|||
|
|
const response = await request.delete('/api/users/1')
|
|||
|
|
|
|||
|
|
// 自定义配置
|
|||
|
|
const response = await request.get('/api/users', {}, {
|
|||
|
|
showLoading: false, // 不显示 loading
|
|||
|
|
showError: false, // 不显示错误提示
|
|||
|
|
timeout: 5000 // 自定义超时时间
|
|||
|
|
})
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 特性
|
|||
|
|
|
|||
|
|
1. **自动添加 Token**：请求时自动从 store 中获取 token 并添加到请求头
|
|||
|
|
2. **统一错误处理**：自动处理 HTTP 错误和业务错误
|
|||
|
|
3. **Loading 提示**：请求时自动显示 loading（可配置）
|
|||
|
|
4. **错误提示**：请求失败时自动显示错误消息（可配置）
|
|||
|
|
5. **类型支持**：完整的 TypeScript 类型定义
|
|||
|
|
|
|||
|
|
### 环境变量
|
|||
|
|
|
|||
|
|
在 `.env`、`.env.development` 或 `.env.production` 文件中配置 API 基础地址：
|
|||
|
|
|
|||
|
|
```
|
|||
|
|
VITE_API_BASE_URL=/api
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## License
|
|||
|
|
|
|||
|
|
MIT
|
|||
|
|
|