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

Svelte是一个新的JavaScript UI库，在许多方面与React等现代UI库相似。一个重要的区别是，它不使用虚拟DOM的概念。 在本教程中，我们将通过构建灵感来自《超人世界》的虚构报纸的启发来介绍Svelte。

钥匙要点

Svelte是一个新的JavaScript UI库，不使用虚拟DOM，使其比React，Vue和Angular等最强大的框架更快。在构建应用程序时，它将必要的工作转移到开发机上的编译时间阶段。 该教程提供了一个逐步指南，以构建灵感来自《每日星球》的新闻申请，这是来自超人世界的虚构报纸。这包括初始化一个Svelte项目，运行本地开发服务器并构建最终捆绑包。

>教程还涵盖了DEGIT工具来生成Svelte项目，从新闻端点获取数据并为应用程序创建UI。

开发应用程序后，可以通过在终端中运行构建命令并使用ZEIT托管应用程序，即现在是网站和无服务器功能的云平台。

关于Svelte
• Svelte使用一种新方法来构建用户界面。 Suvte不用在浏览器中进行必要的工作，而是将其起作用的合理时间阶段转移到开发机器上时发生的编译时阶段。
> 简而言之，这就是Svelte的工作原理（如官方博客中所述）：
Svelte在
• >构建时间
上运行，将组件转换为高效
• 命令
代码，该代码可以手术更新DOM。结果，您可以编写具有出色性能特征的雄心勃勃的应用程序。

>我们将学习诸如Svelte组件之类的基本概念以及如何在数据阵列上获取和迭代。我们还将学习如何初始化一个Svelte项目，运行本地开发服务器并构建最终的捆绑包。 >先决条件

您需要有一些先决条件，因此您可以舒适地遵循此教程，例如：

熟悉HTML，CSS和JavaScript（ES6）

> node.js和npm安装在您的开发机上。 可以从官方网站上轻松安装node.js，也可以使用NVM轻松安装和管理系统中的节点的多个版本。>

>我们将使用JSON API作为我们应用的新闻来源，因此您需要通过免费创建一个帐户并注意您的API密钥来获取API密钥。>

入门

>现在，让我们通过使用DEGIT工具生成Svelte Projects来构建我们的每日星球新闻应用程序。

>您可以在系统上全球安装DEGIT，也可以使用NPX工具从NPM执行它。打开一个新终端并运行以下命令：

接下来，在项目的文件夹中导航，并使用以下命令运行开发服务器：>

npx degit sveltejs/template dailyplanetnews

>您的开发服务器将从http：// localhost：5000地址从聆听。如果您进行任何更改，它们将被重建并实时加载到您的运行应用中。

>打开项目的main.js文件，您应该找到以下代码：>

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

这是通过创建和导出root组件的实例（通常称为应用程序）来引导Svelte应用程序的地方。该组件采用带有目标和props属性的对象。

>目标包含将安装组件的DOM元素，并且Props包含要传递给App组件的属性。在这种情况下，它只是一个名称，带有

> world

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

value。

>

>打开app.svelte文件，您应该找到以下代码：

> 这是我们应用程序的根组成部分。所有其他组件将是App的孩子。

> Svelte中的组件使用.svelte扩展名的源文件，其中包含组件的所有JavaScript，样式和标记。

>导出名称;语法创建一个称为名称的组件道具。我们使用变量插值 - {...} - 通过名称prop。

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

显示传递的值

>您可以简单地使用熟悉的普通旧JavaScript，CSS和HTML来创建Svelte组件。 Svelte还向HTML添加了一些模板语法，以进行可变的插值和通过数据列表等循环。

由于这是一个小应用程序，我们可以简单地在应用程序组件中实现所需的功能。

>在<script>标签中，从“ svelte”中导入onmount（）方法，并定义api_key，文章和URL变量，这些变量将保存新闻API密钥，获取的新闻文章和提供数据的端点：</script>

> onMount是一种生命周期方法。这是官方教程对此所说的：

每个组件都有一个

>生命周期

在创建并在被破坏时结束时开始。有少数功能使您可以在该生命周期期间的关键时刻运行代码。您最常使用的是OnMount，该元件首先渲染到DOM。

接下来，让我们使用fetch API从新闻端点获取数据，并在将组件安装在DOM中时将文章存储在文章变量中：

npx degit sveltejs/template dailyplanetnews

由于fetch（）方法返回JavaScript承诺，因此我们可以使用异步/等待语法使代码看起来同步并消除回调。

接下来，让我们添加以下HTML标记以创建我们的应用程序的UI并显示新闻数据：>

>我们使用每个块来循环到新闻文章，并显示每篇文章的标题，描述，URL和URL图像。

<span>cd dailyplanetnews
</span><span>npm run dev
</span>

>每日星球徽标和标题是从这个受DC Comics启发的非营利性新闻机构借来的。

我们将使用Google字体可提供的手写字体Kalam，因此请打开public/index.html文件，并添加以下标签：>

接下来，返回到app.svelte文件并添加以下样式：>

这是我们每日新闻应用程序的屏幕截图：

<span>import <span>App</span> from './App.svelte';
</span>
<span>const app = new App({
</span>    <span>target: document.body,
</span>    <span>props: {
</span>        <span>name: 'world'
</span>    <span>}
</span><span>});
</span>
<span>export default app;
</span>

<span><span><span><script</span>></span><span>
</span></span><span><span>    <span>export let name;
</span></span></span><span><span></span><span><span></script</span>></span>
</span>
<span><span><span><style</span>></span><span>
</span></span><span><span>    <span>h1 {
</span></span></span><span><span>        <span>color: purple;
</span></span></span><span><span>    <span>}
</span></span></span><span><span></span><span><span></style</span>></span>
</span>
<span><span><span><h1</span>></span>Hello {name}!<span><span></h1</span>></span>
</span>

用于生产的建筑物

开发应用程序后，您可以通过在终端中运行构建命令来创建生产捆绑包：

该命令将产生一个缩小且可生产的捆绑包，您可以在首选的托管服务器上托管。

>现在让我们立即使用Zeit托管应用程序。

> zeit现在是一个用于网站和无服务器功能的云平台，您可以用来将项目部署到.now.sh或个人域。

<span><script>
</span>    <span>export let name;
</span>
    <span>import <span>{ onMount }</span> from "svelte";
</span>
    <span>const API_KEY = "<YOUR_API_KEY_HERE>";
</span>    <span>const URL = <span>`https://newsapi.org/v2/everything?q=comics&sortBy=publishedAt&apiKey=<span>${API_KEY}</span>`</span>;
</span>    <span>let articles = [];
</span>
<span></script>
</span>

返回您的终端，然后运行以下命令以立即安装CLI：>

接下来，导航到public文件夹并运行现在的命令：>

就是这样！您的应用程序将部署到云中。在我们的情况下，可以从public-kyqab3g5j.now.sh。

您可以从此GitHub存储库中找到此应用程序的源代码。结论 在本教程中，我们使用Svelte构建了一个简单的新闻应用程序。我们还看到了什么是Svelte，以及如何使用NPM的DEGIT工具来创建一个Svelte项目。。

>您可以参考官方文档以获取详细的教程，以了解每个Svelte功能。

>常见问题（常见问题解答）有关使用Svelte

构建新闻应用程序的问题（常见问题解答）

>使用Svelte构建新闻应用程序的关键好处是什么？

svelte是现代的JavaScript编译器，它允许您编写易于理解的JavaScript代码，然后将其编译为高效的命令式代码直接操纵DOM。构建新闻应用程序时，Svelte提供了一些好处。首先，它提供了一个更简单，更清洁的代码，使开发人员更容易理解和维护代码。其次，Svelte应用程序具有很高的性能。由于Svelte在构建时间运行，因此将应用程序组件转换为更新DOM的高效命令代码。这导致加载时间更快，用户体验更顺畅。最后，像React和Vue一样，Svelte是基于组件的，这使得构建复杂的用户界面变得更加容易。

>如何将新文章添加到使用Svelte构建的新闻应用程序？ >在您的Svelte新闻应用程序中添加新文章涉及为文章创建一个新组件，然后将其导入相关的父组件。在新组件中，您可以定义文章的内容和任何相关的元数据，例如作者和发布日期。创建组件后，您可以使用导入语句将其导入到父组件中。然后，您可以将其添加到父母组件的渲染方法中。 Svelte新闻应用程序涉及创建搜索组件并添加状态管理以跟踪搜索输入。您可以使用Svelte的内置反应性功能来根据搜索输入来更新显示的文章。当搜索输入更改时，您可以过滤文章列表，以包括匹配搜索输入的文章列表。

我如何在我的Svelte应用程序中对新闻文章进行分类？可以通过在每个文章中添加类别属性来实现Svelte应用程序。然后可以使用此属性根据所选类别过滤文章。您可以创建一个显示类别列表的类别组件。当选择类别时，您可以将显示的文章更新为仅包含所选类别中的文章。

>如何将用户身份验证添加到我的Svelte News应用程序？

> Svelte新闻应用程序可以使用各种方法进行，例如使用Firebase Authentication服务或JWT（JSON Web令牌）的后端服务器。您需要创建一个身份验证组件，用户可以在其中输入其登录凭据。表单提交后，这些凭据将发送到身份验证服务或后端服务器进行验证。如果凭据有效，则对用户进行身份验证并授予对应用程序的访问

>如何使我的Svelte News应用程序响应？

>制作Svelte News应用程序响应式响应涉及使用CSS媒体查询根据屏幕尺寸调整应用程序的布局。 Svelte允许您在与JavaScript和HTML代码相同的文件中编写CSS代码，从而更容易设置组件。您可以为不同的屏幕尺寸定义不同样式的样式，以确保您的应用在所有设备上看起来都不错。

如何在我的Svelte News应用程序中添加推送通知？

>向Svelte News添加推送通知可以使用诸如Firebase Cloud Messaging之类的服务完成应用。您需要在服务上注册您的应用程序，然后将必要的代码添加到您的应用程序中以处理接收推送通知。这通常涉及将服务工作者添加到您的应用程序中，该应用程序会在收到一个时听取推送事件并显示通知。

>

>如何将评论部分添加到我的Svelte News App？ Svelte新闻应用程序的评论部分涉及创建评论组件并添加状态管理以跟踪评论。您可以使用Svelte的内置反应性功能来根据用户输入来更新评论。当用户提交注释时，您可以将其添加到注释列表中并更新显示的注释。

>

>如何优化Svelte News应用程序的性能？一个苗条的新闻应用程序可能涉及多种策略。首先，您可以使用Svelte的内置工具进行代码分配和懒惰加载，仅加载当前视图所需的代码。其次，您可以优化图像和其他静态资产以减少其文件大小。最后，您可以使用服务工作者来缓存您的应用程序资产并将其从缓存中提供服务，从而减少了加载时间。

>

>如何部署我的Svelte News App？

可以使用各种方法来完成应用程序，例如使用Netlify或Vercel（例如Netlify或Vercel）的静态站点托管服务，或者使用Google Cloud或AWS等云平台。您需要使用NPM Run Build Command构建应用程序，该命令使用您的编译应用程序创建一个公共文件夹。然后可以将此文件夹上传到您的托管服务或云平台。

>

以上是Svelte App项目：构建每日星球的新闻应用程序UI的详细内容。更多信息请关注PHP中文网其他相关文章！