在软件开发领域，不断学习和尝试新技术是非常重要的。随着单页面应用程序（SPA）的不断增加，前端开发者正在寻找一些轻量级的框架来提高生产力和代码可维护性。在这个领域，Svelte框架在近年来变得越来越受欢迎。
对于Vue开发者，Svelte是一种非常吸引人的选择。Svelte提供了一种新的方法来构建组件，它的核心思想是把组件编译成具有高效JavaScript代码的原生DOM操作。本文将介绍一个由Vue开发者构建的Svelte单页面应用程序，希望能够帮助更多的开发者了解Svelte框架。
首先，我们需要安装Svelte并创建一个新的项目。使用以下命令安装最新版本的Svelte：
“`
npx degit sveltejs/template svelte-app
cd svelte-app
npm install
“`
现在我们可以使用以下命令启动开发服务器：
“`
npm run dev
“`
我们将使用Blackspike公司的“记录器”示例来构建单页面应用程序。它是一个用于记录个人训练活动的Web应用程序。该应用程序可以添加和编辑训练活动，显示已经记录的活动列表，并允许用户导出它们的训练日志。
我们将从创建一个主要的App组件开始，以显示训练活动列表。该组件将在App.svelte文件中定义：
“`
Training Log
- {record.name} ({record.type}, {record.time})
{#each records as record}
{/each}
“`
这个组件接收一个名为“records”的属性，其中包含训练活动的数组。每个记录都有一个名称、一个类型和一个时间。我们使用Svelte提供的#each块指令来遍历记录，并在屏幕上显示它们。
接下来，我们将创建一个名为“RecordList”的组件，以获取和显示训练日志。该组件将在RecordList.svelte文件中定义：
“`
-
binding:record={record}
onSave={() => {
records = […records];
}}
/>
{#each records as record, i}
{/each}
“`
该组件通过导入RecordForm子组件来显示一个“添加记录”按钮，以及一个记录列表。每次单击“添加记录”按钮时，都会将一个新记录添加到列表中。
我们使用Svelte提供的双向绑定功能将每个记录传递到RecordForm组件。RecordForm组件提供了一种简单的表单来编辑每个记录的详细信息。当用户提交表单时，我们将记录刷新到主记录列表中。
现在让我们创建RecordForm子组件。该组件将在RecordForm.svelte文件中定义：
“`
“`
该组件由三个输入字段和一个保存按钮组成。我们使用Svelte的详细指令将输入字段绑定到记录属性中，这意味着当用户更改字段时，记录的值也将更新。当用户单击“保存”按钮时，我们通过调用onSave函数来提交表单。该函数将应用程序的状态修改为反映更新后的主记录列表。
最后，我们需要创建一个名为“ExportButton”的组件，允许用户输出记录为JSON文件。该组件将在ExportButton.svelte文件中定义：
“`
download=”training-log.json” href={`data:text/json;charset=utf-8,${JSON.stringify(records, null, 2)}`} > Export Training Log “` 该组件输出一个指向一个可下载的JSON文件的链接。用户可以单击该链接来将记录下载到本地计算机中。 到此为止，我们已经完成了整个应用程序的构建。通过这个练习，一个专注于Vue的开发者可能会惊讶地发现，使用Svelte可以更加简单化，因为Svelte提供了一种独特的组件系统，它不同于其他框架。希望本文能够激发更多的开发者开始学习和使用Svelte框架。 了解更多有趣的事情：https://blog.ds3783.com/