SvelteKit 最新中文文档教程（1）—

前言

Svelte，一个语法简洁、入门容易，面向未来的前端框架。

从 Svelte 诞生之初，就备受开发者的喜爱，根据统计，从 2019 年到 2024 年，连续 6 年一直是开发者最感兴趣的前端框架 No.1：

Svelte 以其独特的编译时优化机制著称，具有轻量级、高性能、易上手等特性，非常适合构建轻量级 Web 项目。

为了帮助大家学习 Svelte，我同时搭建了 Svelte 最新的中文文档站点。

如果需要进阶学习，也可以入手我的小册《Svelte 开发指南》，语法篇、实战篇、原理篇三大篇章带你系统掌握 Svelte！

欢迎围观我的“网页版朋友圈”、加入“冴羽·成长陪伴社群”，踏上“前端大佬成长之路”。

介绍

开始之前

[!NOTE] 如果您是 Svelte 或 SvelteKit 的新手，我们建议查看交互式教程。

如果遇到问题，可以在 Discord 聊天室寻求帮助。

什么是 SvelteKit？

SvelteKit 是一个使用 Svelte 快速开发稳健、高性能 Web 应用程序的框架。如果您来自 React，SvelteKit 类似于 Next。如果您来自 Vue，SvelteKit 类似于 Nuxt。

要了解更多关于可以用 SvelteKit 构建的应用程序类型，请参阅常见问题。

什么是 Svelte？

简而言之，Svelte 是一种编写用户界面组件的方式 —— 比如导航栏、评论区或联系表单 —— 这些组件用户可以在浏览器中看到并与之交互。Svelte 编译器将您的组件转换为可以运行的 JavaScript 来渲染页面的 HTML，以及为页面添加样式 CSS。您不需要了解 Svelte 就能理解本指南的其余部分，但了解它会有所帮助。如果您想了解更多，请查看 Svelte 教程。

SvelteKit 与 Svelte 的区别

Svelte 负责渲染 UI 组件。您可以组合这些组件并仅使用 Svelte 渲染整个页面，但要构建完整的应用程序，您需要的不仅仅是 Svelte。

SvelteKit 帮助您在遵循现代最佳实践的同时构建 Web 应用，并为常见的开发挑战提供解决方案。它提供从基本功能 —— 比如在点击链接时更新 UI 的路由器 —— 到更高级的功能。

它的广泛功能列表包括：仅加载最小所需代码的构建优化；离线支持；用户导航前的页面预加载；通过 SSR、浏览器客户端渲染或构建时预渲染来处理应用程序不同部分的可配置渲染；图像优化；等等。使用所有现代最佳实践构建应用程序非常复杂，但 SvelteKit 为您处理了所有繁琐的工作，这样您就可以专注于创造性的部分。

它利用带有 Svelte 插件的 Vite 来实现热模块替换 (HMR)，从而在浏览器中即时反映代码更改，提供闪电般快速且功能丰富的开发体验。

创建项目

创建 SvelteKit 应用最简单的方法是运行 npx sv create：

npx sv create my-app
cd my-app
npm install
npm run dev

第一个命令将在 my-app 目录中搭建一个新项目，并询问您是否要设置一些基本工具，比如 TypeScript。有关设置其他工具的指导，请参见集成。随后的命令将安装其依赖项并在 localhost:5173 上启动服务端。

这里有两个基本概念：

应用的每个页面都是一个 Svelte 组件
通过在项目的 src/routes 目录中添加文件来创建页面。这些页面将被服务端渲染，以确保用户首次访问您的应用时速度尽可能快，之后客户端应用将接管

尝试编辑文件以了解所有功能是如何工作的。

编辑器设置

我们推荐使用 Visual Studio Code (简称 VS Code) 并安装 Svelte 扩展，但也支持许多其他编辑器。

项目结构

一个典型的 SvelteKit 项目结构如下：

my-project/
├ src/
│ ├ lib/
│ │ ├ server/
│ │ │ └ [您的仅服务端库文件]
│ │ └ [您的库文件]
│ ├ params/
│ │ └ [您的参数匹配器]
│ ├ routes/
│ │ └ [您的路由]
│ ├ app.html
│ ├ error.html
│ ├ hooks.client.js
│ ├ hooks.server.js
│ └ service-worker.js
├ static/
│ └ [您的静态资源]
├ tests/
│ └ [您的测试]
├ package.json
├ svelte.config.js
├ tsconfig.json
└ vite.config.js

您还会发现一些常见文件，如 .gitignore 和 .npmrc（如果您在运行 npx sv create 时选择了这些选项，还会有 .prettierrc 和 eslint.config.js 等）。

项目文件

src

src 目录包含了项目的主要内容。除了 src/routes 和 src/app.html 之外，其他都是可选的。

lib 包含您的库代码（实用工具和组件），可以通过 $lib 别名导入，或使用 svelte-package 打包分发
- server 包含您的仅服务端（server-only）库代码。可以使用 $lib/server 别名导入。SvelteKit 会阻止您在客户端代码中导入这些内容。
params 包含应用需要的任何参数匹配器
routes 包含应用的路由。您也可以在这里放置仅在单个路由中使用的其他组件
app.html 是您的页面模板 — 一个包含以下占位符的 HTML 文档：
- %sveltekit.head% — 应用需要的和

SvelteKit 最新中文文档教程（1）—— 入门指南

前言

介绍