Zistite, ako začať so štýlovou aplikáciou Svelte.

Webové rámce prichádzajú a odchádzajú, ale jedným z najsľubnejších je Svelte. Svelte je skvelá alternatíva k Reactu a hoci už má veľkú komunitu, je to určite rámec, na ktorý si treba dávať pozor. Svelte zjednodušuje úpravu vašich aplikácií pomocou niekoľkých dostupných prístupov.

Štýlové aplikácie Svelte

Každá knižnica alebo rámec používateľského rozhrania vyžaduje metódu na štýl svojich komponentov. Väčšina rámcov založených na komponentoch podporuje tradičnú metódu úpravy komponentov: jednoducho importujte súbor CSS a máte hotovo. Svelte nie je výnimkou. V Svelte existujú tri hlavné spôsoby úpravy vašich aplikácií, pričom každý má svoje výhody a nevýhody.

Nastavenie vášho Štýlového projektu

Na inštaláciu Svelte môžete použiť ViteJS front-end nástroj na zostavovanie. Ak chcete veci nastaviť, uistite sa, že Runtime Node.js a správca balíkov uzlov (NPM) sú správne nainštalované vo vašom počítači. Dostupnosť Node.js a NPM môžete overiť spustením tohto terminálu podľa nasledujúceho príkazu:

node -v

Keď sa ubezpečíte, že Node je spustený, otvorte terminál a spustite nasledovné:

npm create vite

alebo:

yarn create vite

To by malo tvoriť nový projekt Vite. Nastavte názov projektu na čokoľvek chcete, rámec by mal byť „Svelte“ a variant by mal byť JavaScript (ale môžete použiť TypeScript, ak vám to vyhovuje). Teraz prejdite do adresára projektu pomocou cd a spustite nasledujúci príkaz na inštaláciu potrebných závislostí:

npm install

alebo:

yarn

Po nainštalovaní závislostí môžete spustiť vývojový server spustením:

npm run dev

alebo:

yarn dev

Definovanie značky projektu

Otvorte projekt v ľubovoľnom editore kódu a odstráňte ho aktíva a lib priečinok. Tiež sa uistite, že ste vymazali obsah app.css súbor a App.svelte súbor. Otvor main.js súbor a nahraďte obsah nasledujúcim:

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

Ďalej otvorte App.svelte súbor a v skript tag a vytvorte pole, ktoré bude obsahovať rôzne odkazy, ako je toto: