Un guide débutant pour Sveltekit

sveltekit: un guide pour les débutants pour créer des applications Web avec svelte

sveltekit, le cadre officiellement pris en charge construit sur Svelte, simplifie le développement frontal en incorporant des fonctionnalités essentielles telles que le routage, les dispositions et le rendu côté serveur. Ce tutoriel vous guide dans la création d'une application Web de base présentant des profils d'utilisateurs imaginaires, mettant en évidence les principales fonctionnalités de Sveltekit.

Concepts clés:

1. Sveltekit's Power: sveltekit améliore Svelte en ajoutant des fonctionnalités cruciales pour la création d'applications Web à part entière, ce qui entraîne une amélioration des performances et de l'expérience utilisateur.
2. Booss de performances: Compilation de build-temps, frappant, prétention et préfecturation Optimiser la vitesse d'application et le référencement.
3. Simplicité et flexibilité: Sveltekit rationalise la création d'applications Web, offrant des options de déploiement flexibles et une gestion efficace de contenu dynamique.

Pourquoi choisir svelte?

La popularité croissante de Svelte découle de ses composantes réutilisables et autonomes - similaires à réagir. Cependant, sa compilation Build-Time le distingue. Contrairement aux cadres avec Run-Time Interprétation, Svelte compile le code pendant le processus de construction, ce qui se traduit par des applications Web plus petites et plus rapides. D'autres cadres expédient plus de code au client, augmentant les temps de chargement. La simplicité de Svelte le rend adapté aux débutants; Les connaissances de base HTML, CSS et JavaScript sont suffisantes pour commencer à construire des composants.

Le besoin de sveltekit:

Bien que Svelte offre une excellente expérience de développement, Sveltekit traite des domaines clés pour une amélioration de l'expérience utilisateur et une flexibilité de déploiement. Il améliore l'approche traditionnelle du code de regroupement en un seul fichier javascript.

sveltekit améliore ceci par:

• Chargement de page initiale améliorée: Au lieu de servir un fichier HTML vide, Sveltekit fournit un HTML pré-rendu pour un chargement plus rapide et des avantages SEO via la prétention et le rendu côté serveur. Le routage côté client maintient la sensation d'application à une seule page.
• Fractionnement du code: L'application est divisée en morceaux JavaScript plus petits par route, chargeant uniquement le code nécessaire, améliorant les performances. La préfectitude optimise davantage cela.
• Déploiement flexible: Les adaptateurs simplifient le déploiement sur diverses plates-formes (hébergement de fichiers statique, fonctions sans serveur, serveurs de nœuds).
• facilité d'utilisation: sveltekit gère les processus de construction complexes, simplifiant le développement.

PRENDRE:

1. Prérequis: node.js (installer via NVM). Le code est disponible sur github.
2. Configuration du projet:

   npm init svelte@latest svelteKit-example-app

   Choisissez "Sveltekit Demo App," "Non" pour TypeScript, et "NON" pour des options supplémentaires.

3. Environnement de développement:

   cd svelteKit-example-app
   npm install
   npm run dev -- --open

4. Nettoyage: Supprimez les fichiers inutiles des dossiers src/lib et src/routes (comme détaillé dans l'article d'origine). Modifier src/routes/styles.css et src/routes/ page.svelte comme indiqué.

Disposés et routage côté client:

Le composant layout.svelte applique du code sur plusieurs pages. Modifiez-le pour inclure des balises de méta à l'échelle de l'application et une barre de navigation (comme indiqué dans l'original). Mettez à jour le composant /src/routes/about/ page.svelte.

pages statiques et prérenfication:

Pour le contenu statique, prenez des pages individuelles en ajoutant export const prerender = true; au fichier pertinent page.svelte (par exemple, /src/routes/about/ page.svelte). Passez à la adapter-node pour construire et exécuter un serveur de nœuds.

Points de terminaison:

Créez un point de terminaison API (/src/routes/api/ server.js) à l'aide de la bibliothèque faker pour générer des données utilisateur simulées. Cela simule une API backend.

Remplir des données avec load Fonction:

Utilisez la fonction load dans /src/routes/ page.js pour récupérer les données du point de terminaison /api et passer au composant page.svelte. L'hélice data dans page.svelte reçoit les données récupérées.

Paramètres dynamiques:

Créez une route dynamique (/src/routes/[lastName]/ page.server.js) pour afficher les détails de l'utilisateur. Accédez au paramètre lastName à partir de la propriété params dans la fonction load. Créez l'interface utilisateur dans /src/routes/[lastName]/ page.svelte.

Préfecture:

Ajouter data-sveltekit-preload-data="hover" aux balises <a></a> dans /src/routes/ page.svelte pour prédéfinir les données sur la survol, améliorant l'expérience utilisateur.

Conclusion:

sveltekit simplifie la création d'applications Web haute performance et conviviales. Sa flexibilité permet la personnalisation de fonctionnalités telles que le rendu côté serveur. La combinaison de Svelte et Sveltekit offre une expérience de développement puissante et efficace. Explorez les plaques de chaudières sveltekit pour les configurations de projet préconfigurées.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!