Premiers pas avec Nuxt.js

Nuxt.js est un cadre universel créé dans le seul but de créer des applications Vue.js de classe mondiale qui peuvent évoluer. Qu'est-ce qui rend Nuxt spécial, comment l'installer et comment l'utiliser dans votre prochain projet?

Nuxt.js est un framework universel construit sur Vue.js Vue Router [Vue d'ensemble] Vuex Vue Server Renderer et v ue – m eta et d'autres connecteurs ensemble riche d'outils pouvant créer tout type d'application Web.

Il est appelé un cadre universel car il a été conçu pour être suffisamment flexible pour pouvoir être utilisé dans n'importe quel projet, des sites statiques aux applications à une seule page.

l'accent est mis sur l'aspect de développement de l'interface utilisateur tout en essayant d'éliminer la distribution client / serveur.

Qu'est-ce qui rend Nuxt.js spécial?

Installation de Nuxt.js

L’équipe de Nuxt.js a créé un modèle de démarrage de projet pour Vue CLI 3, qui, dit-on, est le modèle de projet de démarrage sans être dérangé par un environnement de développement complexe vous permettant d’utiliser Construit avec Vue CLI. démarrer un projet Nuxt.js.

Le modèle est construit pour le CLI Vue, vous devez donc l'installer en premier si vous ne l'avez pas déjà installé.

Pour installer le CLI Vue, démarrez votre terminal et exécutez ce qui suit:

Ensuite, installez le modèle et utilisez-le pour générer un nouveau projet:

Une fois l'installation terminée et le projet créé, placez le répertoire dans le nouveau dossier de projet créé et installez-le. toutes les dépendances.

Enfin, lorsque cela est fait, nous lançons le projet avec npm run dev. L'application doit fonctionner avec succès à http: // localhost: 3000 .

Structure des dossiers

Si nous examinons notre nouveau projet, nous remarquons que des dossiers / fichiers ont déjà été créés. ils sont destinés à nous fournir un excellent point de départ pour nos applications.

Explorons rapidement chaque dossier et son contenu.

Actifs : Tous nos fichiers de ressources, tels que les images, la feuille de style et tout autre fichier, sont ici.

Composants: Contient les composants réutilisables qui seraient utilisés dans notre application (boutons, entrées, barres latérales, etc.).

Ce dossier hébergera les présentations de notre application qui seront réutilisées dans notre application. Note: Ce dossier ne peut et ne doit pas être renommé.

Middleware : Comme son nom l’indique, il contient le middleware de notre application. Un middleware est une fonction à exécuter avant le rendu d'un composant (par exemple, vérifier si un utilisateur est connecté avant d'afficher une page).

Pages: Ce dossier contient les vues et les itinéraires de notre application depuis Nuxt. js lit tous les fichiers de ce dossier et crée automatiquement nos routes d’application basées sur ces fichiers de vue.

Ce dossier ne peut pas non plus être renommé.

Plugins: Il contient tous nos plugins JavaScript qui doit être exécuté avant que notre racine Vue.js application soit instanciée.

Statique: Il est très similaire au dossier Assets, seul le dossier Assets est destiné aux fichiers devant être analysés par Webpack (c'est-à-dire nécessitant une sorte de compilation [SASS → CSS] ou de traitement), tandis que le dossier Static concerne les fichiers ou les éléments déjà traités ou en cours de finalisation.

Ajout d'actifs

Grâce à webpack, vue-loader, chargeur de fichiers et url-loader, Nuxt.js a simplifié la façon dont nous établissons des liens avec des actifs dans notre dossier de projet.

Pour créer un lien vers des fichiers qui se trouvent dans Dans le dossier Actifs, vous devez ajouter ~ / avant le nom du dossier Actifs, comme suit:

Mais si vous souhaitez créer un lien vers des fichiers situés dans le dossier Static, vous devrez simplement les lier comme si ces fichiers existaient dans le répertoire racine à l'aide de /.

Vous vous demandez peut-être pourquoi.

Les fichiers du dossier Assets requièrent le caractère spécial ~ principalement parce que par défaut, le plug-in Vue-loader dans Webpack résolvait les fichiers en tant que dépendances de modules et que ~ n'était qu'un alias indiquant à Vue-loader l'emplacement du dossier Assets. .

L’un des aspects intéressants de l’analyse d’actifs avec Vue-loader est qu’il facilite également la gestion du contrôle de la version des actifs pour une meilleure mise en cache, tandis que, s’ils ont une taille inférieure à 1 Ko, ils obtiennent Insérez des données en base 64 afin de réduire le nombre de requêtes HTTP pour ces fichiers plus petits.

Le dossier Static, en revanche, est automatiquement servi par Nuxt et il est déplacé à la racine du projet lors de la génération pour la production.

Composants

Les composants sont des instances Vue réutilisables portant un nom. Lorsque nous créons une page dans Nuxt, nous créons un composant, et chacun de ces composants a des fonctions qui le font fonctionner.

Nuxt.js introduit des fonctions, des attributs ou des méthodes supplémentaires, selon le cas, pour fournir davantage de fonctionnalités adaptées au développement de ces composants.

Quels sont ces attributs supplémentaires?

asyncData: Le hook asyncData vous permet de récupérer les données nécessaires au rendu d'une page sur le serveur juste avant son affichage sur le client.

Cela permet à votre page d'avoir toujours du contenu lorsque, par exemple, l'indexeur Google tente d'indexer votre page. Le crochet asyncData lui fournit des données.

fetch : Cette méthode gère les interactions avec le magasin. Cela vous donne la liberté de fournir des données au magasin Vuex avant même que le composant soit rendu dans la vue.

Ceci est parfait pour lorsqu'un autre composant a besoin de données provenant d'un autre composant, par exemple, avant que ce composant ne soit restitué.

chargement : Nuxt.js fournit un état de chargement dans l'application, et cette méthode vous permet d'interrompre l'état de chargement et de le contrôler manuellement.

layout : Ceci définit quelle disposition du répertoire de mises en forme doit être utilisée dans un composant.

transition : Permet de définir des transitions spécifiques pour le composant de page.

scrollToTop : Cette méthode vous permet de spécifier si vous souhaitez que la page défile automatiquement vers le haut avant le rendu de la page.

validate : Le crochet de validation vous permet de créer une méthode de validation qui vérifie le type de paramètre transmis dans un slug de routes dynamiques.

Ceci est utile lorsque vous voulez vous assurer que le numéro est passé dans le slug et non dans une chaîne, ou inversement.

middleware: Permet de spécifier le middleware de ce composant.

Routing

Le routage dans Nuxt.js est très intéressant. Il examine la structure de fichier dans votre dossier Pages et décide automatiquement des configurations d'itinéraire basées sur cette structure.

Tout ce que vous avez à faire est de structurer vos dossiers Pages comme vous le souhaitez, et Nuxt.js fait toute la magie sous le capot.

Il utilise le plugin Vue Router pour générer des itinéraires; par conséquent, la configuration générée est la même que celle que vous connaissez déjà si vous utilisez Vue Router dans vos applications Vue.js.

Toutefois, il existe une petite différence: au lieu d'utiliser comme vous le feriez normalement, vous utiliseriez .

Nuxt.js gérait également une erreur de demande de page 404, comme lorsqu'une page ou une route n'est pas disponible et que l'utilisateur y accède. Nuxt a une page 404 par défaut, mais vous offre également le moyen de personnaliser ou d'utiliser votre propre conception de page 404.

Passons maintenant à quelques exemples, car je suis sûr que vous vous demandez déjà comment vous allez gérer des tâches telles que les itinéraires dynamiques. , etc.

Routes de base

Une structure de dossier de base serait celle qui contient un dossier, puis d’autres fichiers de vue, comme ci-dessous:

Nuxt générera le texte ci-dessous pour la structure de base des dossiers ci-dessus: