介绍

欢迎使用Svelte教程。这将教你轻松构建快速的小型Web应用程序所需的一切。

你还可以查看API 文档 或者 示例,如果你已经迫不及待想要开始,请阅读 60秒快速上手

什么是 Svelte?

Svelte 是用于快速构建 web 应用程序的工具。

它类似于React和Vue这样的JavaScript框架,它们的共同目标是使构建轻松的交互式用户界面变得容易。

但是有一个关键的区别:Svelte在构建时将你的应用转换为期望的JavaScript ,而不是在 运行时解释你的应用代码。这意味你无需为框架开销,也不会在应用首次加载时耗费时间。

你可以使用Svelte构建整个应用程序,也可以将其添加到现有代码库中。你还可以将组件作为独立的软件包导出,这些组件可以在任何地方工作,而无需添加额外的框架依赖。

如何使用本教程

你需要对HTML,CSS和JavaScript有一个基本的了解后,才能更容易的学习Svelte。

在学习本教程的过程中,将向你展示旨在说明新功能的小练习。章节内容是紧密衔接的,便于你更好的学习,建议你从头到尾进行学习。如有必要,你可以通过上方的下拉菜单进行导航跳转(单击“简介/基础知识”)。

每个教程章节都会有一个“ show me ”按钮,如果你无法根据说明文章编写代码,可以单击该按钮以显示最终结果。为了你能深刻理解 svelte 语法,建议手动输入代码来学习,尽量不要过分依赖它。

了解组件

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



		
loading editor...

Console

loading Svelte compiler...


		
loading editor...

Compiler options

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


		
loading editor...