Aflați cum să începeți cu o aplicație elegantă Svelte.

Cadrele web vin și pleacă, dar unul dintre cele mai promițătoare este Svelte. Svelte este o alternativă excelentă la React și, deși are deja o comunitate mare, este cu siguranță un cadru de care trebuie să fii atent. Svelte facilitează stilarea aplicațiilor, cu mai multe abordări disponibile.

Styling Svelte Applications

Fiecare bibliotecă sau cadru UI necesită o metodă pentru a-și stila componentele. Majoritatea cadrelor bazate pe componente acceptă metoda tradițională de stilare a componentelor: pur și simplu importați fișierul CSS și ați terminat. Svelte nu face excepție. În Svelte, există trei moduri principale de a vă stila aplicațiile, fiecare cu propriile avantaje și dezavantaje.

Configurați-vă proiectul Svelte

Pentru a instala Svelte, puteți utiliza Instrument de construcție front-end ViteJS. Pentru a configura lucrurile, asigurați-vă că Runtime Node.js și Managerul de pachete Node (NPM) sunt instalate corect pe computerul dvs. Puteți verifica disponibilitatea Node.js și NPM rulând acest terminal următoarea comandă:

instagram viewer 
node -v

După ce vă asigurați că Node rulează, deschideți terminalul și rulați următoarele:

npm create vite

Sau:

yarn create vite

Acest lucru ar trebui să schele un nou proiect Vite. Setați numele proiectului la orice doriți, cadrul ar trebui să fie „Svelte”, iar varianta să fie JavaScript (dar puteți utiliza TypeScript dacă vă simțiți confortabil). Acum, comutați la directorul de proiect cu CD comanda și rulați următoarea comandă pentru a instala dependențele necesare:

npm install

Sau:

yarn

După instalarea dependențelor, puteți porni serverul de dezvoltare rulând:

npm run dev

Sau:

yarn dev

Definirea marcajului proiectului

Deschideți proiectul în orice editor de cod dorit și ștergeți active și lib pliant. De asemenea, asigurați-vă că ștergeți conținutul app.css dosarul și App.svelte fişier. Deschide main.js fișier și înlocuiți conținutul cu următorul:

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

Apoi, deschideți App.svelte dosar și în scenariu etichetați și creați o matrice care va conține link-uri diferite, ca acesta: