Find ud af, hvordan du kommer i gang med en stilfuld Svelte-app.

Webrammer kommer og går, men en af ​​de mest lovende er Svelte. Svelte er et godt alternativ til React, og selvom det allerede har et stort fællesskab, er det bestemt en ramme at passe på. Svelte gør det nemt at style dine apps med flere tilgængelige tilgange.

Styling Svelte-applikationer

Hvert UI-bibliotek eller -framework kræver en metode til at style dets komponenter. De fleste komponentbaserede rammer understøtter den traditionelle metode til styling af komponenter: Du skal blot importere CSS-filen, og du er færdig. Svelte er ingen undtagelse. I Svelte er der tre hovedmåder at style dine applikationer på, hver med sine egne fordele og ulemper.

Opsætning af dit Svelte-projekt

For at installere Svelte kan du bruge ViteJS front-end byggeværktøj. For at sætte tingene op skal du sikre dig, at Node.js runtime og Node Package Manager (NPM) er korrekt installeret på din computer. Du kan bekræfte tilgængeligheden af ​​Node.js og NPM ved at køre denne terminal følgende kommando:

instagram viewer 
node -v

Når du har sikret dig, at Node kører, skal du åbne terminalen og køre følgende:

npm create vite

Eller:

yarn create vite

Dette skulle skabe et nyt Vite-projekt. Indstil projektnavnet til hvad du vil, rammen skal være "Svelte", og varianten skal være JavaScript (men du kan bruge TypeScript, hvis du er fortrolig med det). Skift nu til projektbiblioteket med cd kommando og kør følgende kommando for at installere de nødvendige afhængigheder:

npm install

Eller:

yarn

Efter installation af afhængigheder kan du starte udviklingsserveren ved at køre:

npm run dev

Eller:

yarn dev

Definition af markeringen af ​​projektet

Åbn projektet i en valgfri kodeeditor, og slet aktiver og lib folder. Sørg også for at rydde indholdet af app.css fil og App.svelte fil. Åbn main.js fil og erstat indholdet med følgende:

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

Åbn derefter App.svelte fil og i manuskript tag og opret et array, der vil indeholde forskellige links, som dette: