Découvrez comment démarrer avec une application Svelte élégante.

Les frameworks Web vont et viennent, mais l'un des plus prometteurs est Svelte. Svelte est une excellente alternative à React et, bien qu'il ait déjà une grande communauté, c'est définitivement un cadre à surveiller. Svelte facilite le style de vos applications, avec plusieurs approches disponibles.

Styling Svelte Applications

Chaque bibliothèque ou framework d'interface utilisateur nécessite une méthode pour styliser ses composants. La plupart des frameworks basés sur des composants prennent en charge la méthode traditionnelle de style des composants: importez simplement le fichier CSS et vous avez terminé. Svelte ne fait pas exception. Dans Svelte, il existe trois façons principales de styliser vos applications, chacune avec ses propres avantages et inconvénients.

Configuration de votre projet Svelte

Pour installer Svelte, vous pouvez utiliser le Outil de construction frontal ViteJS. Pour configurer les choses, assurez-vous que le

Exécution Node.js et le gestionnaire de paquets de nœuds (NPM) sont correctement installés sur votre ordinateur. Vous pouvez vérifier la disponibilité de Node.js et NPM en exécutant la commande suivante du terminal :

node -v

Après vous être assuré que Node est en cours d'exécution, ouvrez le terminal et exécutez ce qui suit :

npm create vite

Ou:

yarn create vite

Cela devrait étayer un nouveau projet Vite. Définissez le nom du projet sur ce que vous voulez, le framework doit être "Svelte" et la variante doit être JavaScript (mais vous pouvez utiliser TypeScript si vous êtes à l'aise avec cela). Maintenant, passez au répertoire du projet avec le CD et exécutez la commande suivante pour installer les dépendances nécessaires :

npm install

Ou:

yarn

Après avoir installé les dépendances, vous pouvez démarrer le serveur de développement en exécutant :

npm run dev

Ou:

yarn dev

Définir le balisage du projet

Ouvrez le projet dans n'importe quel éditeur de code de votre choix et supprimez le actifs et bibliothèque dossier. Assurez-vous également d'effacer le contenu du app.css dossier et le App.svelte déposer. Ouvrez le main.js fichier et remplacez le contenu par ce qui suit :

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

Ensuite, ouvrez le App.svelte fichier et dans le scénario tag et créez un tableau qui contiendra différents liens, comme ceci :