用途:该技能面向基于 TanStack Router、Vinxi 与 Vite 的全栈 React 框架 TanStack Start,用于新建项目、配置路由、集成 TanStack Query、添加 TypeScript 配置以及配置 Netlify 部署。
主要能力与用法:使用 npx create-tanstack-start@latest my-app 创建项目,可加 --template basic 指定模板。项目结构包含 src/routes(路由,如 _root.tsx、index.tsx)、src/server(*.functions.ts 服务端函数)、router.tsx 与自动生成的 routeTree.gen.ts。app.config.ts 使用 defineConfig 配置 Vite 插件、server.preset(如 netlify)与 tsr 的 routesDirectory、generatedRouteTree。router.tsx 用 createRouter 创建实例,支持 scrollRestoration、defaultPreload、错误/待定/未找到组件。集成 TanStack Query 需 npm install @tanstack/react-query,在 router 中注入 QueryClient 作为 context,并用 createRootRouteWithContext 与 QueryClientProvider 包裹根路由。部署 Netlify 需 netlify.toml 中设置 build command npm run build、publish .output/public、NODE_VERSION 20 与 functions directory .output/server。开发脚本为 vinxi dev、vinxi build、vinxi start。环境变量服务端用 process.env,客户端需 VITE 前缀。样式可用 Tailwind 或 CSS Modules,数据库可选 Drizzle + Neon。
适用场景:需要快速搭建带路由、数据查询与 Netlify 部署的 TanStack Start 项目时。
限制:资料以配置示例为主,未提供收费、价格或性能数据;具体版本兼容性需以实际依赖为准。