Skip to main content

欢迎来到 Svelte 教程。 这将教你轻松构建快速、小型 Web 应用所需了解的一切。

英Welcome to the Svelte tutorial. This will teach you everything you need to know to build fast, small web applications easily.

你还可以查阅 API 文档 和 示例，或者 — 如果你迫不及待地想在本地对你的计算机进行黑客攻击 — 60 秒快速入门。

英You can also consult the API docs and the examples, or — if you're impatient to start hacking on your machine locally — the 60-second quickstart.

什么是 Svelte？(What is Svelte?)

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

英Svelte is a tool for building fast web applications.

它类似于 React 和 Vue 等 JavaScript 框架，它们的共同目标是轻松构建流畅的交互式用户界面。

英It is similar to JavaScript frameworks such as React and Vue, which share a goal of making it easy to build slick interactive user interfaces.

但有一个关键的区别： Svelte 在构建时将你的应用转换为理想的 JavaScript，而不是在运行时解释你的应用代码。 这意味着你无需支付框架抽象的性能成本，并且在应用首次加载时不会受到惩罚。

英But there's a crucial difference: Svelte converts your app into ideal JavaScript at build time, rather than interpreting your application code at run time. This means you don't pay the performance cost of the framework's abstractions, and you don't incur a penalty when your app first loads.

你可以使用 Svelte 构建整个应用，也可以将其增量添加到现有代码库中。 你还可以将组件作为可在任何地方工作的独立包提供，而无需依赖传统框架的开销。

英You can build your entire app with Svelte, or you can add it incrementally to an existing codebase. You can also ship components as standalone packages that work anywhere, without the overhead of a dependency on a conventional framework.

如何使用本教程(How to use this tutorial)

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

英You'll need to have basic familiarity with HTML, CSS and JavaScript to understand Svelte.

当你学习本教程时，你将看到一些旨在说明新功能的迷你练习。 后面的章节建立在前面章节所获得的知识的基础上，因此建议你从头到尾阅读。 如有必要，你可以通过上面的下拉菜单进行导航（单击 'Introduction / Basics'）。

英As you progress through the tutorial, you'll be presented with mini exercises designed to illustrate new features. Later chapters build on the knowledge gained in earlier ones, so it's recommended that you go from start to finish. If necessary, you can navigate via the dropdown above (click 'Introduction / Basics').

每个教程章节都有一个 'Show me' 按钮，如果你在遵循说明时遇到困难，可以单击该按钮。 尽量不要过度依赖它； 通过找出每个建议的代码块的放置位置并将其手动输入到编辑器中，你将学习得更快。

英Each tutorial chapter will have a 'Show me' button that you can click if you get stuck following the instructions. Try not to rely on it too much; you will learn faster by figuring out where to put each suggested code block and manually typing it into the editor.

了解组件(Understanding components)

在 Svelte 中，应用由一个或多个组件组成。 组件是可重用的独立代码块，封装了属于一起的 HTML、CSS 和 JavaScript，并写入 .svelte 文件中。 代码编辑器中的 'hello world' 示例是一个简单的组件。

英In Svelte, an application is composed from one or more components. A component is a reusable self-contained block of code that encapsulates HTML, CSS and JavaScript that belong together, written into a .svelte file. The 'hello world' example in the code editor is a simple component.