Partager via

Commencez avec Nuxt.js sur Windows

Guide pour vous aider à installer le framework web Nuxt.js et à être opérationnel sur Windows.

Nuxt.js est une infrastructure permettant de créer des applications JavaScript rendues par serveur basées sur Vue.js, Node.js, Webpack et Babel.js. Il a été inspiré par Next.js. Il s'agit essentiellement d'un modèle de projet pour Vue. Tout comme Next.js, il est conçu avec attention aux meilleures pratiques et vous permet de créer des applications web « universelles » de manière simple et cohérente, avec pratiquement aucune configuration. Ces applications web rendues par le serveur « universelle » sont également parfois appelées « isomorphes », ce qui signifie que le code est partagé entre le client et le serveur.

Pour en savoir plus sur Vue, consultez la page Vue d’ensemble.

Conditions préalables

Ce guide part du principe que vous avez déjà suivi les étapes de configuration de votre environnement de développement Node.js, y compris les étapes suivantes :

Nous vous recommandons d’utiliser le sous-système Windows pour Linux lors de l’utilisation d’applications NodeJS pour améliorer la vitesse de performances, la compatibilité des appels système et la parodie lors de l’exécution de serveurs Linux ou de conteneurs Docker.

Important

L’installation d’une distribution Linux avec WSL crée un répertoire pour le stockage des fichiers : \\wsl\Ubuntu-20.04 (remplacez Ubuntu-20.04 par la distribution Linux que vous utilisez). Pour ouvrir ce répertoire dans l’Explorateur de fichiers Windows, ouvrez votre ligne de commande WSL, sélectionnez votre répertoire de base en utilisant cd ~, puis entrez la commande explorer.exe . Veillez à ne pas installer NodeJS ou stocker les fichiers sur lesquels vous travaillerez sur le lecteur C monté (/mnt/c/Users/yourname$). Cela ralentit considérablement vos temps d’installation et de génération.

Installer Nuxt.js

Pour installer Nuxt.js, vous devez répondre à une série de questions sur le type d’infrastructure côté serveur intégré, l’infrastructure d’interface utilisateur, le framework de test, le mode, les modules et linter que vous souhaitez installer :

  1. Ouvrez une ligne de commande WSL (par exemple. Ubuntu).

  2. Créez un dossier pour le nouveau projet : mkdir NuxtProjects, puis accédez à ce répertoire : cd NuxtProjects.

  3. Installez Nuxt.js et créez un projet (en remplaçant « my-nuxt-app » par ce que vous souhaitez appeler votre application) : npm create nuxt-app my-nuxt-app

  4. Le programme d’installation Nuxt.js vous posera maintenant les questions suivantes :

    • Nom du projet : my-nuxtjs-app
    • Description du projet : Description de mon application Nuxt.js.
    • Nom de l’auteur : j’utilise mon alias GitHub.
    • Choisissez le gestionnaire de package : Yarn ou Npm : nous utilisons NPM pour nos exemples.
    • Choisissez l’infrastructure de l’interface utilisateur : None, Ant Design Vue, Bootstrap Vue, etc. Nous allons choisir Vuetify pour cet exemple, mais la Communauté Vue a créé un résumé agréable comparant ces frameworks d’interface utilisateur pour vous aider à choisir le meilleur ajustement pour votre projet.
    • Choisissez des frameworks de serveur personnalisés : None, AdonisJs, Express, Fastify, etc. Nous allons choisir Aucun pour cet exemple, mais vous trouverez une comparaison 2019-2020 server framework sur le site Dev.to.
    • Choisissez des modules Nuxt.js (utilisez la barre d'espace pour sélectionner des modules ou appuyez simplement sur Entrée si vous n'en souhaitez pas) : Axios (pour simplifier les requêtes HTTP) ou support PWA (pour ajouter un service worker, un fichier manifest.json, etc.). N’ajoutons pas de module pour cet exemple.
    • Choisissez les outils de linting : ESLint, Prettier, Fichiers intermédiaires Lint. Nous allons choisir ESLint (outil permettant d’analyser votre code et de vous avertir des erreurs potentielles).
    • Choisissez une infrastructure de test : None, Jest, AVA. Nous allons choisir Aucun , car nous n’aborderons pas les tests dans ce guide de démarrage rapide.
    • Choisissez le mode de rendu : universel (SSR) ou application monopage (SPA). Nous allons choisir universel (SSR) pour notre exemple, mais les documents Nuxt.js pointent certaines des différences - SSR nécessitant un serveur Node.js s’exécutant pour rendre votre application et spa sur serveur pour l’hébergement statique.
    • Choisir des outils de développement : jsconfig.json (recommandé pour VS Code afin que la saisie semi-automatique du code IntelliSense fonctionne)

  5. Une fois votre projet créé, cd my-nuxtjs-app pour entrer dans votre répertoire de projet Nuxt.js, puis entrez code . pour ouvrir le projet dans l'environnement VS Code WSL-Remote.

    WSL-Remote extension

  6. Vous devez connaître 3 commandes une fois Nuxt.js installée :

    • npm run dev pour l’exécution d’une instance de développement avec rechargement à chaud, surveillance des fichiers et réexécutation des tâches.
    • npm run build afin de compiler votre projet.
    • npm start pour démarrer votre application en mode de production.

    Ouvrez le terminal WSL intégré à VS Code (Afficher > Terminal). Assurez-vous que le chemin du terminal pointe vers le répertoire de votre projet (par ex. ~/NuxtProjects/my-nuxt-app$). Essayez ensuite d’exécuter une instance de développement de votre nouvelle application Nuxt.js à l’aide de : npm run dev

  7. Le serveur de développement local démarre (affichant des barres de progression sympas pour les compilations client et serveur). Une fois votre projet généré, votre terminal affiche « Compilé avec succès », ainsi que le temps nécessaire à la compilation. Pointez votre navigateur Web vers http://localhost:3000 pour ouvrir votre nouvelle application Nuxt.js.

    Votre application Nuxt.js s’exécutant dans localhost :3000

  8. Ouvrez le fichier pages/index.vue dans votre éditeur VS Code. Recherchez le titre <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title> de la page et remplacez-le <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>par . Lorsque votre navigateur web est toujours ouvert à localhost :3000, enregistrez votre modification et notez que la fonctionnalité de rechargement à chaud compile et met à jour automatiquement votre modification dans le navigateur.

  9. Voyons comment Nuxt.js gère les erreurs. Supprimez la </v-card-title> balise de fermeture pour que votre code de titre ressemble maintenant à ceci : <v-card-title class="headline">This is my new Nuxt.js app!. Enregistrez cette modification et notez qu’une erreur de compilation s’affiche dans votre navigateur et dans votre terminal, en indiquant qu’une balise de fermeture est <v-card-title> manquante, ainsi que les numéros de ligne où l’erreur se trouve dans votre code. Remplacez la </v-card-title> balise fermante, enregistrez et la page se recharge.

Vous pouvez utiliser le débogueur de VS Code avec votre application Nuxt.js en sélectionnant la touche F5 ou en accédant à Afficher > Déboguer (Ctrl+Maj+D) et Afficher > Console de débogage (Ctrl+Maj+Y) dans la barre de menus. Si vous sélectionnez l’icône d’engrenage dans la fenêtre de débogage, un fichier de configuration de lancement (launch.json) est créé pour vous permettre d’enregistrer les détails de configuration du débogage. Pour plus d'informations, consultez Débogage VS Code .

fenêtre de débogage de VS Code et icône de configuration launch.json

Pour en savoir plus sur Nuxt.js, consultez le guideNuxt.js.