Scopri come iniziare con un'elegante app Svelte.

I framework Web vanno e vengono, ma uno dei più promettenti è Svelte. Svelte è un'ottima alternativa a React e, sebbene abbia già una vasta comunità, è sicuramente un framework a cui prestare attenzione. Svelte semplifica lo stile delle tue app, con diversi approcci disponibili.

Applicazioni eleganti per lo styling

Ogni libreria o framework dell'interfaccia utente richiede un metodo per modellare i suoi componenti. La maggior parte dei framework basati su componenti supporta il metodo tradizionale di styling dei componenti: basta importare il file CSS e il gioco è fatto. Svelte non fa eccezione. In Svelte, ci sono tre modi principali per modellare le tue applicazioni, ognuno con i suoi vantaggi e svantaggi.

Impostazione del tuo progetto Svelte

Per installare Svelte, puoi usare il file Strumento di creazione front-end ViteJS. Per impostare le cose, assicurati che il file Tempo di esecuzione di Node.js E il Node Package Manager (NPM) sono correttamente installati sul tuo computer. Puoi verificare la disponibilità di Node.js e NPM eseguendo questo terminale seguendo il comando:

instagram viewer 

node -v

Dopo esserti assicurato che Node sia in esecuzione, apri il terminale ed esegui quanto segue:

npm create vite

O:

yarn create vite

Questo dovrebbe sostenere un nuovo progetto Vite. Imposta il nome del progetto su quello che vuoi, il framework dovrebbe essere "Svelte" e la variante dovrebbe essere JavaScript (ma puoi usare TypeScript se ti senti a tuo agio). Ora passa alla directory del progetto con il file CD comando ed eseguire il seguente comando per installare le dipendenze necessarie:

npm install

O:

yarn

Dopo aver installato le dipendenze è possibile avviare il server di sviluppo eseguendo:

npm run dev

O:

yarn dev

Definizione del markup del progetto

Apri il progetto in qualsiasi editor di codice preferito ed elimina il file risorse E lib cartella. Inoltre, assicurati di cancellare il contenuto del file app.css file e il App.svelte file. Apri il principale.js file e sostituire il contenuto con quanto segue:

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

Quindi, apri il file App.svelte file e nel copione tagga e crea un array che conterrà diversi link, come questo: