Erste Schritte mit Nuxt.js unter Windows

  • Artikel

Eine Anleitung, die Sie beim Installieren des Nuxt.js-Webframeworks und beim Ausführen unter Windows unterstützt.

Nuxt.js ist ein Framework zum Erstellen von servergerenderten JavaScript-Apps auf der Grundlage von Vue.js, Node.js, Webpack und Babel.js. Es wurde von Next.js inspiriert. Es handelt sich im Grunde um einen Projekt-Codebaustein für Vue. Ebenso wie Next.js wurde es mit dem Augenmerk auf bewährte Methoden entwickelt und ermöglicht es Ihnen, „universelle“ Webanwendungen auf einfache und konsistente Weise zu erstellen, wozu kaum Konfiguration erforderlich ist. Diese „universellen“ servergerenderten Web-Apps werden auch manchmal als „isomorph“ bezeichnet, was bedeutet, dass der Code zwischen Client und Server geteilt wird.

Weitere Informationen zu Vue finden Sie auf der Seite Übersicht über Vue.

Voraussetzungen

In dieser Anleitung wird davon ausgegangen, dass Sie bereits die Schritte zum Einrichten der Node.js-Entwicklungsumgebung abgeschlossen haben. Dazu gehören:

Es wird empfohlen, beim Arbeiten mit NodeJS-Apps das Windows-Subsystem für Linux zu verwenden, um eine bessere Leistungsgeschwindigkeit, Kompatibilität von Systemaufrufen und eine Analyse bei der Ausführung von Linux-Servern oder Docker-Containern zu erzielen.

Wichtig

Wenn Sie eine Linux-Distribution mit WSL installieren, wird ein Verzeichnis zum Speichern von Dateien erstellt: \\wsl\Ubuntu-20.04 (Ersetzen Sie Ubuntu-20.04 durch die Linux-Distribution, die Sie verwenden). Um dieses Verzeichnis im Windows-Datei-Explorer zu öffnen, öffnen Sie die WSL-Befehlszeile, wählen Sie Ihr Basisverzeichnis mit cd ~ aus, und geben Sie dann den Befehl explorer.exe . ein. Achten Sie darauf, NodeJS nicht zu installieren oder Dateien zu speichern, mit denen Sie auf dem eingebundenen Laufwerk C arbeiten werden (/mnt/c/Users/yourname$). Dadurch werden die Installations- und Buildzeiten erheblich verlangsamt.

Installieren von Nuxt.js

Das Installieren von Nuxt.js beinhaltet die Beantwortung einer Reihe von Fragen zur Art des integrierten serverseitigen Frameworks, dem Benutzeroberflächenframework, dem Testframework, dem Modus, den Modulen und dem Linter, die Sie installieren möchten:

  1. Öffnen Sie eine WSL-Befehlszeile (d. h. Ubuntu).

  2. Erstellen Sie mit mkdir NuxtProjects einen neuen Projektordner, und wechseln Sie mit cd NuxtProjects in das Verzeichnis.

  3. Installieren Sie Nuxt.js, und erstellen Sie ein Projekt (und ersetzen Sie dabei 'my-nuxt-app' durch jeden beliebigen Namen für Ihre App): npm create nuxt-app my-nuxt-app.

  4. Das Installationsprogramm von Nuxt.js stellt Ihnen nun die folgenden Fragen:

    • Projektname: my-nuxtjs-app
    • Projektbeschreibung: Beschreibung meiner Nuxt.js-App.
    • Name des Autors: Ich verwende meinen GitHub-Alias.
    • Paket-Manager auswählen: Yarn oder Npm. Wir verwenden NPM für unsere Beispiele.
    • Benutzeroberflächenframework auswählen: Keins, Ant Design Vue, Bootstrap Vue usw. Wählen Sie für dieses Beispiel Vuetify. Die Vue-Community hat außerdem eine gute Zusammenfassung zum Vergleichen dieser UI-Frameworks erstellt, damit Sie die beste Lösung für Ihr Projekt auswählen können.
    • Benutzerdefinierte Serverframeworks auswählen: Keins, AdonisJs, Express, Fastify usw. Wählen Sie für dieses Beispiel Keins aus. Auf der Seite Dev.to finden Sie einen Vergleich der Serverframeworks 2019–2020.
    • Nuxt.js-Module auswählen (LEERTASTE, um Module auszuwählen oder EINGABETASTE, wenn Sie keine Module auswählen möchten): Axios (zum Vereinfachen von HTTP-Anforderungen) oder PWA-Unterstützung (zum Hinzufügen einer service-worker, manifest.json-Datei usw.). Fügen Sie für dieses Beispiel kein Modul hinzu.
    • Linting-Tools auswählen: ESLint, Prettier, gestaffelte Lint-Dateien. Wählen Sie ESLint aus (ein Tool, das Ihren Code analysiert und Sie bei möglichen Fehlern warnt).
    • Testframework auswählen: Keins, Jest, AVA. Wählen Sie Keins aus, da wir Testen im Rahmen dieses Schnellstarts nicht behandeln.
    • Renderingmodus auswählen: Universal (SSR) oder Single Page App (SPA). Wählen Sie für das Beispiel Universal (SSR) aus. Die Nuxt.js-Dokumentation weist auf einige der Unterschiede hin – für SSR ist ein laufender Node.js-Server erforderlich, um Ihre App zu rendern, während sich SPA für statisches Hosting eignet.
    • Auswahl von Entwicklungstools: jsconfig.json (für VS Code empfohlen, damit die Intellisense-Codevervollständigung funktioniert)

  5. Nachdem Ihr Projekt erstellt wurde, wechseln Sie mit cd my-nuxtjs-app in Ihr Nuxt.js-Projektverzeichnis, und geben Sie dann code . ein, um das Projekt in der VS Code WSL-Remote-Umgebung zu öffnen.

    WSL-Remote Extension

  6. Diese 3 Befehle müssen Sie kennen, sobald Nuxt.js installiert ist:

    • npm run dev zum Ausführen einer Entwicklungsinstanz mit Hot Reloading, Dateiüberwachung und erneuter Taskausführung.
    • npm run build zum Kompilieren Ihres Projekts.
    • npm start zum Starten Ihrer App im Produktionsmodus.

    Öffnen Sie das in VS Code integrierte WSL-Terminal (Ansicht > Terminal). Vergewissern Sie sich, dass der Terminalpfad auf das Projektverzeichnis verweist (d. h. ~/NuxtProjects/my-nuxt-app$). Versuchen Sie dann, mithilfe von npm run dev eine Entwicklungsinstanz Ihrer neuen Nuxt.js-App auszuführen.

  7. Der lokale Entwicklungsserver wird gestartet (und zeigt eine Art Statusanzeige für die Client- und Serverkompilierung an). Nachdem das Erstellen Ihres Projekts abgeschlossen ist, zeigt das Terminal „Erfolgreich kompiliert“ zusammen mit der für die Kompilierung benötigten Zeit an. Verweisen Sie im Webbrowser auf http://localhost:3000, um Ihrer neue Nuxt.js-App zu öffnen.

    Your Nuxt.js app running in localhost:3000

  8. Öffnen Sie die pages/index.vue-Datei im VS Code-Editor. Suchen Sie nach dem Seitentitel <v-card-title class="headline">Welcome to the Vuetify + Nuxt.js template</v-card-title>, und ändern Sie ihn in <v-card-title class="headline">This is my new Nuxt.js app!</v-card-title>. Speichern Sie bei immer noch in localhost:3000 geöffnetem Webbrowser Ihre Änderung, und beachten Sie, wie das Hot Reloading-Feature Ihre Änderung automatisch kompiliert und Ihre Änderung im Browser aktualisiert.

  9. Betrachten wir nun, wie Nuxt.js mit Fehlern umgeht. Entfernen Sie das Endtag </v-card-title>, sodass Ihr Titelcode nun so aussieht: <v-card-title class="headline">This is my new Nuxt.js app!. Speichern Sie diese Änderung, und beachten Sie, dass im Browser und in Ihrem Terminal ein Kompilierungsfehler angezeigt wird, der Sie informiert, dass ein Endtag für <v-card-title> fehlt, zusammen mit der Zeilennummer, in der Sie den Fehler in Ihrem Code finden. Ersetzen Sie das </v-card-title>-Endtag, und speichern Sie, dann wird die Seite erneut geladen.

Sie können den Debugger von VS Code mit Ihrer Nuxt.js-App verwenden, indem Sie die F5-Taste drücken oder in der Menüleiste zu Ansicht > Debuggen (STRG+UMSCHALT+D) und Ansicht > Debugging-Konsole (STRG+UMSCHALT+Y) wechseln. Wenn Sie das Zahnradsymbol im Debugfenster auswählen, wird eine Startkonfigurationsdatei (launch.json) erstellt, in der Sie Details zum Debugsetup speichern können. Weitere Informationen finden Sie unter Debuggen in VS Code.

VS Code debug window and launch.json config icon

Weitere Informationen zu Nuxt.js finden Sie im Nuxt.js-Leitfaden.