Kako oblikovati Svelte aplikacije

Spletna ogrodja prihajajo in gredo, a eden najbolj obetavnih je Svelte. Svelte je odlična alternativa Reactu in čeprav že ima veliko skupnost, je vsekakor okvir, na katerega morate biti pozorni. Svelte olajša oblikovanje vaših aplikacij z več pristopi.

Styling Svelte Aplikacije

Vsaka knjižnica uporabniškega vmesnika ali ogrodje zahteva metodo za oblikovanje svojih komponent. Večina ogrodij, ki temeljijo na komponentah, podpira tradicionalno metodo oblikovanja komponent: preprosto uvozite datoteko CSS in končali ste. Svelte ni izjema. V Svelteju obstajajo trije glavni načini oblikovanja vaših aplikacij, od katerih ima vsak svoje prednosti in slabosti.

Nastavitev vašega projekta Svelte

Če želite namestiti Svelte, lahko uporabite Orodje za gradnjo sprednjega dela ViteJS. Za nastavitev stvari zagotovite, da je Izvajalno okolje Node.js in upravljalnik paketov vozlišč (NPM) so pravilno nameščeni na vašem računalniku. Razpoložljivost Node.js in NPM lahko preverite tako, da na tem terminalu zaženete naslednji ukaz:

node -v

Ko se prepričate, da Node deluje, odprite terminal in zaženite naslednje:

npm create vite

ali:

yarn create vite

To bi moralo postaviti oder za nov projekt Vite. Nastavite ime projekta na poljubno, ogrodje naj bo "Svelte" in različica naj bo JavaScript (vendar lahko uporabite TypeScript, če vam to ustreza). Zdaj preklopite v imenik projekta z cd in zaženite naslednji ukaz za namestitev potrebnih odvisnosti:

npm install

ali:

yarn

Po namestitvi odvisnosti lahko zaženete razvojni strežnik tako, da zaženete:

npm run dev

ali:

yarn dev

Definiranje oznake projekta

Odprite projekt v poljubnem urejevalniku kode in izbrišite sredstev in lib mapo. Prepričajte se tudi, da ste počistili vsebino app.css datoteko in App.svelte mapa. Odprite main.js datoteko in zamenjajte vsebino z naslednjim:

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

Nato odprite App.svelte datoteko in v scenarij in ustvarite matriko, ki bo vsebovala različne povezave, kot je ta: