LogoTanStarter 文档
LogoTanStarter 文档
首页模板介绍代码库快速开始环境配置
网站配置
部署

功能集成

Cloudflare数据库身份验证邮件邮件订阅存储支付通知分析聊天框联盟营销

功能定制

元数据页面落地页博客组件用户管理密钥管理

代码库

项目结构代码检查编辑器设置更新代码库
X (Twitter)

项目结构

TanStarter 模板文件和文件夹组织概述

TanStarter 遵循基于 TanStack Router 文件路由的模块化架构,专注于可扩展性和可维护性。

根目录结构

styles.css
biome.json
content-collections.ts
drizzle.config.ts
drizzle.config.local.ts
vite.config.ts
wrangler.jsonc

关键文件

  • vite.config.ts:Vite 配置,含 TanStack Start、Cloudflare、Tailwind CSS 和 Content Collections 插件
  • wrangler.jsonc:Cloudflare Workers 配置,包括 D1 数据库和 R2 存储绑定
  • content-collections.ts:博客、法律条款页面和更新日志的 Content Collections 配置
  • drizzle.config.ts:数据库的 Drizzle ORM 配置
  • biome.json:Biome 代码检查和格式化配置
  • .env.example:环境变量模板

关键目录

/src/api 目录

按功能组织的服务端 API 逻辑:

contact.ts
newsletter.ts
payment.ts
user-files.ts
users.ts

/src/lib 目录

核心应用程序逻辑和实用程序:

blog.ts
changelog.ts
formatter.ts
markdown.ts
pages.ts
price-plan.ts
routes.ts
seo.ts
urls.ts
utils.ts

/src/routes 目录

routes 目录遵循 TanStack Router 文件路由约定:

__root.tsx
index.tsx

/src/components 目录

组件按功能和用途组织,以便更好地维护:

共享组件

共享组件在整个应用程序中可重用,并在专用目录中组织:

功能模块的组件

组件目录按功能组织,便于定位和维护与特定功能相关的组件,如身份验证、博客、仪表盘等。

下一步

现在您了解了项目结构,探索这些相关主题:

开发环境

配置开发环境

环境配置

配置环境变量

开始使用

TanStarter 模板入门文档

更新代码库

保持项目代码库最新

密钥管理

学习如何在 TanStarter 中管理 API 密钥

代码检查

在 TanStarter 中使用 Biome 进行代码质量管理

目录

根目录结构
关键文件
关键目录
/src/api 目录
/src/lib 目录
/src/routes 目录
/src/components 目录
共享组件
功能模块的组件
下一步