素材阁

SvelteKit 速查

共 25 条 SvelteKit 常用写法,涵盖基础、路由与布局、数据加载、表单与 API、适配与部署。 支持搜索与分类筛选,点击即可复制。

基础

Svelte 的全栈元框架。

命令说明
创建项目
开发/构建/预览
文件路由
路由文件
构建

路由与布局

约定式文件。

命令说明
页面
动态路由
布局
路由分组
错误页

数据加载

load 函数。

命令说明
+page.ts 通用 load
服务端 load(可访问数据库)
消费 load 返回的数据
页面头
序列化

表单与 API

actions 与 endpoints。

命令说明
表单动作
表单提交
渐进增强
API 端点
端点响应

适配与部署

adapter 决定运行形态。

命令说明
默认适配器
自托管
静态站
平台适配
配置

使用说明

SvelteKit 常用写法速查:基础、路由与布局、数据加载、表单与 API、适配与部署;支持搜索与分类筛选,点击即可复制。

  1. 按用途点分类:基础、路由与布局、数据加载、表单与 API、适配与部署。
  2. 点「写法」列复制,替换路由与数据源后使用。
  3. 服务端 load 里访问数据库,页面里 export let data 消费。
  4. 表单提交用 actions,接口用 +server.ts,部署选对应 adapter。

常见问题

SvelteKit 和 Svelte 什么关系?
SvelteKit 是构建在 Svelte 之上的应用框架,提供路由、数据加载、SSR/SSG、端点与适配器;Svelte 负责组件与响应式。
load 在客户端还是服务端?
+page.ts 的 load 两端都可能跑;+page.server.ts 的 load 只在服务端执行,可安全访问数据库与密钥。
怎么部署到不同平台?
通过 adapter 决定输出:adapter-node 出 Node 服务器、adapter-static 出静态站,Vercel/Netlify/Cloudflare 各有官方适配器。

延伸阅读

相关工具