简介

欢迎学习 Svelte 教程。此教程将会教给你构建快速、轻便的 web 应用程序所需要知道的一切知识。

你还可以参考 API 文档实例,或者,如果你现在没有耐心在本地电脑上开始上手 Svelte,可以先看一下这份 60秒入门 的文章。

什么是 Svelte?

Svelte 是一个构建 web 应用程序的工具。

Svelte 与诸如 React 和 Vue 等 JavaScript 框架类似,都怀揣着一颗让构建交互式用户界面变得更容易的心。

但是有一个关键的区别:Svelte 在 构建/编译阶段 将你的应用程序转换为理想的 JavaScript 应用,而不是在 运行阶段 解释应用程序的代码。这意味着你不需要为框架所消耗的性能付出成本,并且在应用程序首次加载时没有额外损失。

你可以使用 Svelte 构建整个应用程序,也可以逐步将其融合到现有的代码中。你还可以将组件作为独立的包(package)交付到任何地方,并且不会有传统框架所带来的额外开销。

如何使用本教程

在学习 Svelte 之前,你需要对 HTML、CSS 和 JavaScript 有基本的了解。

在本教程的学习过程中,你将看到一些旨在说明新功能的小练习。后面的章节依赖前面的章节所铺垫的基础知识,因此建议你从头到尾依次进行学习。如果有必要,你可以使用左上角提供的章节导航(点击 “简介/基础知识” 就能看到下拉菜单)。

每一个章节都会有一个 'Show me' 按钮,如果你卡在了某个知识点,可以点击这个按钮获得帮助。但是,尽量不要过于依赖那个按钮,只有自己多动手、动脑才能学得更快。

了解组件

在 Svelte 中,应用程序由一个或多个 组件(components) 构成。组件是一个可重用的、自包含的代码块,它将 HTML、CSS 和 JavaScript 代码封装在一起并写入 .svelte 后缀名的文件中。右侧代码编辑器中的 'hello world' 实例就是一个简单的组件。



		
loading editor...

Console

loading Svelte compiler...


		
loading editor...

Compiler options

result = svelte.compile(source, {
generate:
});


		
loading editor...