0Pricing
Sveltejs Academy icon

Sveltejs Academy

HTMLFrontendWebBeginner

在 Svelte Academy 用现代技术构建快速、简洁的用户界面。

🤖 AI 驱动📚 41 门课程👥 10万+ 学习者⭐ 4.9 分
课程概览

用 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 导师的帮助,每个概念都通过动手练习来强化,然后再进入下一个主题。

开始学习 →

你的学习方式

🎯
互动课程
实时反馈的动手编程练习
🤖
AI 导师
遇到困难时立即获得 AI 帮助
💻
内置编辑器
直接在浏览器中编写并运行代码
🏆
证书
完成课程后获得证书
课程

41 门课程

Sveltejs Academy 学习路径中的所有课程。

01

欢迎学习 Svelte

A13 节课

了解 Svelte 是什么、与 React 或 Vue 相比它为何采用完全不同的用户界面构建方式,以及尝试过它的开发人员为何往往会爱上它。

02

Svelte 介绍与设置

A14 节课PRO

了解 Svelte 与其他框架的不同之处,设置您的第一个项目,并探索项目结构和开发工作流程,开始使用 Svelte

03

您的第一个 Svelte 组件

A14 节课PRO

学习从零编写 Svelte 组件,使用响应式变量、插值表达式,并通过响应式声明创建计算值

04

Props 与组件通信

A24 节课PRO

使用 props 在 Svelte 组件之间传递数据、设置默认值,并通过 $$props 和 $$restProps 优雅地转发 props

05

模板语法:条件与循环

A24 节课PRO

使用条件块控制 Svelte 模板中的渲染内容,使用 each 块遍历数组,并使用 key 块强制重新渲染

06

事件与事件处理

A24 节课PRO

在 Svelte 中处理 DOM 事件,使用事件修饰符简化常见模式,从子组件派发自定义事件,并沿组件树向上传递事件

07

双向绑定

A24 节课PRO

使用 bind: 指令将表单输入和 DOM 元素与 Svelte 变量同步,涵盖文本、复选框、单选按钮组和元素引用

08

生命周期函数

B14 节课PRO

使用 onMount、onDestroy、beforeUpdate、afterUpdate 和 tick 工具,控制 Svelte 组件生命周期各阶段的行为

09

Svelte 存储:可写与可读

B14 节课PRO

使用 Svelte 内置的存储原语在组件之间共享响应式状态,使用 $ 简写订阅它们,并通过自定义逻辑创建可读存储

10

派生存储与自定义存储

B14 节课PRO

从一个或多个来源派生计算存储来组合 Svelte 存储,并构建实现存储契约的完全自定义存储

11

插槽与组件组合

B14 节课PRO

使用默认插槽和具名插槽将内容投影到 Svelte 组件中,提供备用内容,并检查插槽是否已填充

12

CSS 过渡

B14 节课PRO

使用 Svelte 内置的过渡指令为进入和离开 DOM 的元素添加动画,配置时间和缓动,并处理非对称的进入与离开过渡

13

CSS 动画

B14 节课PRO

使用 Svelte 的 animate 指令实现列表重排、基于物理的弹簧动画和补间值插值,进一步掌握超越过渡的动画效果

14

SvelteKit 路由与页面

B14 节课PRO

使用 SvelteKit 基于文件的路由系统,创建带参数的动态路由,并使用布局文件在多个页面之间共享 UI

15

SvelteKit 数据加载

B14 节课PRO

使用 SvelteKit 的 load 函数为页面加载数据,优雅地处理错误,并在 +page.server.js 中运行仅限服务器端的逻辑

16

Context API

B14 节课PRO

使用 Svelte 的 Context API 将数据深入传递到组件树中而无需逐层传递 props,并理解何时应优先使用上下文而非存储

17

SvelteKit SEO 与元数据

B14 节课PRO

通过设置动态元标签、OpenGraph 卡片、JSON-LD 结构化数据,并在 SvelteKit 中管理规范 URL,提高内容的可发现性

18

SvelteKit 表单操作

B24 节课PRO

在服务器端使用 SvelteKit 表单操作处理 HTML 表单提交,使用 JavaScript 逐步增强表单,并返回验证错误

19

SvelteKit API 路由

B24 节课PRO

在 SvelteKit 中使用 +server.js 文件构建 RESTful 和流式 API 端点,处理多个 HTTP 方法,并返回类型化 JSON 响应

20

SvelteKit 钩子

B24 节课PRO

使用 SvelteKit 的服务器钩子拦截并转换每个请求,集中记录错误,并使用 sequence 工具组合多个钩子

21

SvelteKit 错误处理

B24 节课PRO

通过自定义错误页面、区分预期与意外错误以及处理嵌套布局中的错误,在发生问题时提供出色的用户体验

22

高级 Svelte 响应式编程

B24 节课PRO

深入理解 Svelte 的响应式系统:响应式语句的执行顺序、何时使用存储而非本地状态,以及如何避免过时闭包

23

Svelte 操作

B24 节课PRO

使用 Svelte 操作将可复用的命令式行为附加到 DOM 元素,处理参数和更新,并构建 clickOutside 和工具提示等实用操作

24

自定义过渡与动画

B24 节课PRO

从零编写自定义 Svelte 过渡函数,控制时间参数,并创建变形效果以及高级 CSS 驱动和 JS 驱动的过渡

25

Svelte 动效

B24 节课PRO

使用 Svelte 的弹簧和补间动效存储让值随时间变化,使用插值函数,并将动效应用于 SVG 路径

26

SvelteKit 高级布局

B24 节课PRO

掌握 SvelteKit 的高级布局系统:布局分组、路由级覆盖、脱离布局,以及在布局层次结构中共享数据

27

SvelteKit 身份验证模式

B24 节课PRO

在 SvelteKit 中使用基于 Cookie 的会话、安全的 JWT、钩子中的路由保护以及 Lucia Auth 的 OAuth 实现身份验证

28

SvelteKit 适配器与部署

B24 节课PRO

使用合适的适配器将 SvelteKit 应用部署到任意环境:静态网站、Node.js 服务器、Vercel 和 Cloudflare Workers

29

Svelte 5:Runes 入门

B24 节课PRO

了解 Svelte 5 的 runes 系统:它以明确的响应式原语取代编译器魔法,用于状态、派生值和副作用

30

Svelte 5:Props 与代码片段

B24 节课PRO

使用 $props() 处理类型化组件 props,并使用新的 {#snippet} 和 {@render} 语法,在 Svelte 5 中实现强大的内容组合

31

SvelteKit SSR 与预渲染

B24 节课PRO

在 SvelteKit 中按路由控制渲染策略:在通用加载和仅服务器端加载之间选择,预渲染静态页面,并在需要时禁用 SSR

32

Svelte 测试:单元测试

B24 节课PRO

使用 Vitest 和 @testing-library/svelte 为 Svelte 组件和存储编写可靠的单元测试,覆盖渲染、交互和模块模拟

33

Svelte 测试:使用 Playwright 进行端到端测试

B24 节课PRO

使用 Playwright 为 SvelteKit 应用编写端到端测试,覆盖页面导航、表单交互和持续集成管道集成

34

集成第三方库

B24 节课PRO

使用 Svelte 操作和组件包装器,将 Tailwind CSS、D3.js 数据可视化、Leaflet 地图和富文本编辑器添加到 SvelteKit 项目中

35

SvelteKit 安全

B24 节课PRO

加强 SvelteKit 应用,防范 CSRF、XSS 和注入攻击,安全管理环境变量,并限制 API 路由的请求频率

36

Svelte 5:高级 Runes

C14 节课PRO

探索高级 Svelte 5 rune 模式,包括原始状态、复杂派生、手动效果清理,以及从 Svelte 4 迁移

37

高级组件模式

C14 节课PRO

使用带代码片段的渲染 props、高阶组件、构建器模式和复合组件,构建复杂且可复用的 Svelte 组件 API

38

SvelteKit 流式传输

C14 节课PRO

通过从 load 函数流式传输 Promise、延迟加载缓慢数据,并使用 ReadableStream 从 API 路由进行流式传输,加快初始页面加载

39

SvelteKit 性能优化

C14 节课PRO

使用自动代码拆分、增强的图像处理、延迟加载和性能分析工具,优化 SvelteKit 应用性能

40

大规模状态管理

C14 节课PRO

使用功能模块存储模式、事件总线、乐观 UI 更新以及基于存储历史的撤销与重做,为大型 Svelte 应用设计架构

41

构建全栈 SvelteKit 应用

C14 节课PRO

综合运用所学知识,构建可用于生产环境的全栈应用,涵盖身份验证、通过 Drizzle ORM 使用数据库、部署到 Vercel,以及端到端类型安全。

常见问题

常见问题解答

Sveltejs Academy 课程免费吗?

免费。你可以免费开始 Sveltejs Academy 课程并完成它的所有互动课程。可选的 PRO 订阅解锁高级 AI 工具和可分享的证书。

学习 HTML 需要有先前的经验吗?

不需要。课程从基础开始,逐步进阶到更高难度的主题,所以即使你没有任何 HTML 基础也可以开始。

我在 CoddyKit 上怎样学习 HTML?

学以致用。简洁的互动课程将清晰的讲解与实时动手编程练习结合,24/7 AI 导师在你遇到困难时提供个性化帮助。

完成 Sveltejs Academy 后能获得证书吗?

可以。PRO 学员可以参加考试,获得 Sveltejs Academy 课程的可分享的完成证书,其中包含可验证的代码。

我能在手机上学习 HTML 吗?

可以。CoddyKit 支持网页版和原生 iOS、Android 应用,你可以在任何设备上学习 HTML,进度会自动同步。

立即开始 Sveltejs Academy

加入数千名学习者,通过 AI 驱动的课程掌握编程。

免费开始 →浏览所有课程