Skip to main content

欢迎来到 Svelte 教程!这个教程将会涵盖用来轻松构建小巧、高效,任何规模的网页应用所需要了解的一切。

你也可以查看 API 文档示例,或者,如果你已经急不可耐地想在你的电脑上大显身手了,你可以用 npm init svelte 来创建新项目。

Svelte 是什么?

Svelte 是一个用来构建网页应用的工具。就跟其他 UI 框架一样,它允许你用包含标签、样式和行为的 声明式 的组件来构建应用。

这些组件被 编译 成小型、高效的 JavaScript 模块,消除了传统上与 UI 框架相关的开销。

你可以只用 Svelte 来构建你的整个应用(比如用 SvelteKit 这样的应用框架,会在之后的教程涵盖),或者你也可以把它加入到已存在的代码库。你也可以只发布单独的组件以便在其他地方复用。

如何使用本教程

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

本教程主要分为四部分:

每篇教程都会有一个练习,用于展示所描述的功能。后一篇教程的练习会依赖前一篇教程中所学习的内容,所以推荐大家从前往后按顺序阅读。但是如果有需要,你也可以在上面的菜单栏中切换不同的教程。

如果你卡住了,可以点击编辑器左边编辑器视图右上角solve 按钮。(使用下方的开关切换教程视图和编辑器视图。像本篇教程一样不包括练习的话,solve 按钮是灰色的。)尽量不要太依赖这个按钮,你需要自己想办法理解每段代码该写在哪个地方,自己动手在编辑器里修改代码,这样才能学得快。

Next: 第一个组件

1
2
<h1>Welcome!</h1>
 
initialising