浏览文档目录
第 02 课 · 跑起项目

创建第一个 Start 应用

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

TanStack Start入门12 分钟REV 02Markdown .md
完成后你将能够

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

01

生成项目

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

terminalbash
npx @tanstack/cli@latest create my-app --blank -y
cd my-app
pnpm dev
02

先认两个文件

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

实践

把本课变成可验证的能力

完成检查点

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

动手练习

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

验证方法

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

常见错误
  • 手动修改自动生成的 routeTree 文件。
  • 把根文档结构放进普通子路由。
SOURCE REFERENCES · CHECKED 2026-08-03https://tanstack.com/cli/latest/docs/quick-start