SvelteKit 项目结构详解：文件命名、路由布局与错误处理最佳实践

sveltekit-structure by spences10/svelte-skills-kit

326 周安装量

58 GitHub Stars

GitHub

安装命令

npx skills add https://github.com/spences10/svelte-skills-kit --skill sveltekit-structure

开发 JavaScript 框架代码规范

🇨🇳中文介绍

SvelteKit 结构

快速开始

文件类型: +page.svelte (页面) | +layout.svelte (包装器) | +error.svelte (错误边界) | +server.ts (API 端点)

路由: src/routes/about/+page.svelte → /about | src/routes/posts/[id]/+page.svelte → /posts/123

布局: 应用于所有子路由。任何层级的 +layout.svelte 都会包装其下级路由。

广告位招租

在这里展示您的产品或服务

触达数万 AI 开发者，精准高效

联系我们

相关 Skills

find-skills 技能搜索工具 - Vercel Labs 开源智能体技能包管理器

762,600 周安装

Vercel React 最佳实践指南 | 58条Next.js性能优化规则与代码重构

258,600 周安装

Vercel Web界面规范检查工具 - 自动检测代码是否符合Web设计指南

208,300 周安装

agent-browser 浏览器自动化工具 - Vercel Labs 命令行网页操作与测试

138,300 周安装

src/routes/
├── +layout.svelte              # 根布局 (所有页面)
├── +page.svelte                # 主页 /
├── about/+page.svelte          # /about
└── dashboard/
    ├── +layout.svelte          # 仪表板布局 (仅限仪表板页面)
    ├── +page.svelte            # /dashboard
    └── settings/+page.svelte   # /dashboard/settings

<!-- +layout.svelte -->
<script>
	let { children } = $props();
</script>

<nav><!-- 导航 --></nav>
<main>{@render children()}</main>
<footer><!-- 页脚 --></footer>

file-naming.md - 文件命名约定
layout-patterns.md - 嵌套布局
error-handling.md - +error.svelte 放置位置
svelte-boundary.md - 组件级错误/加载中状态
ssr-hydration.md - SSR 和仅浏览器端代码

布局: {@render children()} | 错误: +error.svelte 应放在出错路由的上方
分组: (name) 文件夹不影响 URL | 仅客户端: 检查 browser
最后验证时间: 2025-01-11

🇺🇸English

SvelteKit Structure

Quick Start

File types: +page.svelte (page) | +layout.svelte (wrapper) | +error.svelte (error boundary) | +server.ts (API endpoint)

Routes: src/routes/about/+page.svelte → /about | src/routes/posts/[id]/+page.svelte → /posts/123

Layouts: Apply to all child routes. +layout.svelte at any level wraps descendants.

Example

src/routes/
├── +layout.svelte              # Root layout (all pages)
├── +page.svelte                # Homepage /
├── about/+page.svelte          # /about
└── dashboard/
    ├── +layout.svelte          # Dashboard layout (dashboard pages only)
    ├── +page.svelte            # /dashboard
    └── settings/+page.svelte   # /dashboard/settings



<!-- +layout.svelte -->
<script>
	let { children } = $props();
</script>

<nav><!-- Navigation --></nav>
<main>{@render children()}</main>
<footer><!-- Footer --></footer>

Reference Files

file-naming.md - File naming conventions
layout-patterns.md - Nested layouts
error-handling.md - +error.svelte placement
svelte-boundary.md - Component-level error/pending
ssr-hydration.md - SSR and browser-only code

Notes

Layouts: {@render children()} | Errors: +error.svelte above failing route
Groups: (name) folders don't affect URL | Client-only: check browser
Last verified: 2025-01-11

Weekly Installs

326

Repository

spences10/svelt…ills-kit

GitHub Stars

First Seen

Jan 20, 2026

Security Audits

Gen Agent Trust HubPass SocketPass SnykFail

Installed on

opencode283

gemini-cli257

codex253

github-copilot242

cursor236

amp211

React 组合模式指南：Vercel 组件架构最佳实践，提升代码可维护性

105,000 周安装