155 lines
3.0 KiB
Markdown
155 lines
3.0 KiB
Markdown
|
# 使用说明
|
|||
|
|
|
|||
|
|
## 快速开始
|
|||
|
|
|
|||
|
|
### 1. 安装依赖
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
cd TaskShow
|
|||
|
|
npm install
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 启动开发服务器
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run dev
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 构建生产版本
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
npm run build
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 核心功能使用
|
|||
|
|
|
|||
|
|
### 1. 使用封装的请求方法
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
import { request } from '@/utils/request'
|
|||
|
|
|
|||
|
|
// GET 请求
|
|||
|
|
const getUserList = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await request.get('/api/users', { page: 1, pageSize: 10 })
|
|||
|
|
console.log(response.data) // 响应数据
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('请求失败:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// POST 请求
|
|||
|
|
const createUser = async () => {
|
|||
|
|
try {
|
|||
|
|
const response = await request.post('/api/users', {
|
|||
|
|
name: 'John',
|
|||
|
|
email: 'john@example.com'
|
|||
|
|
})
|
|||
|
|
console.log(response.data)
|
|||
|
|
} catch (error) {
|
|||
|
|
console.error('创建失败:', error)
|
|||
|
|
}
|
|||
|
|
}
|
|||
|
|
|
|||
|
|
// 自定义配置
|
|||
|
|
const customRequest = async () => {
|
|||
|
|
const response = await request.get('/api/users', {}, {
|
|||
|
|
showLoading: false, // 不显示 loading
|
|||
|
|
showError: false, // 不显示错误提示
|
|||
|
|
timeout: 5000 // 5秒超时
|
|||
|
|
})
|
|||
|
|
}
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 2. 使用 Pinia Store
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
import { useUserStore } from '@/store'
|
|||
|
|
|
|||
|
|
// 在组件中使用
|
|||
|
|
const userStore = useUserStore()
|
|||
|
|
|
|||
|
|
// 设置 token
|
|||
|
|
userStore.setToken('your-token-here')
|
|||
|
|
|
|||
|
|
// 设置用户信息
|
|||
|
|
userStore.setUserInfo({ id: 1, name: 'John' })
|
|||
|
|
|
|||
|
|
// 清除用户信息
|
|||
|
|
userStore.clearUser()
|
|||
|
|
|
|||
|
|
// 访问状态
|
|||
|
|
console.log(userStore.token)
|
|||
|
|
console.log(userStore.userInfo)
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 3. 使用路由
|
|||
|
|
|
|||
|
|
```typescript
|
|||
|
|
import { useRouter, useRoute } from 'vue-router'
|
|||
|
|
|
|||
|
|
const router = useRouter()
|
|||
|
|
const route = useRoute()
|
|||
|
|
|
|||
|
|
// 编程式导航
|
|||
|
|
router.push('/home')
|
|||
|
|
router.push({ name: 'Home', params: { id: 1 } })
|
|||
|
|
|
|||
|
|
// 获取路由参数
|
|||
|
|
const id = route.params.id
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
### 4. 使用 Element Plus 组件
|
|||
|
|
|
|||
|
|
```vue
|
|||
|
|
<template>
|
|||
|
|
<el-button type="primary" @click="handleClick">点击</el-button>
|
|||
|
|
<el-table :data="tableData">
|
|||
|
|
<el-table-column prop="name" label="姓名" />
|
|||
|
|
<el-table-column prop="email" label="邮箱" />
|
|||
|
|
</el-table>
|
|||
|
|
</template>
|
|||
|
|
|
|||
|
|
<script setup lang="ts">
|
|||
|
|
import { ref } from 'vue'
|
|||
|
|
import { ElMessage } from 'element-plus'
|
|||
|
|
|
|||
|
|
const tableData = ref([
|
|||
|
|
{ name: 'John', email: 'john@example.com' }
|
|||
|
|
])
|
|||
|
|
|
|||
|
|
const handleClick = () => {
|
|||
|
|
ElMessage.success('操作成功')
|
|||
|
|
}
|
|||
|
|
</script>
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 项目结构说明
|
|||
|
|
|
|||
|
|
- `src/api/` - API 接口定义
|
|||
|
|
- `src/components/` - 公共组件
|
|||
|
|
- `src/router/` - 路由配置
|
|||
|
|
- `src/store/` - Pinia 状态管理
|
|||
|
|
- `src/types/` - TypeScript 类型定义
|
|||
|
|
- `src/utils/` - 工具函数（包含封装的 request）
|
|||
|
|
- `src/views/` - 页面组件
|
|||
|
|
|
|||
|
|
## 环境变量配置
|
|||
|
|
|
|||
|
|
在项目根目录创建 `.env.development` 和 `.env.production` 文件：
|
|||
|
|
|
|||
|
|
```bash
|
|||
|
|
# .env.development
|
|||
|
|
VITE_API_BASE_URL=http://localhost:8080/api
|
|||
|
|
|
|||
|
|
# .env.production
|
|||
|
|
VITE_API_BASE_URL=https://api.example.com/api
|
|||
|
|
```
|
|||
|
|
|
|||
|
|
## 注意事项
|
|||
|
|
|
|||
|
|
1. 所有 API 请求会自动添加 token（如果存在）
|
|||
|
|
2. 请求失败会自动显示错误提示（可通过配置关闭）
|
|||
|
|
3. 请求时会自动显示 loading（可通过配置关闭）
|
|||
|
|
4. 401 错误会自动清除用户信息并提示登录
|