Svelte App -Projekt: Erstellen Sie die Nachrichten -App -Benutzeroberfläche des Tagesplanetens

Sufle ist eine neue JavaScript -UI -Bibliothek, die in vielerlei Hinsicht zu modernen UI -Bibliotheken wie React ähnelt. Ein wichtiger Unterschied ist, dass das Konzept eines virtuellen Doms nicht verwendet wird.

In diesem Tutorial werden wir Svelte vorstellen, indem wir eine von The Daily Planet, einer fiktive Zeitung aus der Superman -Welt, inspirierte Nachrichtenanmeldung erstellen.

Key Takeaways

• svelte ist eine neue JavaScript -UI -Bibliothek, die kein virtuelles DOM verwendet, was es schneller macht als die meisten leistungsstarken Frameworks wie React, Vue und Angular. Es verschiebt die erforderlichen Arbeiten in eine Kompilierzeitphase auf der Entwicklungsmaschine beim Erstellen der App.
• Das Tutorial bietet einen Schritt-für-Schritt-Leitfaden zum Aufbau einer Nachrichtenanmeldung, die vom Daily Planet, einer fiktiven Zeitung aus der Superman-Welt, inspiriert ist. Dies beinhaltet die Initialisierung eines Svelte -Projekts, das Ausführen eines lokalen Entwicklungsservers und das Erstellen des endgültigen Bundle.
• Das Tutorial deckt auch die Verwendung des DEGIT -Tools zum Generieren von Summe -Projekten, das Abholen von Daten von einem Nachrichtenendpunkt und das Erstellen der Benutzeroberfläche für die Anwendung ab.
.
Nach der Entwicklung der Anwendung kann man die Produktionsbündel erstellen, indem der Befehl Build im Terminal ausgeführt wird und die Anwendung mithilfe von ZEIT NOW, einer Cloud -Plattform für Websites und serverlose Funktionen, ausführt.

über Svelte

svelte nutzt einen neuen Ansatz zum Aufbau von Benutzernschnittstellen. Anstatt die notwendigen Arbeiten im Browser zu erledigen, verschiebt sich Svelte, die zu einer Kompilierungsphase auf der Entwicklungsmaschine passt, wenn Sie Ihre App erstellen.

Kurz gesagt, so funktioniert Svelte (wie im offiziellen Blog angegeben):

svelte läuft bei erstellen Sie die Zeit und konvertiert Ihre Komponenten in hocheffiziente imperative

Code, der die DOM operativ aktualisiert. Infolgedessen können Sie ehrgeizige Anwendungen mit hervorragenden Leistungsmerkmalen schreiben.

svelte ist schneller als die leistungsstärksten Frameworks (React, Vue und Angular), da es kein virtuelles DOM verwendet und nur die Teile, die sich ändern, operativ aktualisiert.

Wir lernen die grundlegenden Konzepte wie Svelte -Komponenten und wie man Datenarrays abrufen und iterieren. Wir lernen auch, wie Sie ein SVELTE -Projekt initialisieren, einen lokalen Entwicklungsserver ausführen und das endgültige Bundle erstellen.

Voraussetzungen

Sie müssen ein paar Voraussetzungen haben, damit Sie diesem Tutorial bequem folgen können, wie:

Vertrautheit mit HTML, CSS und JavaScript (ES6),
node.js und npm auf Ihrem Entwicklungsgerät installiert.

node.js kann einfach auf der offiziellen Website installiert werden oder Sie können auch NVM verwenden, um mehrere Knotenversionen in Ihrem System einfach zu installieren und zu verwalten.

Wir werden eine JSON -API als Quelle der Nachrichten für unsere App verwenden. Daher müssen Sie einen API -Schlüssel erhalten, indem Sie einfach ein Konto kostenlos erstellen und Ihren API -Schlüssel zur Kenntnis nehmen.

Erste Schritte

Lassen Sie uns nun mit dem Aufbau unserer Daily Planet News -Anwendung mit dem DEGIT -Tool zur Generierung von SufleT -Projekten aufbauen.

Sie können entweder Degit weltweit auf Ihrem System installieren oder das NPX -Tool verwenden, um es von NPM auszuführen. Öffnen Sie ein neues Terminal und führen Sie den folgenden Befehl aus:

npx degit sveltejs/template dailyplanetnews

Navigieren Sie als nächstes im Ordner Ihres Projekts und führen Sie den Entwicklungsserver mit den folgenden Befehlen aus:

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

Ihr Dev -Server hört von der Adresse http: // localhost: 5000 zu. Wenn Sie Änderungen vornehmen, werden sie wieder aufgebaut und live in Ihre laufende App aufgeladen.

Öffnen Sie die Main.js -Datei Ihres Projekts, und Sie sollten den folgenden Code finden:

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

Hier wird die Svelte -App durch das Erstellen und Exportieren einer Instanz der Root -Komponente, die herkömmlich genannt wird, eingeladen. Die Komponente nimmt ein Objekt mit einem Ziel- und Requisitenattributen an.

Das Ziel enthält das DOM -Element, in dem die Komponente montiert wird, und die Requisiten enthält die Eigenschaften, die wir an die App -Komponente übergeben möchten. In diesem Fall ist es nur ein Name mit dem welt Wert.

Öffnen Sie die Datei app.svelte, und Sie sollten den folgenden Code finden:

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

Dies ist die Stammkomponente unserer Anwendung. Alle anderen Komponenten sind Kinder von App.

Komponenten in Selte Verwenden Sie die Erweiterung .svelte für Quelldateien, die alle JavaScript, Stile und Markup für eine Komponente enthalten.

Der Export lassen Sie sich den Namen; Die Syntax erstellt eine Komponenten -Requisite namens Name. Wir verwenden eine variable Interpolation - {...} -, um den Wert anzuzeigen, der über den Namen der Namensantrieb übergeben wurde.

Sie können einfach einen einfachen alten JavaScript, CSS und HTML verwenden, mit dem Sie vertraut sind, um Svelte -Komponenten zu erstellen. Svelte fügt HTML auch eine Template -Syntax für die variable Interpolation und das Schleifen durch Datenlisten usw. hinzu usw.

Da es sich um eine kleine App handelt, können wir einfach die erforderliche Funktionalität in der App -Komponente implementieren.

importieren Sie im <script> -Tag die Onmount () -Methode aus "Sufle" und definieren Sie die API_Key-, Artikel- und URL -Variablen, die den Nachrichten -API -Schlüssel, die abgerufenen Nachrichtenartikel und den Endpunkt enthalten, der Daten liefert: </script>

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

Onmount ist eine Lebenszyklusmethode. Hier ist, was das offizielle Tutorial dazu sagt:

Jede Komponente hat einen Lebenszyklus , der beim Erstellen beginnt und endet, wenn sie zerstört wird. Es gibt eine Handvoll Funktionen, mit denen Sie während dieses Lebenszyklus Code in wichtigen Momenten ausführen können. Der am häufigsten verwendete, ist Onmount, der nach dem ersten zum ersten Mal in den Dom.

ausgeführt wird

Verwenden wir als nächstes die Fetch -API, um Daten aus dem Nachrichtenendpunkt abzurufen und die Artikel in der Artikelvariable zu speichern, wenn die Komponente im DOM montiert ist:

npx degit sveltejs/template dailyplanetnews

Da die Fetch () -Methode ein JavaScript -Versprechen zurückgibt, können wir die Async/Ause -Syntax verwenden, um den Code synchron aussehen zu lassen und Rückrufe zu beseitigen.

Fügen Sie als nächstes das folgende HTML -Markup hinzu, um die Benutzeroberfläche unserer Anwendung zu erstellen und die Nachrichtendaten anzuzeigen:

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

Wir verwenden den einzelnen Block, um die Nachrichtenartikel zu schleifen, und zeigen den Titel, die Beschreibung, die URL und die URLTOIMage jedes Artikels.

Das Daily Planet -Logo und die Überschrift stammen aus dieser gemeinnützigen Nachrichtenorganisation, die von DC -Comics inspiriert ist.

Wir nutzen Kalam, eine handgeschriebene Schriftart bei Google -Schriftarten, also öffnen Sie die öffentliche/index.html -Datei und fügen Sie das folgende Tag hinzu:

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

Gehen Sie als nächstes zur App.selte -Datei zurück und fügen Sie die folgenden Stile hinzu:

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

Dies ist ein Screenshot unserer Daily News -App:

Gebäude für Produktion

Nachdem Sie Ihre Anwendung entwickelt haben, können Sie die Produktionsbündel erstellen, indem Sie den Befehl Build in Ihrem Terminal ausführen:

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

Der Befehl erzeugt ein minifiedes und produktionsbereites Bundle, das Sie auf Ihrem bevorzugten Hosting-Server hosten können.

lasst uns jetzt die Anwendung jetzt mit ZEIT hosten.

Zeit jetzt ist eine Cloud -Plattform für Websites und serverlose Funktionen, mit denen Sie Ihre Projekte in einem .now.sh- oder persönlichen Domain bereitstellen können.

Gehen Sie zurück zu Ihrem Terminal und führen Sie den folgenden Befehl aus, um jetzt CLI zu installieren:

<span><script>
</span>    <span>// [...]
</span>
    <span>onMount(async function() {
</span>        <span>const response = await fetch(URL);
</span>        <span>const json = await response.json();
</span>        articles <span>= json["articles"];
</span>    <span>});
</span><span></script>    
</span>

Navigieren Sie als nächstes zum öffentlichen Ordner und führen Sie den Befehl nun aus:

<span><span><span><h1</span>></span>
</span>    <span><span><span><img</span> src<span>="https://dailyplanetdc.files.wordpress.com/2018/12/cropped-daily-planet-logo.jpg?w=656&h=146"</span> /></span>
</span>    <span><span><span><p</span> class<span>="about"</span>></span>
</span>            The Daily Planet is where heroes are born and the story continues. We are proud to report on the planet, daily.
    <span><span><span></p</span>></span>
</span><span><span><span></h1</span>></span>
</span>
<span><span><span><div</span> class<span>="container"</span>></span>
</span>
        {#each articles as article}
            <span><span><span><div</span> class<span>="card"</span>></span>
</span>                <span><span><span><img</span> src<span>="{article.urlToImage}"</span>></span>
</span>                <span><span><span><div</span> class<span>="card-body"</span>></span>
</span>                    <span><span><span><h3</span>></span>{article.title}<span><span></h3</span>></span>
</span>                    <span><span><span><p</span>></span> {article.description} <span><span></p</span>></span>
</span>                    <span><span><span><a</span> href<span>="{article.url}"</span>></span>Read story<span><span></a</span>></span>
</span>                <span><span><span></div</span>></span>
</span>            <span><span><span></div</span>></span>
</span>        {/each}

<span><span><span></div</span>></span>
</span>

Das ist es! Ihre Anwendung wird in der Cloud bereitgestellt. In unserem Fall ist es bei öffentlich-kyqab3g5j.now.sh.

erhältlich

Sie können den Quellcode dieser Anwendung aus diesem GitHub -Repository finden.

Schlussfolgerung

In diesem Tutorial haben wir eine einfache Nachrichten -App mit Svelte erstellt. Wir haben auch gesehen, was Svelte ist und wie ein Svelte -Projekt mit dem Degit -Tool von NPM erstellt wird.

Sie können sich auf die offiziellen Dokumente verweisen, um ein detailliertes Tutorial zu erhalten, um mehr über jede schlanke Funktion zu erfahren.

häufig gestellte Fragen (FAQs) zum Erstellen einer Nachrichten -App mit Sufle

Was sind die wichtigsten Vorteile der Verwendung von Svelte zum Erstellen einer Nachrichten-App? Das manipuliert direkt den Dom. Beim Erstellen einer Nachrichten -App bietet SVELTE mehrere Vorteile. Erstens bietet es einen einfacheren und saubereren Code, sodass Entwickler den Code verstehen und verwaltet. Zweitens sind schlanke Apps sehr leistungsfähig. Da Svelte zur Build -Zeit ausgeführt wird, wandelt es die App -Komponenten in hocheffizienten imperativen Code um, der das DOM aktualisiert. Dies führt zu schnelleren Ladezeiten und zu einer glatteren Benutzererfahrung. Zuletzt ist Svelte auf Komponentenbasis, genau wie React und Vue, das Erstellen komplexer Benutzeroberflächen erleichtert. > Hinzufügen eines neuen Artikels zu Ihrer Svelte News -App beinhaltet das Erstellen einer neuen Komponente für den Artikel und das Importieren dieser in die entsprechende übergeordnete Komponente. In der neuen Komponente können Sie den Inhalt des Artikels und alle zugehörigen Metadaten wie den Autor und das veröffentlichte Datum definieren. Sobald die Komponente erstellt wurde, können Sie sie mit der Import -Anweisung in die übergeordnete Komponente importieren. Dann können Sie es zur Render -Methode der übergeordneten Komponente hinzufügen, in der der Artikel angezeigt werden soll. Eine Sufle News -App beinhaltet das Erstellen einer Suchkomponente und das Hinzufügen von Statusverwaltung, um die Sucheingabe zu verfolgen. Sie können die integrierten Reaktivitätsfunktionen von SVVETE verwenden, um die angezeigten Artikel basierend auf der Sucheingabe zu aktualisieren. Wenn sich die Sucheingabe ändert, können Sie die Liste der Artikel filtern, um nur diejenigen zu enthalten, die mit der Sucheingabe übereinstimmen. Eine Svelte -App kann erreicht werden, indem jedem Artikel eine Kategorie -Eigenschaft hinzugefügt wird. Diese Eigenschaft kann dann verwendet werden, um die Artikel basierend auf der ausgewählten Kategorie zu filtern. Sie können eine Kategorienkomponente erstellen, in der eine Liste von Kategorien angezeigt wird. Wenn eine Kategorie ausgewählt ist, können Sie die angezeigten Artikel aktualisieren, um diese nur in der ausgewählten Kategorie aufzunehmen. Die SVELTE News -App kann mit verschiedenen Methoden durchgeführt werden, z. Sie müssten eine Authentifizierungskomponente erstellen, in der Benutzer ihre Anmeldeinformationen eingeben können. Bei der Einreichung von Formular werden diese Anmeldeinformationen zur Überprüfung an den Authentifizierungsdienst oder den Backend -Server gesendet. Wenn die Anmeldeinformationen gültig sind, wird der Benutzer authentifiziert und erteilt Zugriff auf die App.

Wie kann ich meine Svelte News -App reagieren? Mit Invelte können Sie CSS -Code in dieselbe Datei wie Ihr JavaScript- und HTML -Code schreiben, sodass Sie Ihre Komponenten einfacher stylen können. Sie können verschiedene Stile für verschiedene Bildschirmgrößen definieren, um sicherzustellen, dass Ihre App auf allen Geräten gut aussieht. Die App kann mit einem Dienst wie Firebase Cloud Messaging erfolgen. Sie müssten Ihre App mit dem Dienst registrieren und dann den erforderlichen Code zu Ihrer App hinzufügen, um empfangende Push -Benachrichtigungen zu verarbeiten. Dies beinhaltet in der Regel das Hinzufügen eines Servicearbeiters zu Ihrer App, der auf Push -Ereignisse hört und die Benachrichtigung anweist, wenn einer empfangen wird. Ein Kommentarbereich zu einer SufleTes News -App beinhaltet das Erstellen einer Kommentarkomponente und das Hinzufügen von Statusverwaltung, um die Kommentare zu verfolgen. Sie können die integrierten Reaktivitätsfunktionen von SELTTE verwenden, um die Kommentare basierend auf Benutzereingaben zu aktualisieren. Wenn ein Benutzer einen Kommentar abgibt, können Sie ihn der Liste der Kommentare hinzufügen und die angezeigten Kommentare aktualisieren. Eine schlanke Nachrichten -App kann mehrere Strategien beinhalten. Erstens können Sie die integrierten Tools von SVVETE für das Code-Spliting und das faule Laden verwenden, um nur den Code zu laden, der für die aktuelle Ansicht benötigt wird. Zweitens können Sie Ihre Bilder und andere statische Assets optimieren, um ihre Dateigröße zu reduzieren. Zuletzt können Sie einen Servicearbeiter verwenden, um die Vermögenswerte Ihrer App zu speichern und aus dem Cache zu servieren, wodurch die Ladezeit verkürzt wird. Die App kann mit verschiedenen Methoden erfolgen, z. B. mithilfe eines statischen Hosting -Dienstes wie Netlify oder Vercel oder einer Cloud -Plattform wie Google Cloud oder AWS. Sie müssten Ihre App für die Produktion mit dem Befehl npm run build erstellen, der einen öffentlichen Ordner mit Ihrer kompilierten App erstellt. Dieser Ordner kann dann auf Ihren Hosting -Dienst oder Ihre Cloud -Plattform hochgeladen werden.

Das obige ist der detaillierte Inhalt vonSvelte App -Projekt: Erstellen Sie die Nachrichten -App -Benutzeroberfläche des Tagesplanetens. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!