用 Svelte 和 SvelteKit 构建真实界面
Svelte 采用了与 React 和 Vue 根本不同的方式 — 与其向浏览器传输运行时,它在构建时将你的组件编译成高效的原生 JavaScript。结果是更小的包体积、更快的加载速度和更少的样板代码。官方应用框架 SvelteKit 增加了基于文件的路由、服务端渲染、表单操作和部署适配器,让你可以在任何平台上发布生产级应用。本课程涵盖两者,从第一个组件到完整的全栈架构。
你将学到什么
你将从 Svelte 的组件模型开始 — props、模板语法、条件判断、循环和双向绑定 — 然后深入响应式系统、生命周期函数和存储原语:writable、readable、derived 和自定义存储。在 UI 方面,你将使用 slots、Context API、CSS 过渡、动画和 Svelte Motion。SvelteKit 章节涵盖路由、数据加载、SSR 和预渲染、表单操作、API 路由、钩子、错误处理、高级布局、身份验证模式和部署适配器。本课程还包括 Svelte 5 的 rune 系统、使用单元测试和 Playwright E2E 的测试、第三方库集成和 SvelteKit 安全实践。
学习路径
四十一门课程从 A1 到 C1 循序渐进。前七门课程建立基础:组件、props、事件和模板语法。B1 引入存储、slots、过渡和你的第一个 SvelteKit 页面及数据加载模式。B2 — 最大的模块 — 讲解表单操作、API 路由、钩子、高级响应式、Svelte Actions、自定义动画、身份验证模式、适配器、Svelte 5 runes、测试和安全。本课程在 C1 结束,涵盖高级 runes、高级组件模式、SvelteKit 流式传输、性能优化、大规模状态管理和一个完整的全栈 SvelteKit 应用项目。
工作原理
每门课程分为短小精悍的课程,你在内置代码编辑器中完成,并获得实时反馈。每当你遇到困难时,可以获得 AI 导师的帮助,每个概念都通过动手练习来强化,然后再进入下一个主题。