Ontdek hoe u aan de slag kunt met een stijlvolle Svelte-app.

Webframeworks komen en gaan, maar een van de meest veelbelovende is Svelte. Svelte is een geweldig alternatief voor React en hoewel het al een grote community heeft, is het zeker een raamwerk om op te letten. Svelte maakt het eenvoudig om uw apps te stylen, met verschillende beschikbare benaderingen.

Slanke applicaties stylen

Elke UI-bibliotheek of elk raamwerk vereist een methode om de componenten ervan te stylen. De meeste op componenten gebaseerde frameworks ondersteunen de traditionele methode voor het stylen van componenten: importeer gewoon het CSS-bestand en je bent klaar. Slank is geen uitzondering. In Svelte zijn er drie belangrijke manieren om uw applicaties te stylen, elk met zijn eigen voor- en nadelen.

Uw Svelte-project opzetten

Om Svelte te installeren, kunt u de ViteJS front-end build-tool. Zorg ervoor dat de Node.js-runtime En de Node Package Manager (NPM) correct op uw computer zijn geïnstalleerd. U kunt de beschikbaarheid van Node.js en NPM verifiëren door deze terminal met de volgende opdracht uit te voeren:

instagram viewer 

node -v

Nadat u ervoor heeft gezorgd dat Node actief is, opent u de terminal en voert u het volgende uit:

npm create vite

Of:

yarn create vite

Dit zou een nieuw Vite-project moeten ondersteunen. Stel de projectnaam in op wat je maar wilt, het framework moet "Svelte" zijn en de variant moet JavaScript zijn (maar je kunt TypeScript gebruiken als je daar vertrouwd mee bent). Ga nu naar de projectdirectory met de CD opdracht en voer de volgende opdracht uit om de benodigde afhankelijkheden te installeren:

npm install

Of:

yarn

Na het installeren van de afhankelijkheden kunt u de ontwikkelserver starten door het volgende uit te voeren:

npm run dev

Of:

yarn dev

De opmaak van het project definiëren

Open het project in een willekeurige code-editor en verwijder het activa En lib map. Zorg er ook voor dat u de inhoud van de app.css bestand en de App.slank bestand. Open de main.js bestand en vervang de inhoud door het volgende:

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

Open vervolgens de App.slank bestand en in de script tag en maak een array die verschillende links kan bevatten, zoals deze: