Saznajte kako započeti s elegantnom aplikacijom Svelte.

Web okviri dolaze i prolaze, ali jedan od onih koji najviše obećavaju je Svelte. Svelte je izvrsna alternativa Reactu i, iako već ima veliku zajednicu, definitivno je okvir na koji treba paziti. Svelte olakšava stiliziranje vaših aplikacija uz nekoliko dostupnih pristupa.

Styling Svelte aplikacije

Svaka UI biblioteka ili okvir zahtijeva metodu za stiliziranje svojih komponenti. Većina okvira temeljenih na komponentama podržava tradicionalnu metodu oblikovanja komponenti: jednostavno uvezite CSS datoteku i gotovi ste. Svelte nije iznimka. U Svelteu postoje tri glavna načina stiliziranja vaših aplikacija, svaki sa svojim prednostima i nedostacima.

Postavljanje vašeg Svelte projekta

Da biste instalirali Svelte, možete koristiti ViteJS front-end alat za izgradnju. Da biste postavili stvari, osigurajte da je Node.js vrijeme izvođenja i upravitelj paketa čvorova (NPM) su ispravno instalirani na vašem računalu. Možete provjeriti dostupnost Node.js i NPM pokretanjem sljedeće naredbe ovog terminala:

node -v

Nakon što provjerite radi li Node, otvorite terminal i pokrenite sljedeće:

npm create vite

Ili:

yarn create vite

Ovo bi trebalo postaviti skele za novi Vite projekt. Postavite naziv projekta na ono što želite, okvir bi trebao biti "Svelte", a varijanta bi trebala biti JavaScript (ali možete koristiti TypeScript ako vam to odgovara). Sada se prebacite na direktorij projekta s CD naredbu i pokrenite sljedeću naredbu za instaliranje potrebnih ovisnosti:

npm install

Ili:

yarn

Nakon instaliranja ovisnosti možete pokrenuti razvojni poslužitelj pokretanjem:

npm run dev

Ili:

yarn dev

Definiranje markupa projekta

Otvorite projekt u bilo kojem uređivaču koda po izboru i izbrišite imovina i lib mapa. Također, provjerite jeste li izbrisali sadržaj app.css datoteka i App.svelte datoteka. Otvori glavni.js datoteku i zamijenite sadržaj sljedećim:

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

Zatim otvorite App.svelte datoteku i u skripta oznaku i stvorite niz koji će sadržavati različite veze, ovako: