创建你的第一个项目

本教程将指导你使用 Trae IDE 创建你的第一个项目，从项目初始化到部署的完整流程。

前提条件

在开始之前，请确保你已经：

• 安装了 Trae IDE
• 完成了基本设置
• 熟悉基本的编程概念

步骤 1：创建新项目

使用项目向导

1. 打开 Trae IDE
2. 点击 "新建项目" 或使用快捷键 Ctrl+Shift+N (Windows/Linux) 或 Cmd+Shift+N (macOS)
3. 选择项目模板：
   • React 应用：现代前端应用
   • Node.js API：后端服务
   • 全栈应用：前后端一体化
   • 静态网站：简单的 HTML/CSS/JS 项目

配置项目

项目名称: my-first-app
项目位置: ~/Projects/my-first-app
模板: React 应用
包管理器: npm
TypeScript: 是

步骤 2：探索项目结构

创建完成后，你会看到以下项目结构：

my-first-app/
├── public/
│   ├── index.html
│   └── favicon.ico
├── src/
│   ├── components/
│   │   └── App.tsx
│   ├── styles/
│   │   └── App.css
│   ├── utils/
│   └── index.tsx
├── package.json
├── tsconfig.json
└── README.md

关键文件说明

• src/index.tsx：应用入口点
• src/components/App.tsx：主应用组件
• package.json：项目依赖和脚本
• tsconfig.json：TypeScript 配置

步骤 3：启动开发服务器

使用内置终端

1. 打开集成终端：`Ctrl+`` (反引号)
2. 运行开发服务器：

npm run dev

查看应用

开发服务器启动后，你会看到：

✓ 开发服务器已启动
➜ 本地地址: http://localhost:3000
➜ 网络地址: http://192.168.1.100:3000

点击链接或在浏览器中访问 http://localhost:3000 查看你的应用。

步骤 4：修改代码

编辑主组件

打开 src/components/App.tsx 并修改内容：

import React, { useState } from 'react';
import './App.css';

function App() {
  const [count, setCount] = useState(0);
  const [message, setMessage] = useState('欢迎使用 Trae IDE！');

  const handleClick = () => {
    setCount(count + 1);
    setMessage(`你已经点击了 ${count + 1} 次！`);
  };

  return (
    <div className="app">
      <header className="app-header">
        <h1>我的第一个 Trae 应用</h1>
        <p>{message}</p>
        <button 
          className="counter-button" 
          onClick={handleClick}
        >
          点击次数: {count}
        </button>
      </header>
    </div>
  );
}

export default App;

添加样式

更新 src/styles/App.css：

.app {
  text-align: center;
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  justify-content: center;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  color: white;
}

.app-header {
  padding: 2rem;
}

.app-header h1 {
  font-size: 2.5rem;
  margin-bottom: 1rem;
  text-shadow: 2px 2px 4px rgba(0,0,0,0.3);
}

.app-header p {
  font-size: 1.2rem;
  margin-bottom: 2rem;
  opacity: 0.9;
}

.counter-button {
  background: rgba(255, 255, 255, 0.2);
  border: 2px solid rgba(255, 255, 255, 0.3);
  color: white;
  padding: 12px 24px;
  font-size: 1.1rem;
  border-radius: 8px;
  cursor: pointer;
  transition: all 0.3s ease;
  backdrop-filter: blur(10px);
}

.counter-button:hover {
  background: rgba(255, 255, 255, 0.3);
  border-color: rgba(255, 255, 255, 0.5);
  transform: translateY(-2px);
  box-shadow: 0 4px 12px rgba(0,0,0,0.2);
}

步骤 5：使用 AI 功能

AI 代码补全

1. 开始输入代码，Trae AI 会自动提供智能建议
2. 使用 Tab 键接受建议
3. 使用 Esc 键取消建议

AI 聊天助手

1. 打开 AI 聊天面板：Ctrl+Shift+A
2. 询问编程问题：

你：如何在 React 中添加路由？
AI：我来帮你添加 React Router...

AI 代码生成

1. 选中代码或将光标放在函数内
2. 使用快捷键 Ctrl+Shift+G 生成代码
3. 描述你想要的功能，AI 会生成相应代码

步骤 6：添加新组件

创建 Header 组件

在 src/components/ 目录下创建 Header.tsx：

import React from 'react';

interface HeaderProps {
  title: string;
  subtitle?: string;
}

const Header: React.FC<HeaderProps> = ({ title, subtitle }) => {
  return (
    <header className="header">
      <h1>{title}</h1>
      {subtitle && <p>{subtitle}</p>}
    </header>
  );
};

export default Header;

使用新组件

在 App.tsx 中导入并使用：

import Header from './Header';

// 在 JSX 中使用
<Header 
  title="我的第一个 Trae 应用" 
  subtitle="使用 AI 驱动的开发体验" 
/>

步骤 7：测试应用

运行测试

# 运行单元测试
npm test

# 运行测试覆盖率
npm run test:coverage

# 运行端到端测试
npm run test:e2e

编写测试

创建 src/components/__tests__/App.test.tsx：

import { render, screen, fireEvent } from '@testing-library/react';
import App from '../App';

describe('App 组件', () => {
  test('渲染欢迎消息', () => {
    render(<App />);
    expect(screen.getByText('欢迎使用 Trae IDE！')).toBeInTheDocument();
  });

  test('点击按钮增加计数', () => {
    render(<App />);
    const button = screen.getByRole('button');
    
    fireEvent.click(button);
    expect(screen.getByText('你已经点击了 1 次！')).toBeInTheDocument();
  });
});

步骤 8：构建和部署

构建生产版本

# 构建优化后的生产版本
npm run build

# 预览构建结果
npm run preview

部署选项

1. Vercel 部署

# 安装 Vercel CLI
npm i -g vercel

# 部署
vercel

2. Netlify 部署

# 安装 Netlify CLI
npm i -g netlify-cli

# 部署
netlify deploy --prod --dir=dist

3. GitHub Pages

# 安装 gh-pages
npm i -D gh-pages

# 添加部署脚本到 package.json
"scripts": {
  "deploy": "gh-pages -d dist"
}

# 部署
npm run deploy

步骤 9：版本控制

初始化 Git

# 初始化 Git 仓库
git init

# 添加文件
git add .

# 提交
git commit -m "初始提交：创建第一个 Trae 应用"

连接远程仓库

# 添加远程仓库
git remote add origin https://github.com/username/my-first-app.git

# 推送到远程
git push -u origin main

下一步

恭喜！你已经成功创建了第一个 Trae 应用。接下来你可以：

1. 学习更多功能：

   • AI 聊天助手教程
   • 代码生成教程

2. 探索高级特性：

   • 添加数据库集成
   • 实现用户认证
   • 添加 API 路由

3. 优化应用：

   • 性能优化
   • SEO 优化
   • 无障碍访问

4. 部署到生产环境：

   • 配置 CI/CD
   • 监控和分析
   • 错误追踪

故障排除

常见问题

问题：开发服务器无法启动

# 清除缓存
npm run clean

# 重新安装依赖
rm -rf node_modules package-lock.json
npm install

问题：构建失败

# 检查 TypeScript 错误
npm run type-check

# 检查代码规范
npm run lint

问题：AI 功能不工作

• 检查网络连接
• 确认 API 密钥配置
• 重启 Trae IDE

需要帮助？访问 Trae 社区 或查看 文档。