SvelteKit 全栈框架¶

一句话概述：SvelteKit 是基于Svelte的全栈框架，编译时把组件转成原生JS，零运行时开销，生成的JS比React/Vue少50-70%。

核心知识点表¶

概念	白话解释
Svelte	编译型UI框架，代码在构建时变成原生JS，浏览器不需要框架运行时
Runes	Svelte 5新响应式系统，用`$state`/`$derived`声明响应式数据
SvelteKit	Svelte的全栈框架，类似Next.js之于React
+page.svelte	页面组件文件
+page.server.ts	页面的服务端数据加载
+server.ts	API路由
load函数	页面渲染前加载数据的函数
Form Actions	表单处理，自动处理POST请求

安装配置¶

# 创建SvelteKit项目
npx sv create my-app  # 使用SvelteKit CLI
cd my-app
npm install
npm run dev  # → http://localhost:5173

基本使用¶

页面和路由¶

<!-- src/routes/+page.svelte — 首页 -->
<script>
  let count = $state(0)  // Svelte 5 rune: 响应式状态
</script>

<h1>计数器: {count}</h1>
<button onclick={() => count++}>+1</button>  <!-- 直接绑定事件 -->

<!-- src/routes/about/+page.svelte — /about页面 -->
<h1>关于我们</h1>
<a href="/">返回首页</a>

服务端数据加载¶

// src/routes/users/+page.server.ts（服务端加载数据）
export async function load() {
  const res = await fetch('https://api.example.com/users')
  const users = await res.json()
  return { users }  // 传递给页面组件
}

<!-- src/routes/users/+page.svelte -->
<script>
  let { data } = $props()  // 接收load函数返回的数据
</script>

<ul>
  {#each data.users as user}
    <li>{user.name}</li>
  {/each}
</ul>

API路由¶

// src/routes/api/hello/+server.ts
import { json } from '@sveltejs/kit'

export async function GET() {
  return json({ message: '你好世界' })
}

export async function POST({ request }) {
  const body = await request.json()
  return json({ received: body }, { status: 201 })
}

Form Actions¶

// src/routes/login/+page.server.ts
export const actions = {
  default: async ({ request }) => {
    const data = await request.formData()
    const email = data.get('email')
    const password = data.get('password')
    // 验证登录...
    return { success: true }
  }
}

<!-- src/routes/login/+page.svelte -->
<form method="POST">
  <input name="email" type="email" required />
  <input name="password" type="password" required />
  <button type="submit">登录</button>
</form>

高级用法¶

布局¶

<!-- src/routes/+layout.svelte — 全局布局 -->
<script>
  let { children } = $props()
</script>

<nav>
  <a href="/">首页</a>
  <a href="/about">关于</a>
</nav>

{@render children()}  <!-- 渲染子页面 -->

Stores（全局状态）¶

// src/lib/stores.ts
import { writable } from 'svelte/store'

export const theme = writable('light')  // 可写store
export const user = writable(null)      // 用户状态

错误处理¶

<!-- src/routes/+error.svelte -->
<script>
  import { page } from '$app/stores'
</script>

<h1>{$page.status} 错误</h1>
<p>{$page.error?.message}</p>

常见报错与解决¶

报错信息	原因	解决方案
`500: load function error`	load函数报错	检查API地址和数据格式
`Cannot use runes in .svelte files with Svelte 4`	Svelte版本不对	升级到Svelte 5
`document is not defined`	在SSR中使用了浏览器API	用`onMount`或`browser`检查

速查表¶

npx sv create app     # 创建项目
npm run dev           # 开发
npm run build         # 构建
npm run preview       # 预览

# 路由文件约定
# +page.svelte          页面组件
# +page.server.ts       服务端数据加载
# +page.ts              通用数据加载
# +layout.svelte        布局
# +server.ts            API路由
# +error.svelte         错误页面
# [param]/              动态路由

同类工具对比¶

特性	SvelteKit	Next.js	Nuxt
Bundle大小	最小（无运行时）	较大	中等
性能	最快	快	快
学习曲线	低	中	较低
生态	增长中	最大	Vue生态
适合	性能敏感应用	企业级应用	Vue团队

面试建议：SvelteKit的核心卖点是"编译时优化"——代码在构建时变成最小化的原生JS，没有Virtual DOM、没有运行时框架代码。