sveltekit

# SvelteKit 全栈开发 ## 概览 SvelteKit 是基于 Svelte 构建的官方全栈框架。它提供文件系统路由、服务端渲染 (SSR)、静态站点生成 (SSG)、API 路由和渐进式表单操作，所有这些都基于 Svelte 的编译时响应式模型，且不会向浏览器发送额外的运行时开销。在构建注重开发体验 (DX) 和性能的快速、现代 Web 应用时使用此技能。 ## 何时使用此技能 - 构建新的 Svelte 全栈 Web 应用时 - 需要针对不同路由进行 SSR 或 SSG 的精细控制时 - 将单页应用 (SPA) 迁移到具备服务端能力的框架时 - 项目需要文件系统路由和同构 API 端点时 - 用户询问关于 `+page.svelte`、`+layout.svelte`、`load` 函数或表单操作时 ## 工作原理 ### 第 1 步：项目设置 bash npm create svelte@latest my-app cd my-app npm install npm run dev 提示时选择 **Skeleton project** + **TypeScript** + **ESLint/Prettier**。 脚手架生成的目录结构： src/ routes/ +page.svelte ← 根页面组件 +layout.svelte ← 根布局 (包裹所有页面) +error.svelte ← 错误边界 lib/ server/ ← 仅服务端代码 (不会打包到客户端) components/ ← 共享组件 app.html ← HTML 外壳 static/ ← 静态资源 ### 第 2 步：文件系统路由 `src/routes/` 中的每个 `+page.svelte` 文件直接映射到一个 URL： src/routes/+page.svelte → / src/routes/about/+page.svelte → /about src/routes/blog/[slug]/+page.svelte → /blog/:slug src/routes/shop/[...path]/+page.svelte → /shop/* (全匹配) **路由组** (不影响 URL 段): 使用 `(group)/` 文件夹包裹。 **私有路由** (无法通过 URL 访问): 使用 `_` 或 `(group)` 作为前缀。 ### 第 3 步：使用 `load` 函数加载数据 在页面旁边使用 `+page.ts` (通用) 或 `+page.server.ts` (仅服务端) 文件： typescript // src/routes/blog/[slug]/+page.server.ts import { error } from '@sveltejs/kit'; import type { PageServerLoad } from './$types'; export const load: PageServerLoad = async ({ params, fetch }) => { const post = await fetch(`/api/posts/${params.slug}`).then(r => r.json()); if (!post) { error(404, 'Post not found'); } return { post }; }; svelte import typ