SvelteKit 是基于 Svelte 的全栈 Web 框架。与 React 或 Vue 不同，Svelte 是一个编译器，它在构建时将组件编译为高效的原生 JavaScript，而非在浏览器中进行虚拟 DOM diff。SvelteKit 在此之上提供了路由、服务端渲染、静态生成等功能。
Svelte 响应式基础
在 Svelte 5 中，响应式通过运行符（runes）实现。它们是显式的编译器指令，用 $ 前缀标识。
$state — 声明响应式状态
$state 是声明响应式变量的基本方式。
<script lang="ts">
let count = $state(0);
</script>
<button onclick={() => count++}>
点击次数: {count}
</button>当 count 变化时，所有引用它的 DOM 都会自动更新。
$derived — 派生值
$derived 基于已有状态计算新值，且当依赖变化时自动重新计算。
<script lang="ts">
let width = $state(50);
let height = $state(100);
let area = $derived(width * height);
</script>
<p>宽度: {width}px</p>
<p>高度: {height}px</p>
<p>面积: {area}px²</p>$derived 是只读的，你不能直接给它赋值。
$effect — 副作用
当需要响应状态变化执行副作用（如访问 localStorage、发送分析事件）时，使用 $effect。
<script lang="ts">
let theme = $state('light');
$effect(() => {
document.documentElement.dataset.theme = theme;
localStorage.setItem('theme', theme);
});
</script>
<select bind:value={theme}>
<option value="light">亮色</option>
<option value="dark">暗色</option>
</select>初始化项目
使用 bun create 命令快速创建 SvelteKit 项目：
bun create svelte my-app
cd my-app
bun install在交互式提示中，你可以选择：
- Skeleton project — 最小化模板
- Demo app — 包含示例代码的演示项目
- Library project — 用于构建 Svelte 库
推荐初学者选择 Skeleton project，然后逐步添加功能。
目录结构
my-app/
├── src/
│ ├── routes/ ← 文件路由（核心）
│ │ └── +page.svelte
│ ├── lib/ ← 公共工具和组件
│ │ └── utils.ts
│ └── app.html ← HTML 模板
├── static/ ← 静态资源（直接服务）
├── svelte.config.js ← SvelteKit 配置
├── vite.config.ts ← Vite 配置
└── package.json关键目录说明：
src/routes/— 每个文件对应一个路由，遵循文件系统路由约定src/lib/— 存放可复用组件和工具函数，通过$lib别名引用static/— 该目录下的文件会原样部署（如 favicon.ico、robots.txt）
创建第一个页面
src/routes/+page.svelte 是应用的首页：
<script lang="ts">
let name = $state('SvelteKit');
</script>
<h1>你好，{name}！</h1>
<p>这是你的第一个 SvelteKit 页面。</p>
<input bind:value={name} placeholder="输入名称" />运行开发服务器
bun run dev默认访问 http://localhost:5173。如需修改端口或允许局域网访问：
bun run dev --port 3000 --host目录路由
在 src/routes/ 下新建文件夹，即可创建嵌套路由：
src/routes/
├── +page.svelte → /
├── about/
│ └── +page.svelte → /about
└── blog/
└── +page.svelte → /blog每个 +page.svelte 文件对应一个路由地址。文件夹深度决定 URL 路径深度。
总结
本章你学会了：
- Svelte 5 的三个核心运行符：
$state、$derived、$effect - 使用
bun create svelte初始化项目 - SvelteKit 的标准目录结构
- 文件系统路由的基本规则
- 启动开发服务器
下一章将深入路由的进阶用法：动态参数、布局组件和数据加载。