---
id: first-start-app
track: learn
product: start
locale: zh-CN
order: 2
revision: 2
sourceCheckedOn: "2026-08-03"
versionRange: "Start ^1"
verifiedAgainst: "TanStack CLI quick-start + @tanstack/react-start@1.168.34"
contentModel: 2
prerequisites:
  - "Node.js 22 或更高版本"
  - "任意一个包管理器"
sourceRefs:
  - "https://tanstack.com/cli/latest/docs/quick-start"
---

# 创建第一个 Start 应用

> 使用官方 CLI 创建最小项目，认识路由树、根文档和开发服务器。

**Outcome:** 能启动项目并说明 src/routes 中两个核心文件的职责。

## 生成项目

官方 CLI 默认生成 TanStack Start 项目。第一次学习可以选择 blank，减少演示代码带来的噪音。

File: `terminal`

```bash
npx @tanstack/cli@latest create my-app --blank -y
cd my-app
pnpm dev
```

## 先认两个文件

__root.tsx 定义整个 HTML 文档和全局布局；index.tsx 是根路径页面。routeTree.gen.ts 由工具生成，第一次不要手动修改。

## 实践与验证

### 完成检查点

开发服务器可以启动，根路由和首页路由都能被路由树识别。

### 动手练习

新增 `/about` 文件路由，在页面中显示当前应用名称，并从首页用类型安全 Link 进入。

### 验证方法

运行类型检查并分别直接访问 `/` 与 `/about`；两条 URL 都应刷新成功且没有类型错误。

### 常见错误

- 手动修改自动生成的 routeTree 文件。
- 把根文档结构放进普通子路由。

## Official sources

- https://tanstack.com/cli/latest/docs/quick-start