Finden Sie heraus, wie Sie mit einer stilvollen Svelte-App durchstarten können.

Web-Frameworks kommen und gehen, aber eines der vielversprechendsten ist Svelte. Svelte ist eine großartige Alternative zu React und obwohl es bereits eine große Community hat, ist es definitiv ein Framework, auf das man achten sollte. Mit Svelte können Sie Ihre Apps ganz einfach gestalten, wobei mehrere Ansätze zur Verfügung stehen.

Styling schlanker Anwendungen

Jede UI-Bibliothek oder jedes UI-Framework erfordert eine Methode zum Formatieren ihrer Komponenten. Die meisten komponentenbasierten Frameworks unterstützen die traditionelle Methode zum Stylen von Komponenten: Importieren Sie einfach die CSS-Datei und fertig. Svelte ist keine Ausnahme. In Svelte gibt es im Wesentlichen drei Möglichkeiten, Ihre Anwendungen zu gestalten, jede mit ihren eigenen Vor- und Nachteilen.

Einrichten Ihres Svelte-Projekts

Um Svelte zu installieren, können Sie das verwenden ViteJS-Frontend-Build-Tool. Stellen Sie beim Einrichten sicher, dass die

instagram viewer
Node.js-Laufzeit Und der Node Package Manager (NPM) korrekt auf Ihrem Computer installiert sind. Sie können die Verfügbarkeit von Node.js und NPM überprüfen, indem Sie den folgenden Terminalbefehl ausführen:

node -v

Nachdem Sie sichergestellt haben, dass Node ausgeführt wird, öffnen Sie das Terminal und führen Sie Folgendes aus:

npm create vite

Oder:

yarn create vite

Dies sollte den Grundstein für ein neues Vite-Projekt legen. Legen Sie den Projektnamen auf Ihren Wunsch fest, das Framework sollte „Svelte“ und die Variante JavaScript sein (Sie können jedoch TypeScript verwenden, wenn Sie damit vertraut sind). Wechseln Sie nun mit in das Projektverzeichnis CD Befehl und führen Sie den folgenden Befehl aus, um die erforderlichen Abhängigkeiten zu installieren:

npm install

Oder:

yarn

Nach der Installation der Abhängigkeiten können Sie den Entwicklungsserver starten, indem Sie Folgendes ausführen:

npm run dev

Oder:

yarn dev

Definieren des Markups des Projekts

Öffnen Sie das Projekt in einem beliebigen Code-Editor und löschen Sie es Vermögenswerte Und lib Ordner. Stellen Sie außerdem sicher, dass Sie den Inhalt löschen app.css Datei und die App.svelte Datei. Öffne das main.js Datei und ersetzen Sie den Inhalt durch Folgendes:

import App from'./App.svelte'
const app = new App({
 target: document.getElementById('app'),
})
exportdefault app

Als nächstes öffnen Sie die App.svelte Datei und in der Skript Taggen Sie und erstellen Sie ein Array, das verschiedene Links enthält, etwa so: