Finn ut hvordan du kommer i gang med en stilig Svelte-app.

Nettrammeverk kommer og går, men en av de mest lovende er Svelte. Svelte er et flott alternativ til React, og selv om det allerede har et stort fellesskap, er det definitivt et rammeverk å passe på. Svelte gjør det enkelt å style appene dine, med flere tilgjengelige tilnærminger.

Styling Svelte-applikasjoner

Hvert brukergrensesnittbibliotek eller rammeverk krever en metode for å style komponentene. De fleste komponentbaserte rammeverk støtter den tradisjonelle metoden for styling av komponenter: bare importer CSS-filen og du er ferdig. Svelte er intet unntak. I Svelte er det tre hovedmåter å style applikasjonene dine på, hver med sine egne fordeler og ulemper.

Sette opp Svelte-prosjektet ditt

For å installere Svelte, kan du bruke ViteJS front-end byggeverktøy. For å sette opp ting, sørg for at Node.js kjøretid og Node Package Manager (NPM) er riktig installert på datamaskinen. Du kan bekrefte tilgjengeligheten til Node.js og NPM ved å kjøre denne terminalen følgende kommando:

instagram viewer 
node -v

Etter å ha forsikret deg om at Node kjører, åpne terminalen og kjør følgende:

npm create vite

Eller:

yarn create vite

Dette bør stillaset et nytt Vite-prosjekt. Sett prosjektnavnet til hva du vil, rammeverket skal være "Svelte" og varianten skal være JavaScript (men du kan bruke TypeScript hvis du er komfortabel med det). Bytt nå til prosjektkatalogen med cd kommando og kjør følgende kommando for å installere de nødvendige avhengighetene:

npm install

Eller:

yarn

Etter å ha installert avhengighetene kan du starte utviklingsserveren ved å kjøre:

npm run dev

Eller:

yarn dev

Definere markeringen av prosjektet

Åpne prosjektet i en valgfri kodeeditor og slett eiendeler og lib mappe. Sørg også for at du sletter innholdet i app.css filen og App.svelte fil. Åpne main.js fil og erstatt innholdet med følgende:

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

Deretter åpner du App.svelte fil og i manus tag og lag en matrise som vil inneholde forskjellige lenker, som dette: