Katso, kuinka pääset alkuun tyylikkään Svelte-sovelluksen kanssa.

Verkkokehykset tulevat ja menevät, mutta yksi lupaavimmista on Svelte. Svelte on loistava vaihtoehto Reactille, ja vaikka sillä on jo suuri yhteisö, se on ehdottomasti kehys, jota kannattaa varoa. Svelte helpottaa sovellusten muotoilua useiden eri lähestymistapojen ansiosta.

Svelte-sovellusten muotoilu

Jokainen käyttöliittymäkirjasto tai -kehys vaatii menetelmän komponenttiensa tyyliin. Useimmat komponenttipohjaiset puitteet tukevat perinteistä komponenttien muotoilumenetelmää: tuo vain CSS-tiedosto ja olet valmis. Svelte ei ole poikkeus. Sveltessä on kolme päätapaa muotoilla sovelluksia, joista jokaisella on omat etunsa ja haittansa.

Svelte-projektisi perustaminen

Svelten asentamiseen voit käyttää ViteJS-käyttöliittymän rakennustyökalu. Asettaaksesi asiat varmista, että Node.js-ajoaika ja Node Package Manager (NPM) on asennettu oikein tietokoneellesi. Voit tarkistaa Node.js: n ja NPM: n saatavuuden suorittamalla tämän päätteen seuraavan komennon:

instagram viewer 
node -v

Kun olet varmistanut, että Node on käynnissä, avaa pääte ja suorita seuraava:

npm create vite

Tai:

yarn create vite

Tämän pitäisi rakentaa uusi Vite-projekti. Aseta projektin nimi haluamaksesi, kehyksen tulee olla "Svelte" ja muunnelman tulee olla JavaScript (mutta voit käyttää TypeScriptiä, jos olet tyytyväinen siihen). Siirry nyt projektihakemistoon painikkeella CD komento ja suorita seuraava komento asentaaksesi tarvittavat riippuvuudet:

npm install

Tai:

yarn

Kun olet asentanut riippuvuudet, voit käynnistää kehityspalvelimen suorittamalla:

npm run dev

Tai:

yarn dev

Projektin merkinnän määrittäminen

Avaa projekti missä tahansa koodieditorissa ja poista omaisuutta ja lib kansio. Varmista myös, että tyhjennät sisällön app.css tiedosto ja App.svelte tiedosto. Avaa main.js tiedosto ja korvaa sisältö seuraavalla:

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

Avaa seuraavaksi App.svelte tiedostossa ja käsikirjoitus tagi ja luo taulukko, joka sisältää erilaisia ​​linkkejä, kuten tämä: