Svelte 应用程序项目：构建每日星球新闻应用程序 UI

fatimakanij204

Svelte是一个新的 JavaScript UI 库，在很多方面与 React 等现代 UI 库相似。一个重要的区别是它不使用虚拟 DOM 的概念。 Backward Skip 10s Play Video Forward Skip 10s 在本教程中，我们将通过构建一个受《每日星球》（来自超人世界的虚构报纸）启发的新闻应用程序来介绍 Svelte。 关于斯维尔特 Svelte 使用一种新方法来构建用户界面。Svelte 不是在浏览器中完成必要的工作，而是将该工作转移到构建应用程序时在开发计算机上发生的编译时阶段。 简而言之，这就是 Svelte 的工作原理（如官方博客所述）： Svelte 在构建时运行，将您的组件转换为高效的命令式代码，从而精确地更新 DOM。因此，您能够编写具有出色性能特征的雄心勃勃的应用程序。 Svelte 比最强大的框架（React、Vue 和 Angular）更快，因为它不使用虚拟 DOM，并且只更新发生变化的部分。

我们将学习 Svelte 组件等基本概念以及如何获取和迭代数据数组。我们还将学习如何初始化 Svelte 项目、运行本地开发服务器并构建最终包。 先决条件 您需要满足一些先决条件，这样您才能轻松地学习本教程，例如： 熟悉 HTML、CSS 和 JavaScript (ES6+)， Node.js 和 npm 安装在您 黎巴嫩电话号码表 的开发计算机上。 Node.js 可以从官方网站轻松安装，也可以使用 NVM 在系统中轻松安装和管理多个版本的 Node。 我们将使用JSON API作为我们应用程序的新闻来源，因此您只需免费创建一个帐户并记下您的 API 密钥即可获取 API 密钥。 入门 现在，让我们开始使用degit工具生成 Svelte 项目来构建 Daily Planet 新闻应用程序。 您可以degit在系统上进行全局安装，也可以使用npx工具从 npm 执行它。



打开一个新终端并运行以下命令： npx degit sveltejs/template dailyplanetnews 接下来，在项目文件夹内导航并使用以下命令运行开发服务器： cd dailyplanetnews npm run dev 您的开发服务器将从该地址监听。如果您进行任何更改，它们将被重建并实时重新加载到您正在运行的应用程序中。 打开main.js您的项目文件，您应该找到以下代码这是通过创建和导出根组件实例（通常称为App. target该组件采用带有 a和属性的对象props。 包含target将安装组件的 DOM 元素，并props包含我们要传递给组件的属性App。在这种情况下，它只是一个具有世界价值的名称。 打开该文件，您应该找到以下代码这是我们应用程序的根组件。所有其他组件都将是 的子组件App。 Svelte 中的组件使用.svelte源文件扩展名，其中包含组件的所有 JavaScript、样式和标记。