# SvelteKit - 全栈 Svelte 框架 ## 概述 SvelteKit 是 Svelte 的官方**全栈框架**，提供基于文件的路由、服务器端渲染 (SSR)、静态站点生成 (SSG)、渐进增强的表单处理以及适用于任何平台的部署适配器。 **主要特点**： * **基于文件的路由** ：从 `src/routes/` 目录结构自动路由 * **加载函数** ：类型安全的数据获取（`+page.ts`、`+page.server.ts`） * **表单操作**：具有渐进增强功能的本机表单处理 * **SSR/SSG/SPA** ：具有每条路线控制的灵活渲染模式 * **适配器**：部署到 Vercel、Netlify、Node.js、Cloudflare 等 * **TypeScript-first** ：从 `$types` 生成类型以确保类型安全 * **Hooks** ：类似中间件的`handle`、`handleError`、`handleFetch` * **API 路由** ：REST 端点的 `+server.ts` 文件 **安装**： # 创建新的 SvelteKit 项目 npm 创建 svelte@latest my-app cd 我的应用程序 npm 安装 npm run dev -- --open # 模板：骨架、演示应用程序、库 # 选择：TypeScript、ESLint、Prettier、Playwright、Vitest ## 项目结构 ### 标准 SvelteKit 布局我的-sveltekit-应用程序/ ├── src/ │ ├──routes/ # 基于文件的路由 │ │ ├── +page.svelte # / (主页) │ │ ├── +page.ts # 通用加载函数 │ │ ├── +page.server.ts # 服务端加载函数 │ │ ├── +layout.svelte # 共享布局 │ │ ├── +layout.ts # 布局加载函数 │ │ ├── +error.svelte # 错误页面 │ │ ├── 关于/ │ │ │ └── +page.svelte # /about │ │ ├── 博客/ │ │ │ ├── +page.svelte # /blog (列表) │ │ │ ├── +page.server.ts # 加载帖子 │ │ │ └── [蛞蝓]/ │ │ │ ├── +page.svelte # /blog/my-post │ │ │ └── +page.server.ts │ │ └── API/ │ │ └── 帖子/ │ │ └── +server.ts # GET /api/posts │ ├── 库/ │ │ ├── 组件/ │ │ ├── server/ # 仅服务器实用程序 │ │ │ └── 数据库.ts │ │ ├── 店铺/ │ │ └── 实用程序/ │ ├── hooks.server.ts # 服务器钩子 │ ├── hooks.client.ts # 客户端钩子 │ ├── app.html # HTML 模板 │ └── app.d.ts # TypeScript 声明 ├── static/ # 静态资源（robots.txt、favicon） ├── 测试/ # 剧作家测试 ├── svelte.config.js # SvelteKit 配置 ├── vite.config.ts # Vite 配置 └── package.json ## 基于文件的路由 ### 路由约定 **文件命名决定路由**：文件 |路线 |目的 ---|---|--- `+page.svelte` | `/` |页面组件 `+page.ts` | - |通用负载（客户端+服务器） `+page.server.ts` | - |仅服务器负载 `+layout.svelte` | - |共享布局 `+layout.ts` | - |布局负载 `+layout.server.ts` | - |服务器布局负载 `+server.ts` | `/api/...` | API 端点（GET/POST/等） `+error.svelte` | - |误差边界 ### 基本路线 src/路线/ ├── +page.svelte # / (主页) ├── 关于/ │ └── +page.svelte # /about ├── 联系方式/ │ └── +page.svelte # /contact └── 定价/ └── +page.svelte # /定价 ### 动态路由 src/路线/ └── 博客/ ├── +page.svelte # /blog（列表） ├── [鼻涕虫]/ │ └── +page.svelte # /blog/my-post └── 【类别】/ └── [鼻涕虫]/ └── +page.svelte # /blog/tech/my-post **访问路由参数**： <脚本语言=“ts”> 从 './$types' 导入类型 { PageData }；让 { 数据 } = $props<{ 数据: PageData }>(); <文章>

{data.post.title}

{data.post.content}

### 可选参数 src/路线/ └── 存档/ └── [[年份]]/ └── [[月]]/ └── +page.svelte # /archive, /archive/2024, /archive/2024/11 // src/routes/archive/[[年]]/[[月]]/+page.ts 从 './$types' 导入类型 { PageLoad }；导出常量负载：PageLoad = async ({ params }) => { const 年 = params.year || new Date().getFullYear(); const 月份 = params.month ||无效的; 返回{ 年，月，帖子：等待 fetchPosts({ 年，月 }) }; }; ### 其余参数 src/路线/ └── 文档/ └── [...路径]/ └── +page.svelte # /docs/guide/intro, /docs/api/reference // src/routes/docs/[...path]/+page.ts 导出常量负载：PageLoad = async ({ params }) => { const 路径 = params.path; //“指南/介绍” const 段 = path.split('/'); // [“指南”、“介绍”] 返回{ 文档：等待 fetchDoc(路径) }; }; ## 加载函数 ### 通用加载 (+page.ts) 在服务器和客户端上运行。必须使用“fetch”来获取数据。 // src/routes/products/+page.ts 从 './$types' 导入类型 { PageLoad }；导出常量负载： PageLoad = async ({ fetch, params, url }) => { const 响应=await fetch('/api/products'); const products =等待response.json(); 返回{ 产品， searchQuery: url.searchParams.get('q') || ” }; }; // 预渲染选项导出常量预渲染= true； // 静态生成导出常量 ssr = false; // 禁用SSR（SPA模式）导出常量 csr = true; // 启用客户端渲染 ### 仅服务器加载 (+page.server.ts) 仅在服务器上运行。允许直接数据库访问。 // src/routes/dashboard/+page.server.ts 从“@sveltejs/kit”导入{重定向}；从 './$types' 导入类型 { PageServerLoad }；从 '$lib/server/database' 导入 { db }; 导出常量负载：PageServerLoad = async ({ locals, cookies }) => { // 检查身份验证 if (!locals.user) { 抛出重定向（303，'/登录'）； } // 直接数据库查询（仅限服务器） const stats = 等待 db.query.stats.findFirst({ 其中： eq(stats.userId, locals.user.id) }); // 敏感数据保留在服务器上 const apiKey = process.env.SECRET_API_KEY; const data = 等待 fetchPrivateData(apiKey); 返回{ 统计数据，用户数据：数据 }; }; ### 带有 Promise 的流媒体 // src/routes/posts/+page.server.ts 从 './$types' 导入类型 { PageServerLoad }；导出常量负载：PageServerLoad = async () => { 返回{ // 立即数据特色：await db.posts.findMany({ 其中：{ 特色：true } }), // 流数据（异步加载）最近： db.posts.findMany({ orderBy: {createdAt: 'desc' } }), 热门： db.posts.findMany({ orderBy: {views: 'desc' } }) }; }; <脚本语言=“ts”> 从 './$types' 导入类型 { PageData }；让 { 数据 } = $props<{ 数据: PageData }>();

精选

{#each data.featured as post} <文章>{post.title} {/每个}

待办事项

{#if 形式？.成功}

待办事项已创建！

{/如果}

{#each data.todos 作为待办事项}

<输入类型=“复选框” 检查= {todo.done} onchange={(e) => e.currentTarget.form?.requestSubmit()} /> {todo.text}

{/每个} <风格> .完成{ 文本装饰：穿行；不透明度：0.6； } ### 渐进增强 <脚本语言=“ts”> 从'$app/forms'导入{增强}；从 './$types' 导入类型 { PageData, ActionData }; let { data, form } = $props<{ data: PageData, form?: ActionData }>(); 让 isLoading = $state(false); <表格方法=“发布” 使用：增强={() => { 正在加载= true; 返回异步（{更新}）=> { 等待更新（）；正在加载=假； }; }} > <按钮类型=“提交”禁用= {isLoading}> {正在加载？ '搜索...' : '搜索'} {#if 形式？.结果}

{结果.标题}

{/如果} ## API 路由 (+server.ts) ### REST 端点 // src/routes/api/posts/+server.ts 从 '@sveltejs/kit' 导入 { json }；从'./$types'导入类型{RequestHandler}；导出 const GET: RequestHandler = async ({ url }) => { const limit = Number(url.searchParams.get('limit')) || 10； const offset = Number(url.searchParams.get('offset')) || 0; const posts =等待db.posts.findMany({ 取：极限，跳过：偏移量， orderBy: { createAt: 'desc' } }); 返回 json(帖子); }; 导出 const POST: RequestHandler = async ({ request, locals }) => { if (!locals.user) { 返回 json({ 错误: '未经授权' }, { 状态: 401 }); } const data =等待request.json(); const post = 等待 db.posts.create({ 数据：{ 标题：数据.标题，内容：数据.内容，作者 ID: locals.user.id } }); 返回 json(post, { 状态: 201 }); }; ### 动态 API 路由 // src/routes/api/posts/[id]/+server.ts 从 '@sveltejs/kit' 导入 { error, json }; 从'./$types'导入类型{RequestHandler}；导出 const GET: RequestHandler = async ({ params }) => { const post = 等待 db.posts.findUnique({ 其中： { id: params.id } }); 如果（！post）{ 抛出错误（404，'找不到帖子'）； } 返回 json(post); }; 导出 const PATCH: RequestHandler = async ({ params, request, locals }) => { if (!locals.user) { 抛出错误（401，'未经授权'）； } const post = wait db.posts.findUnique({ 其中：{ id: params.id } }); if (post.authorId !== locals.user.id) { 抛出错误（403，'禁止'）； } const data =等待request.json(); const update = 等待 db.posts.update({ 其中：{ id: params.id }, 数据：{ 标题：数据.标题，内容：数据.内容 } }); 返回 json（更新）； }; 导出 const DELETE: RequestHandler = async ({ params, locals }) => { if (!locals.user) { 抛出错误（401，'未经授权'）； } const post = wait db.posts.findUnique({ 其中：{ id: params.id } }); if (post.authorId !== locals.user.id) { 抛出错误（403，'禁止'）； } 等待 db.posts.delete({ 其中：{ id: params.id } }); 返回新的响应（null，{状态：204}）； }; ## 钩子 ### 服务器挂钩 (hooks.server.ts) // src/hooks.server.ts 从“@sveltejs/kit”导入{重定向，类型句柄}；从“@sveltejs/kit/hooks”导入{序列}； // 认证中间件 const auth: Handle = async ({ 事件, 解析 }) => { const sessionToken = event.cookies.get('session'); 如果（会话令牌）{ event.locals.user = 等待 getUserFromSession(sessionToken); } 返回解析（事件）； }; // 日志中间件 const 日志记录：Handle = async ({ event, resolve }) => { const start = Date.now(); const 响应 = 等待解析（事件）； const 持续时间 = Date.now() - 开始； console.log(`${event.request.method} ${event.url.pathname} ${response.status} ${duration}ms`); 返回响应； }; // 受保护的路由中间件 const 保护：句柄 = async ({ 事件，解析 }) => { if (event.url.pathname.startsWith('/admin')) { if (!event.locals.user?.isAdmin) { 抛出重定向（303，'/登录'）； } } if (event.url.pathname.startsWith('/dashboard')) { if (!event.locals.user) { 抛出重定向（303，'/登录'）； } } 返回解析（事件）； }; // 按顺序组合钩子导出 const 句柄 = 序列（身份验证、日志记录、保护）； // 错误处理导出 const handleError = async ({ 错误, 事件 }) => { console.error('错误：', 错误); 返回{ message: '发生意外错误', 代码：错误？.代码？？ “未知” }; }; // 获取处理（修改请求）导出 const handleFetch = async ({ 请求, 获取 }) => { // 将身份验证标头添加到内部 API 调用 if (request.url.startsWith('https://api.example.com')) { request.headers.set('授权', `承载 ${process.env.API_TOKEN}`); } 返回获取（请求）； }; ### 客户端挂钩 (hooks.client.ts) // src/hooks.client.ts 从'@sveltejs/kit'导入类型{HandleClientError}；导出 const handleError: HandleClientError = async ({ 错误, 事件 }) => { console.error('客户端错误：', error); // 发送到错误跟踪服务 if (窗口类型!== '未定义') { // Sentry、LogRocket 等 } 返回{ 消息：“出了点问题”， }; }; ## 环境变量 ### 静态环境变量 // src/lib/config.ts 从 '$env/static/public' 导入 { env }；从 '$env/static/private' 导入 { env as privateEnv }； // 公共变量（在浏览器中可用）导出常量 PUBLIC_API_URL = env.PUBLIC_API_URL; 导出常量 PUBLIC_SITE_NAME = env.PUBLIC_SITE_NAME; // 私有变量（仅限服务器）导出常量 DATABASE_URL = privateEnv.DATABASE_URL; 导出常量 SECRET_KEY = privateEnv.SECRET_KEY; ### 动态环境变量 // src/routes/+page.server.ts 从 '$env/dynamic/private' 导入 { env }；从 './$types' 导入类型 { PageServerLoad }；导出常量负载：PageServerLoad = async () => { // 可以在运行时改变 const apiUrl = env.API_URL; 返回{ 数据：等待 fetch(apiUrl).then(r => r.json()) }; }; **环境文件（.env）**： # 公共（暴露于浏览器） PUBLIC_API_URL=https://api.example.com PUBLIC_ANALYTICS_ID=UA-123456789 # 私有（仅限服务器） DATABASE_URL=postgres://localhost:5432/mydb SECRET_KEY=超级密钥 STRIPE_SECRET_KEY=sk_live_abc123 ## 预渲染和 SSR ### 预渲染选项 // src/routes/blog/+page.ts 导出常量预渲染= true； // 在构建时预渲染导出常量 ssr = true; // 服务器端渲染（默认）导出常量 csr = true; // 客户端渲染（默认） **预渲染整个网站**： // svelte.config.js 导出默认值{ 套件：{ 预渲染：{ 条目：['*'], 爬行：正确 } } }; ### 动态预渲染 // src/routes/blog/[slug]/+page.server.ts 从 './$types' 导入类型 { EntryGenerator, PageServerLoad }; 导出常量负载：PageServerLoad = async ({ params }) => { const post = 等待 db.posts.findUnique({ 其中： { slug: params.slug } }); 返回{发布}； }; // 在构建时为所有帖子生成静态页面导出常量条目： EntryGenerator = async () => { const posts =等待db.posts.findMany(); 返回 posts.map(post => ({ slug：post.slug })); }; 导出常量预渲染= true； ## 适配器 ### Vercel 适配器 npm install -D @sveltejs/adapter-vercel // svelte.config.js 从“@sveltejs/adapter-vercel”导入适配器；导出默认值{ 套件：{ 适配器：适配器（{ 运行时：'edge'，//或'nodejs' 区域：['iad1', 'sfo1'], 分割：假 }) } }; ### Netlify 适配器 npm install -D @sveltejs/adapter-netlify // svelte.config.js 从“@sveltejs/adapter-netlify”导入适配器；导出默认值{ 套件：{ 适配器：适配器（{ edge: false, // 对于边缘函数为 true 分割：假 }) } }; ### 节点适配器 npm install -D @sveltejs/适配器节点 // svelte.config.js 从“@sveltejs/adapter-node”导入适配器；导出默认值{ 套件：{ 适配器：适配器（{ 输出：'构建'，预压缩：真， env前缀：'MY_' }) } }; **运行生产服务器**： npm 运行构建节点构建 ### 静态适配器 (SSG) npm install -D @sveltejs/adapter-static // svelte.config.js 从“@sveltejs/adapter-static”导入适配器；导出默认值{ 套件：{ 适配器：适配器（{ 页面：'构建'，资产：“构建”，后备: '200.html', // SPA 后备预压缩：假 }) } }; ### Cloudflare 页面 npm install -D @sveltejs/adapter-cloudflare // svelte.config.js 从“@sveltejs/adapter-cloudflare”导入适配器；导出默认值{ 套件：{ 适配器：适配器（{ 路线：{ 包括：['/*']，排除：['<构建>'] } }) } }; ## 测试 ### 使用 Vitest 进行单元测试 // src/lib/utils.test.ts 从 'vitest' 导入 { 描述、它、期望 }；从'./utils'导入{formatDate}；描述（'格式日期'，（）=> { it('正确格式化日期', () => { const date = new Date('2024-01-15'); Expect(formatDate(date)).toBe('2024 年 1 月 15 日'); }); }); ### 组件测试 // src/lib/components/Button.test.ts 从 '@testing-library/svelte' 导入 { render, fireEvent }; 从 'vitest' 导入 { 描述、it、期望、vi }；从 './Button.svelte' 导入按钮；描述('按钮', () => { it('用文本渲染', () => { const { getByText } = 渲染（按钮，{ props: { text: '点击我' } }); Expect(getByText('点击我')).toBeInTheDocument(); }); it('调用 onclick 处理程序', async () => { const handleClick = vi.fn(); const { getByText } = 渲染（按钮，{ props: { text: '点击我', onclick: handleClick } }); const Button = getByText('点击我'); 等待 fireEvent.click(按钮); 期望(handleClick).toHaveBeenCalledOnce(); }); }); ### Playwright 的 E2E 测试 // 测试/login.test.ts 从'@playwright/test'导入{期望，测试}； test('用户可以登录', async ({ page }) => { 等待 page.goto('/login'); 等待 page.fill('input[name="email"]', 'user@example.com'); 等待页面.fill（'输入[名称=“密码”]'，'密码123'）; 等待 page.click('button[type="submit"]'); 等待期望（页面）.toHaveURL（'/仪表板'）; 等待期望（page.locator（'h1'））.toContainText（'仪表板'）; }); test('登录验证有效', async ({ page }) => { 等待 page.goto('/login'); 等待 page.click('button[type="submit"]'); wait Expect(page.locator('.error')).toContainText('请填写所有字段'); }); ### 加载功能测试 // src/routes/blog/+page.server.test.ts 从 'vitest' 导入 { 描述、it、期望、vi }；从'./+page.server'导入{加载}； vi.mock('$lib/server/database', () => ({ 数据库：{ 帖子：{ findMany: vi.fn(() => Promise.resolve([ { id: '1', title: '帖子 1' }, { id: '2', title: '帖子 2' } ])) } } })); 描述('博客页面加载', () => { it('加载帖子', async () => { const result = wait load({ params: {}, url: new URL('http://localhost') } as any); 期望(结果.posts).toHaveLength(2); Expect(result.posts[0].title).toBe('帖子 1'); }); }); ## 高级模式 ### 并行加载 // src/routes/dashboard/+layout.server.ts 从 './$types' 导入类型 { LayoutServerLoad }; 导出常量负载：LayoutServerLoad = async ({ locals }) => { // 并行加载数据 const [用户、通知、设置] = wait Promise.all([ db.users.findUnique({ 其中：{ id: locals.user.id } }), db.notifications.findMany({ 其中：{ userId: locals.user.id } }), db.settings.findUnique({ 其中：{ userId: locals.user.id } }) ]); 返回{ 用户，通知，设置 }; }; ### 相关加载 // src/routes/profile/[用户名]/+page.server.ts 从“@sveltejs/kit”导入{错误}；从 './$types' 导入类型 { PageServerLoad }；导出常量负载：PageServerLoad = async（{ params，parent }）=> { // 等待父布局数据 const { user } = 等待父级(); const 配置文件 = 等待 db.profiles.findUnique({ 其中：{ 用户名：params.username } }); 如果（！个人资料）{ 抛出错误（404，'找不到配置文件'）； } // 仅当个人资料存在时才加载帖子 const posts =等待db.posts.findMany({ 其中：{authorId：profile.id}， orderBy: { createAt: 'desc' } }); 返回{ 个人资料，帖子， isOwnProfile: user?.id === profile.id }; }; ### 失效和重新加载 <脚本语言=“ts”> 从 '$app/navigation' 导入 { invalidate, invalidateAll }; 从 '$app/stores' 导入 { page }；异步函数刷新() { // 重新加载当前页面数据等待无效所有（）； } 异步函数refreshPosts() { // 重新加载特定数据等待无效（'/ api / posts'）； } 异步函数刷新用户（）{ // 根据特定的 URL 重新加载数据等待invalidate(url => url.pathname.startsWith('/api/user')); } ### 页面选项 // src/routes/admin/+page.ts 导出常量 ssr = false; // 禁用服务器端渲染导出常量 csr = true; // 启用客户端渲染导出常量预渲染= false; // 禁用预渲染导出 const TrailingSlash = '始终'; // /page/ 而不是 /page ## 部署示例 ### Vercel 部署 # 安装 Vercel CLI npm 安装-g vercel # 登录登录 # 部署韦尔塞尔 # 生产部署韦尔塞尔--产品 **vercel.json** ： { "buildCommand": "npm run build", "devCommand": "npm run dev", “框架”：“sveltekit” } ### Docker 部署（节点适配器） **Dockerfile** ： FROM节点：20-alpine AS构建器工作目录/应用程序复制包*.json ./ 运行 npm ci 复制。。 RUN npm 运行构建运行 npm prune --生产 FROM节点：20-alpine 工作目录/应用程序复制 --from=builder /app/build 构建/ 复制 --from=builder /app/node_modules node_modules/ 复制 package.json 。曝光 3000 ENV NODE_ENV=生产 CMD [“节点”，“构建”] docker build -t my-sveltekit-app 。 docker run -p 3000:3000 my-sveltekit-app ### 静态托管（Netlify、GitHub 页面） # 构建静态站点 npm 运行构建 # 输出到 build/ 目录 # 将 build/ 部署到静态主机 **netlify.toml**： [构建] 命令=“npm运行构建” 发布=“构建” [[重定向]] 来自=“/*” 至=“/200.html” 状态 = 200 ## 最佳实践 1. **使用`+page.server.ts`进行敏感操作** \- 服务器端保密 2. **利用渐进增强** \- 表单无需 JavaScript 即可工作 3. **使用`$types`来保证类型安全** \- SvelteKit 自动生成的类型 4. **实现错误边界** \- 使用 `+error.svelte` 来处理优雅的错误 5. **优化图片** \- 使用`@sveltejs/enhanced-img`进行自动优化 6. **启用预渲染** \- 静态页面更快、更便宜 7. **使用并行加载** \- `Promise.all()` 进行并发数据获取 8. **验证表单数据** \- 使用 Zod 或类似工具进行模式验证 9. **设置安全标头** \- 使用 CSP、CORS 等挂钩。 10. **与剧作家一起测试** \- E2E 测试可防止回归 ## 常见模式 ### 身份验证流程 // src/routes/login/+page.server.ts 导出常量操作 = { 默认值： async ({ request, cookies }) => { const data = 等待 request.formData(); const user =等待验证（data.get（'电子邮件'），data.get（'密码'））; cookies.set('session', user.sessionToken, { 路径：'/'， httpOnly：正确， sameSite: '严格', 安全：真实，最大年龄：60 * 60 * 24 * 7 }); 抛出重定向（303，'/仪表板'）； } }; // src/hooks.server.ts 导出常量句柄：Handle = async（{事件，解析}）=> { const sessionToken = event.cookies.get('session'); 如果（会话令牌）{ event.locals.user = 等待 getUserFromSession(sessionToken); } 返回解析（事件）； }; ### 受保护的路由 // src/routes/dashboard/+page.server.ts 从“@sveltejs/kit”导入{重定向}；从 './$types' 导入类型 { PageServerLoad }；导出常量负载：PageServerLoad = async ({ locals }) => { if (!locals.user) { 抛出重定向（303，'/登录'）； } 返回{ 用户：locals.user }; }; ### 表单验证 // src/routes/register/+page.server.ts 从'@sveltejs/kit'导入{失败}；从 'zod' 导入 { z }；从 './$types' 导入类型 { Actions }； const 架构 = z.object({ 电子邮件：z.string().email(), 密码：z.string().min(8), 确认密码：z.string() }).refine(data => data.password === data.confirmPassword, { 消息：“密码不匹配”，路径：['确认密码'] }); 导出常量操作 = { 默认： async ({ request }) => { const data = 等待 request.formData(); const formData = Object.fromEntries(data); const 结果 = schema.safeParse(formData); 如果（！结果。成功）{ 返回失败（400，{ 错误：result.error.flatten().fieldErrors，数据：表单数据 }); } 等待createUser(结果.数据); 抛出重定向（303，'/登录'）； } } 满足动作； ## 资源 * **SvelteKit 文档**： * **Svelte 教程** ： * **适配器** : * **部署** : * **不和谐**： ## 总结 * **SvelteKit** 是 Svelte 的官方全栈框架 * **基于文件的路由**，带有 `+page.svelte`、`+layout.svelte`、`+server.ts` * **加载函数** 提供类型安全的数据获取（通用和仅服务器） * **表单操作** 支持使用原生 HTML 表单进行渐进式增强 * **SSR/SSG/SPA** 模式，通过 `prerender`、`ssr`、`csr` 进行每条路由控制 * **适配器** 部署到任何平台（Vercel、Netlify、Node、Cloudflare、静态） * **Hooks** 提供类似中间件的功能，用于身份验证、日志记录、错误处理 * **TypeScript-first** 具有自动生成的 `$types` 以实现完整的类型安全 * **环境变量** 与 `$env/static` 和 `$env/dynamic` 模块 * **使用 Vitest（单位）和 Playwright (E2E) 进行测试**

修身夹克

包含技能