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: