cunkebao_v3/Moncter/TaskShow/USAGE.md

使用说明

快速开始

1. 安装依赖

cd TaskShow
npm install

2. 启动开发服务器

npm run dev

3. 构建生产版本

npm run build

核心功能使用

1. 使用封装的请求方法

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

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. 使用路由

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 组件

<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 文件：

# .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 错误会自动清除用户信息并提示登录