当前位置：首页 > news >正文

从0死磕全栈第九天：Trae AI IDE一把梭，使用react-query快速打通前后端接口调试

news 2025/9/18 7:06:26

昨天下雨，今天放晴，我们的感情也不过如此罢了——但代码，却能一直跑下去。

最近半个月，我一直在使用 VSCode 开发前端和后端项目。虽然一开始配置语言环境比 Goland、IDEA 等工具麻烦些，但一旦配置好，后续开发就一马平川。VSCode 已有十年历史，依然保持高频更新，生态强大。

此前我们已经完成了《从0死磕全栈第8天：使用 Nest.js 五分钟搭建后端开发环境》的搭建，后端接口已就绪。本次，我们尝试使用全新的 AI IDE —— Trae IDE，来打通前后端，实现一个完整的「用户列表」页面功能。

技术栈概览

前端：Vite + React + TypeScript
状态管理 & API 请求：React Query
后端：Nest.js（已部署于 localhost:3000）
IDE：Trae（AI 驱动的集成开发环境）

第一步：创建项目文件夹

在终端中执行：

mkdir vite-reactts-reactq
cd vite-reactts-reactq

✅ Trae 与 VSCode 的区别：

Trae 将项目名居中显示在顶部；

不会自动将项目名转为大写，更符合开发者习惯。

第二步：打开 Trae 聊天窗口

默认情况下，Trae 的聊天窗口是开启的。若关闭，按快捷键：

Ctrl + U

让 Trae 创建项目

在聊天框输入：

“请用 Vite 创建一个 React + TypeScript 项目，并安装 react-query”

Trae 会返回如下命令：

npm create vite@latest . -- --template react-ts

⚠️ 注意：在 Windows 上，如果使用 PowerShell 执行 npm 命令失败，需手动在终端输入 y 确认创建。

接着安装依赖：

npm install

然后安装 react-query：

npm install react-query

Trae 还贴心地提供了一个 useQuery 使用示例：

import { useQuery } from 'react-query';const fetchUsers = async () => {const res = await fetch('/api/users');if (!res.ok) throw new Error('Failed to fetch users');return res.json();
};const UserList = () => {const { data, isLoading, error } = useQuery('users', fetchUsers);if (isLoading) return <div>Loading...</div>;if (error) return <div>Error: {error.message}</div>;return (<ul>{data.map(user => <li key={user.id}>{user.name}</li>)}</ul>);
};

第三步：启动前端服务

在 Trae 终端中运行：

npm run dev

🚨 常见问题：
npm : 无法加载文件 xxx\pm.ps1，因为在此系统上禁止运行脚本
解决方案：以管理员身份打开 PowerShell，执行：
Set-ExecutionPolicy -ExecutionPolicy RemoteSigned -Scope CurrentUser