学 Svelte: 编程课程
学 Svelte: 编程课程 — 学习 Svelte 和 SvelteKit，使用实时编辑器，并在旁边查看编译后的输出
学 Svelte: 编程课程 是一款免费的 iOS 和 Android 应用，帮助你在手机上学习 Svelte和SvelteKit。在带预览功能的实时编辑器中编写组件，查看编译器将其转换成的 JavaScript，并完成 41 门课程：从第一个响应式值一直学到部署全栈应用，同时还有 AI Mentor 陪伴学习。
- 价格
- 免费，可升级 Pro
- 平台
- iOS 和 Android
- 语言
- 22
- 年龄分级
- 4+
- 需要
- iOS 15.1 或更高版本
屏幕上的任何内容都没有在运行 Svelte。它运行的是 Svelte 编写出来的内容。
应用的第一课会在一个九行组件旁边展示编译器为它生成的 JavaScript。点击 +1 后，实际执行的代码行会亮起：一次失效标记、一个重新计算的值、两个发生变化的文本节点，其他内容均未触碰。这就是框架背后的理念，在解释之前先让你亲眼看到。
这是什么
学 Svelte: 编程课程 是一款免费的 iOS 和 Android 应用，通过 41 门课程和 163 节课教授 Svelte 和 SvelteKit，难度从入门到高级逐步提升。应用首先通过演示展示一个组件及其编译后的 JavaScript，随后讲解响应性、props、stores、transitions、Svelte 5 runes 以及 SvelteKit 路由、数据加载、表单操作和部署。应用内置带预览功能的实时编辑器和 AI Mentor。
应用内
界面展示
课程
Svelte 课程涵盖哪些内容
应用自有课程列表中的 41 门课程和 163 节课，难度从 A1 到 C1，最终完成一个全栈 SvelteKit 项目。
首个组件
了解 Svelte 是什么以及它为何采用不同的方法，完成项目设置，并使用响应式变量编写你的第一个组件。
Props、模板、事件与绑定
传递 props，在标记语言中使用条件语句和 each 循环，处理 DOM 事件与自定义事件，以及使用 bind: 指令进行双向绑定。
生命周期、Stores 与 Context
onMount 和 onDestroy、writable、readable、derived 及自定义 stores、插槽与组合，以及 Context API。
过渡、动画与 Actions
过渡指令、animate 指令、用于复用 DOM 行为的 actions、自定义过渡，以及 spring 和 tweened motion stores。
SvelteKit 基础
基于文件的路由与页面、load 函数、高级布局、表单 actions、API 路由、服务器 hooks 和错误页面。
Svelte 5 Runes
介绍 runes、props 和 snippets，讲解高级 runes，并深入了解 Svelte 的响应式机制。
生产环境中的 SvelteKit
SSR 与预渲染、流式传输、性能、SEO 与 meta 标签、安全性、身份验证模式、适配器和部署。
测试与全栈开发
使用 Vitest 进行单元测试，使用 Playwright 进行端到端测试，学习第三方库、大规模状态管理，并完成一个全栈 SvelteKit 应用。
工作原理
课程如何进行
应用围绕从一个响应式值到可部署应用的学习路径组织，每个环节都会将阅读与可运行的实践结合起来。
先查看编译器的输出
开场演示会将一个小型组件放在其编译结果 JavaScript 的旁边。编译后的部分已提前生成并随应用一同提供，因此演示无需联网即可运行。
编辑组件并预览
课程会打开一个编辑器，其中包含 HTML、CSS 和 JavaScript 标签页，以及一个在预览中渲染组件的运行按钮。预览会通过网络加载 Svelte 编译器，因此需要联网。
检查是否真正掌握
每个主题之后都会有测验和编程挑战，AI Mentor 可以解释概念、建议学习路线，或就某门课程对你进行测验。Weekly Code Challenge 还会增加一轮竞技挑战。
包含内容
应用包含的内容
41
课程，A1 至 C1
41 门课程共 163 节课，内容从 Svelte 设置和第一个组件，一直涵盖 stores、transitions、SvelteKit 路由和 hooks、Svelte 5 runes、测试以及全栈综合项目。
已编译
组件及其编译后代码并排显示
首次运行演示会同时展示源代码和生成的 JavaScript，并统计已更新的文本节点与重新创建的元素数量，让你可以直接从屏幕上看出一次更新的开销。
预览
带预览功能的实时编辑器
在不同标签页中分别编写标记、样式和脚本，并在手机上渲染组件。预览使用 Svelte 4.2.19 编译器，因此使用 Svelte 5 runes 编写的代码可能无法预览，更适合阅读和跟着学习。
AI
AI Mentor
在聊天标签页中询问某门课程的关键概念、快速学习技巧、测验或个性化学习路线，也可以询问你看不懂的错误。
每周
Weekly Code Challenge
定期开展的挑战赛，让你可以在课程学习之余参与竞争；连续学习记录、进度跟踪和提醒功能则帮助你保持学习习惯。
考试
完成证书
通过最终考试后，证书会印有你的姓名，证明的是你完成的学习成果，而不是经过认证的资质。
背景
什么是 Svelte？它与其他构建网页界面的方式有何不同？
Svelte 是一个用于构建用户界面的框架，其中的组件会预先编译成普通 JavaScript，直接更新页面，而不是传送一个大型运行时，让它在浏览器中计算需要进行的变更。一个组件就是包含标记、样式和脚本的单个文件，像 count += 1 这样的赋值就足以更新屏幕。SvelteKit 是构建在 Svelte 之上的应用框架，增加了基于文件的路由、服务器端数据加载、表单处理，以及用于部署的适配器。对学习者来说，实际效果是减少样板代码，缩短代码与页面显示结果之间的距离。
编译时响应性赋值就是状态
在 Svelte 中，编译器会将普通赋值重写成更新页面受影响部分的代码。以 $: 开头的标记语句会在所读取的值发生变化时重新计算一个值，因此派生数据无需辅助函数。
Stores跨组件共享状态
可写 store 保存一个值，多个组件都可以订阅它；在名称前加上 $ 即可自动订阅。当状态需要经过计算或封装时，可以在此基础上使用派生 store 和自定义 store。
RunesSvelte 5 语法
Svelte 5 用 $state、$derived 和 $props 等显式函数，以及用于复用标记的 snippets，取代了早期编译器魔法中的大部分内容。两种风格都在实际项目中使用，因此应用将原始模型和 runes 模型分别作为独立课程教授。
SvelteKit路由、数据与部署
像 +page.svelte 这样的文件会成为一个路由，load 函数会在页面渲染前获取数据，表单操作会在服务器上处理提交，而适配器则会将结果打包，以便部署到静态主机、Node 服务器或无服务器平台。
是否适合
适合哪些人——不适合哪些人
如果你符合以下情况，就很适合
- 想通过短时学习而不是冗长的视频课程来学习 Svelte 或 SvelteKit
- 了解一些 HTML 和 JavaScript，并想看看编译器优先的框架会带来哪些变化
- 好奇响应式更新如何运作，并且相比盲目信任，更喜欢阅读生成的代码
- 想要一条涵盖路由、数据加载、身份验证和部署的学习路径，而不只是学习组件
- 喜欢询问 AI Mentor 某段代码为何会这样运行
如果你符合以下情况，这不是适合你的工具
- 想在预览中运行 Svelte 5 runes 代码，而预览使用的是 Svelte 4.2.19 编译器
- 需要从手机上构建并部署完整的 SvelteKit 项目，但这仍然需要一台笔记本电脑
- 期待所有内容都免费：第一门课程免费，Pro 解锁其余内容
- 从未接触过 HTML 或 JavaScript，希望先学习通用编程课程，再学习框架
问题
常见问题
如何在手机上学习 Svelte？
选择一条将阅读与运行代码结合起来的学习路径，因为改变一个值并观察页面响应，是理解 Svelte 最简单的方式。学 Svelte: 编程课程 以编译输出演示开始，随后提供带有 HTML、CSS 和 JavaScript 编辑器、预览窗口及 AI Mentor 的课程。该应用可在 iOS 和 Android 上免费开始使用。
Svelte 对初学者来说难学吗？
Svelte 通常被认为比较容易上手，因为组件看起来就像普通的 HTML、CSS 和 JavaScript，而赋值操作会更新屏幕。真正困难的部分会在后面出现，包括 stores、生命周期、SvelteKit 的服务器与客户端拆分，以及转向 Svelte 5 runes。学 Svelte: 编程课程 将 41 门课程按 A1 到 C1 分级，让这些主题按顺序出现。
什么是 SvelteKit？应用会教 SvelteKit 吗？
SvelteKit 是 Svelte 的应用框架，增加了基于文件的路由、服务器端数据加载、表单 actions、hooks 和部署适配器。学 Svelte: 编程课程 提供专门的 SvelteKit 课程，涵盖路由与页面、数据加载、表单 actions、API 路由、hooks、错误处理、SSR 与预渲染、流式传输、安全性和适配器。
应用会讲解 Svelte 5 runes 吗？
会。学 Svelte: 编程课程 包含介绍 runes、props 和 snippets，以及高级 runes 的课程。编辑器的预览目前使用 Svelte 4.2.19 进行编译，因此 runes 代码可能无法在预览中运行，最好结合课程文本学习。
可以在手机上运行 Svelte 代码吗？
你可以在编辑器中编写组件，并在预览中渲染它。学 Svelte: 编程课程 的预览会加载 Svelte 编译器来构建组件，因此需要网络连接。开头的编译输出演示则不同：其编译后的代码已内置于应用中，无需网络即可运行。
学 Svelte: 编程课程 免费吗？
应用可免费下载。第一门课程免费，并提供每日 AI Mentor 使用额度；Pro 可解锁所有课程、移除广告，并提供不限量的 AI Mentor。你可以先完成真实课程，再决定是否升级。
需要先掌握 JavaScript 吗？
掌握一些 HTML 和 JavaScript 会让前几门课程更容易，因为 Svelte 组件就是将这两种语言写在同一个文件中。学 Svelte: 编程课程 从 Svelte 是什么以及如何设置开始，并用通俗易懂的语言讲解每个概念，但它是一门框架课程，而不是编程入门课程。
它支持哪些平台和语言？
学 Svelte: 编程课程 可通过 App Store 在 iOS 上运行，也可通过 Google Play 在 Android 上运行，界面支持 22 种语言。应用评级为 4+，因此内容没有年龄限制。
开始使用
今天就编写你的第一个组件
可在 iOS 和 Android 上免费开始使用，支持 22 种语言。
更多 CoddyKit 产品
可在 iOS 和 Android 上使用。