跳至主要内容

欢迎来到 Svelte 教程。本教程将教你构建快速、小巧的 Web 应用程序所需的一切知识。

你还可以查阅 API 文档示例,或者 — 如果你迫不及待地在本地机器上开始编程 — 60 秒快速入门

什么是 Svelte?

Svelte 是一个用于构建快速 Web 应用程序的工具。

它类似于 React 和 Vue 等 JavaScript 框架,它们有一个共同的目标,即让构建精美的交互式用户界面变得容易。

但有一个至关重要的区别:Svelte 在构建时将你的应用程序转换为理想的 JavaScript,而不是在运行时解释你的应用程序代码。这意味着你无需支付框架抽象的性能成本,并且在你的应用程序首次加载时不会产生损失。

你可以使用 Svelte 构建整个应用程序,也可以将其逐步添加到现有的代码库中。你还可以将组件作为独立包发布,这些包可以在任何地方使用,而无需依赖于传统框架的开销。

如何使用本教程

你需要对 HTML、CSS 和 JavaScript 有基本的了解,才能理解 Svelte。

在学习本教程的过程中,你会看到一些小练习,这些练习旨在说明新功能。后面的章节建立在前面章节学到的知识之上,因此建议你从头到尾学习。如有必要,你可以通过上面的下拉菜单导航(点击“简介/基础”)。

每个教程章节都有一个“展示”按钮,如果你在按照说明操作时遇到困难,可以点击该按钮。尽量不要过于依赖它;通过弄清楚将每个建议的代码块放在哪里并手动将其键入编辑器,你将学得更快。

了解组件

在 Svelte 中,一个应用程序由一个或多个组件组成。组件是一个可重用的自包含代码块,它封装了属于一起的 HTML、CSS 和 JavaScript,并写入到一个.svelte文件中。代码编辑器中的“hello world”示例是一个简单的组件。