熟悉HTML，CSS和JavaScript（ES6）

> node.js和npm安裝在您的開發(fā)機上。 可以從官方網(wǎng)站上輕松安裝node.js，也可以使用NVM輕松安裝和管理系統(tǒng)中的節(jié)點的多個版本。>

>我們將使用JSON API作為我們應用的新聞來源，因此您需要通過免費創(chuàng)建一個帳戶并注意您的API密鑰來獲取API密鑰。>

入門

>現(xiàn)在，讓我們通過使用DEGIT工具生成Svelte Projects來構建我們的每日星球新聞應用程序。

>您可以在系統(tǒng)上全球安裝DEGIT，也可以使用NPX工具從NPM執(zhí)行它。打開一個新終端并運行以下命令：

接下來，在項目的文件夾中導航，并使用以下命令運行開發(fā)服務器：>

npx degit sveltejs/template dailyplanetnews

>您的開發(fā)服務器將從http：// localhost：5000地址從聆聽。如果您進行任何更改，它們將被重建并實時加載到您的運行應用中。

>打開項目的main.js文件，您應該找到以下代碼：>

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

這是通過創(chuàng)建和導出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，樣式和標記。

>導出名稱;語法創(chuàng)建一個稱為名稱的組件道具。我們使用變量插值 - {...} - 通過名稱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來創(chuàng)建Svelte組件。 Svelte還向HTML添加了一些模板語法，以進行可變的插值和通過數(shù)據(jù)列表等循環(huán)。

由于這是一個小應用程序，我們可以簡單地在應用程序組件中實現(xiàn)所需的功能。

>在<script>標簽中，從“ svelte”中導入onmount（）方法，并定義api_key，文章和URL變量，這些變量將保存新聞API密鑰，獲取的新聞文章和提供數(shù)據(jù)的端點：</script>

> onMount是一種生命周期方法。這是官方教程對此所說的：

每個組件都有一個

>生命周期

在創(chuàng)建并在被破壞時結束時開始。有少數(shù)功能使您可以在該生命周期期間的關鍵時刻運行代碼。您最常使用的是OnMount，該元件首先渲染到DOM。

接下來，讓我們使用fetch API從新聞端點獲取數(shù)據(jù)，并在將組件安裝在DOM中時將文章存儲在文章變量中：

npx degit sveltejs/template dailyplanetnews

接下來，讓我們添加以下HTML標記以創(chuàng)建我們的應用程序的UI并顯示新聞數(shù)據(jù)：>

>我們使用每個塊來循環(huán)到新聞文章，并顯示每篇文章的標題，描述，URL和URL圖像。

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

我們將使用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>

<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>