Svelte是一个相对较新的用于开发网站和网络应用的JavaScript前端框架。
Svelte在过去两年中获得的赞誉证明了它不是 "另一个前端框架"。它在2019年JS状态调查中赢得了 "年度突破"，随后在2020年的满意度评分中名列前茅。在Stack Overflow 2021年的调查中，它也被评为最受欢迎的网络框架。
Svelte以其小捆尺寸、非常好的性能和易用性的组合吸引了开发人员。同时，它还配备了很多好东西。它已经提供了一个简单的状态管理解决方案，以及随时可用的过渡和动画。这个介绍性的教程将阐明Svelte是如何做到这一点的。接下来的系列教程将更详细地介绍如何利用Svelte提供的各种可能性，用Svelte实现应用程序。
Svelte的背景故事
但首先，要介绍一下Svelte的背景故事。虽然它在2020年代初才进入主流，但Svelte已经存在了很久。
第一次提交到GitHub是在2016年底。它的创造者是里奇-哈里斯（Rich Harris），一个开源的向导，他最突出的其他发明是Rollup，一个现代捆绑器。Rich Harris当时在新闻杂志*《卫报》*（The Guardian）担任图形编辑。他的日常工作是为网站创建交互式可视化，他希望有一个工具能让他轻松地编写这些，而不影响捆绑的大小和速度。同时，他希望有一个平易近人的工具，这样其他不太懂技术的同事也能快速创建可视化。
出于这些需求，Svelte诞生了。从新闻室开始，Svelte很快就在开源社区聚集了一小部分粉丝。但直到2019年4月，Svelte才真正被世人所知。这一天标志着第3版的发布，该版本完全重写，注重开发者体验和亲和力。从那时起，Svelte的知名度提高了很多，更多的维护者加入了这个团队，Rich Harris甚至加入了Vercel，全职从事Svelte的工作。
建立一个简单的书单
让我们深入了解一下Svelte!我们将建立一个小型书单，允许我们从阅读列表中添加和删除书籍。最终的结果会像下面的图片一样。
我们将从一个项目模板开始构建我们的项目。我们将使用官方的Svelte模板。另一个选择是使用由Vite驱动的模板或使用SvelteKit，这是一个在Svelte之上的框架，用于构建具有内置路由的成熟的应用程序--但在本教程中我们将尽可能地保持它的原始性。
下载模板后，切换到它的文件夹并运行npm install ，它将下载我们需要的所有包来启动。然后，我们将切换到App.svelte ，在那里我们将用一个纯HTML的版本来替换内容，以布置我们想要的视觉效果。
<h4>Add Book</h4>
<input type="text" />
<h4>My Books</h4>
<ul>
<li>A book</li>
</ul>
我们可以直接在Svelte文件的顶层编写上述代码；我们不需要添加任何包装元素。Svelte的语法是HTML的超集，所以任何在HTML文件中有效的东西在Svelte文件中都是有效的。
现在的问题是如何在其中加入动态部分。我们将首先在脚本中添加一个静态列表，并通过一个循环进行渲染。
<script>
let books = ['Learning Svelte', 'The Zen of Cooking Tea'];
</script>
<label>
<h4>Add Book</h4>
<input type="text" />
</label>
<h4>My Books</h4>
<ul>
{#each books as book}
<li>{book}</li>
{/each}
</ul>
我们添加了一个script 标签，在其中放入我们与组件相关的JavaScript逻辑。该逻辑在组件每次挂载时都会被执行。我们还用特殊的Svelte语法增强了HTML，以创建一个循环并打印每本书的标题。正如你所看到的，Svelte对控制流块有独特的语法，不像Vue或Angular，它们是以特殊属性的形式添加这种功能。这使得代码更具可读性，因为你可以更容易发现它。如果你想在控制流块中包含一个以上的顶层项目，这也使得你没有必要创建包装元素。
一本书的标题是通过用大括号包围变量来输出的。一般来说，只要你在模板内遇到大括号，你就知道你正在输入与Svelte有关的东西。我们将在本教程系列的第二部分中更详细地研究模板的语法。
继续阅读：在SitePoint 上用Svelte建立一个阅读列表。
