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中文網其他相關文章！