Siit saate teada, kuidas stiilse Svelte rakendusega alustada.

Veebiraamistikud tulevad ja lähevad, kuid üks lootustandvamaid on Svelte. Svelte on suurepärane alternatiiv Reactile ja kuigi sellel on juba suur kogukond, on see kindlasti raamistik, millele tähelepanu pöörata. Svelte muudab rakenduste stiili kujundamise lihtsaks, kuna saadaval on mitu erinevat lähenemisviisi.

Svelte rakenduste stiil

Iga kasutajaliidese teek või raamistik nõuab selle komponentide stiilimiseks meetodit. Enamik komponendipõhiseid raamistikke toetab traditsioonilist komponentide kujundamise meetodit: lihtsalt importige CSS-fail ja oletegi valmis. Svelte pole erand. Sveltes on rakenduste kujundamiseks kolm peamist viisi, millest igaühel on oma eelised ja puudused.

Svelte'i projekti seadistamine

Svelte installimiseks võite kasutada ViteJS-i esiotsa koostamise tööriist. Asjade seadistamiseks veenduge, et Node.js käitusaeg ja sõlme paketihaldur (NPM) on teie arvutisse õigesti installitud. Saate kontrollida Node.js ja NPM saadavust, käivitades selle terminali järgmise käsu:

node -v

Kui olete veendunud, et Node töötab, avage terminal ja käivitage järgmine:

npm create vite

Või:

yarn create vite

See peaks rajama uue Vite projekti. Määrake projekti nimeks mis iganes soovite, raamistik peaks olema "Svelte" ja variant peaks olema JavaScript (kuid võite kasutada TypeScripti, kui see teile sobib). Nüüd lülituge nupuga projektikataloogi cd käsk ja käivitage vajalike sõltuvuste installimiseks järgmine käsk:

npm install

Või:

yarn

Pärast sõltuvuste installimist saate arendusserveri käivitada, käivitades:

npm run dev

Või:

yarn dev

Projekti märgistuse määratlemine

Avage projekt mis tahes valitud koodiredaktoris ja kustutage varasid ja lib kausta. Samuti veenduge, et tühjendaksite selle sisu app.css fail ja App.svelte faili. Ava main.js faili ja asendage sisu järgmisega:

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

Järgmisena avage App.svelte failis ja stsenaarium sildista ja loo massiiv, mis sisaldab erinevaid linke, näiteks järgmine: