Premiers pas avec Nuxt et Nuxt CLI

Découvrez comment démarrer avec Nuxt et la CLI Nuxt : créez un nouveau projet Nuxt, comprenez la structure des répertoires et utilisez la CLI Nuxt pour améliorer notre flux de travail de développement.

Nuxt.js est un cadre progressif basé sur Voir.js conçu pour créer des applications Web puissantes et modernes avec une configuration minimale. Dans cet article, nous explorerons comment démarrer avec Nuxt, les avantages qu’il apporte et comment utiliser efficacement l’interface de ligne de commande (CLI) Nuxt pour améliorer votre flux de travail de développement.

Nuxt

Nuxt.js a été créé pour fournir un cadre intuitif et puissant permettant aux développeurs de créer des applications Vue.js. Il intègre des solutions pour rendu côté serveur, génération de site statique et créer des applications d’une seule page, le tout dans une architecture unifiée. Cela fait de Nuxt un choix polyvalent pour des projets allant des petits sites Web aux applications d’entreprise à grande échelle.

La mise en place d’un projet Nuxt est simple, grâce à son puissant CLI. La première étape consiste à s’assurer que Node.js est installé. Une fois Node.js installé, un nouveau projet Nuxt peut être créé à l’aide de la commande suivante :

npx nuxi@latest init my-nuxt-project

La commande ci-dessus créera un nouveau répertoire appelé my-nuxt-project contenant la structure de base d’un projet Nuxt.

Structure du répertoire

Lorsqu’un projet Nuxt de base est créé, il génère une structure de répertoires spécifique. Voici un résumé de certains des principaux fichiers et répertoires souvent trouvés dans un projet Nuxt :

• .nuxt: Un répertoire généré dans lequel Nuxt.js conserve sa build et ses fichiers générés. En général, nous ne modifions pas les fichiers directement ici et ce répertoire doit être ajouté au .gitignore déposer.
• .sortir: Utilisé par Nuxt.js lors de la génération d’une version statique du site Web. Il contient les fichiers de sortie prêts à être déployés et doit également être ajouté au .gitignore déposer.
• actifs: Contient des actifs non compilés tels que des styles, des images ou des polices que l’outil de construction du projet traitera.
• Composants: Composants Vue pouvant être utilisés dans les pages de l’application.
• composables: fonctions de composition réutilisables qui peuvent être utilisées dans les composants Vue.
• nœud_modules: Contient toutes les dépendances npm de l’application.
• pages: Inclut les fichiers Vue qui sont transformés en routes d’application.
• publique: Répertoire des fichiers statiques qui ne sont pas traités par l’outil de build et sont directement accessibles sur le chemin racine du serveur.
• serveur: Cela peut contenir du code côté serveur, tel qu’un middleware serveur ou des points de terminaison d’API, ce qui est utile si vous utilisez Nuxt pour le rendu côté serveur ou la génération statique avec une logique côté serveur.
• app.vue: Le composant principal de l’application où les composants de page de l’application sont chargés.
• nuxt.config.ts: Le fichier de configuration principal du projet Nuxt.js.
• package.json: Répertorie toutes les dépendances npm et définit les scripts npm pour le projet.

Pour une liste complète des répertoires et de leurs objectifs spécifiques, assurez-vous de consulter la documentation Nuxt sur Structure du répertoire.

Démarrage du serveur

Après avoir configuré le projet Nuxt, l’étape suivante consiste à exécuter le serveur de développement et à commencer à créer l’application. Nous pouvons démarrer le serveur en accédant au répertoire de notre projet nouvellement créé dans le terminal et en exécutant la commande suivante (en supposant que nous ayons décidé d’utiliser yarn en tant que gestionnaire de packages du projet) :

yarn dev --open

La commande ci-dessus compilera l’application et démarrera un serveur de développement local qui s’exécutera par défaut sur http://localhost:3000. Alternativement, nous pouvons utiliser la commande CLI développeur nuxi pour démarrer également le serveur de développement.

Le serveur de développement est livré avec un remplacement de module à chaud, ce qui signifie que les modifications que nous apportons à vos fichiers Vue seront automatiquement mises à jour dans le navigateur sans avoir besoin de recharger une page complète.

Flux de travail de développement

L’architecture de Nuxt est construite autour du concept de «Convention sur la configuration » et il s’attend à ce que les fichiers de code soient placés dans des répertoires spécifiques. Il utilise cette convention pour automatiser une grande partie de la configuration pour nous.

Par exemple, chaque .vue fichier placé à l’intérieur du pages/ Le répertoire deviendra automatiquement une route dans une application. Le routage est créé en fonction des noms de fichiers et de la hiérarchie au sein du pages/ annuaire. Par exemple, pages/index.vue sera la page d’accueil, et pages/about.vue sera accessible sous /about.

De même, le components/ Le répertoire est l’endroit où nous pouvons placer les composants Vue réutilisables. Ces composants peuvent être automatiquement importés dans nos composants de page sans avoir besoin de les enregistrer manuellement, grâce à Nuxt. importation automatique fonctionnalité.

Utilisation de la CLI Nuxt

L’utilisation de la CLI Nuxt dans un projet Nuxt peut rationaliser le processus de développement, rendant plus facile et plus efficace la gestion des différents aspects d’une application. La CLI propose diverses commandes répondant aux besoins de développement spécifiques, de la création du projet au déploiement.

Initialisation des projets

Comme démontré précédemment, le initialisation de Nuxi La commande initialise un nouveau projet Nuxt, en configurant un échafaudage qui inclut tous les fichiers de configuration et structures de répertoires nécessaires.

Exécution du serveur de développement

Le développeur nuxi la commande démarre un serveur de développement local sur http://localhost:3000 par défaut. Ce serveur propose un remplacement de module à chaud, vous permettant de voir les modifications en temps réel sans avoir besoin de recharger manuellement le navigateur.

Création et génération de l’application

On peut utiliser construction nuxi pour compiler et regrouper notre application Nuxt pendant la phase de développement. Cela peut être utile pour le débogage et pour vérifier la sortie de la build avant la production.

Nous pouvons exécuter nuxi générer pour créer une version statique d’une application, qui compile l’application et restitue chaque itinéraire sous forme de fichier HTML statique. C’est idéal pour les environnements d’hébergement statiques.

Analyser et optimiser la construction

Nuxt CLI propose des options intégrées pour analyser la build à l’aide analyse nuxiqui fournit une représentation visuelle du contenu de chaque bundle, vous aidant à comprendre et à optimiser la taille et les temps de chargement de votre application.

Déploiement de l’application

Après avoir construit une application, nous pouvons déployer les fichiers statiques générés par nuxi générer ou l’application rendue par le serveur à partir de construction nuxi à n’importe quel service d’hébergement Web ou serveur prenant en charge Node.js.

Pour une liste complète des commandes Nuxt CLI, assurez-vous de vérifier la Section API/Commandes de la documentation Nuxt.

L’utilisation de la CLI Nuxt permet efficacement aux développeurs de se concentrer sur la création de leurs applications Vue.js tout en minimisant les frais associés à la configuration et à la configuration de l’environnement. Cela fait de Nuxt.js et de sa CLI correspondante un choix attrayant pour les nouveaux développeurs et les professionnels chevronnés cherchant à rationaliser leurs flux de travail de développement Web.

Conclure

Dans cet article, nous avons exploré les bases pour démarrer avec Nuxt et la CLI Nuxt. Nous avons appris à créer un nouveau projet Nuxt, à comprendre la structure des répertoires et à utiliser la CLI Nuxt pour améliorer notre flux de travail de développement.

En utilisant Nuxt et la CLI Nuxt, les développeurs peuvent se concentrer sur la création d’applications Web puissantes et modernes avec une installation et une configuration minimales. Que vous soyez un développeur débutant ou expérimenté, Nuxt offre les outils nécessaires pour créer des applications Web meilleures, plus rapides et plus fiables, ce qui en fait un ajout inestimable à votre boîte à outils de développement.

Pour plus d’informations, assurez-vous de consulter le site officiel Documentation Nuxt!