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 扩展，但也支持许