Erste Schritte mit Nuxt.js unter Windows

Ein Leitfaden zum Installieren des Nuxt.js-Webframeworks und zum Einstieg in Windows.

Nuxt.js ist ein Framework zum Erstellen server gerenderter JavaScript-Apps basierend auf Vue.js, Node.js, Webpack und Babel.js. Es wurde von Next.jsinspiriert . Es ist im Grunde eine Projektvorlage für Vue. Genau wie Next.js, wird es unter Beachtung von bewährten Methoden gestaltet und ermöglicht es Ihnen, "universelle" Web-Apps auf einfache, konsistente Weise zu erstellen und erfordert kaum Konfiguration. Diese "universellen" vom Server gerenderten Web-Apps werden manchmal auch als "isomorph" bezeichnet, was bedeutet, dass Code zwischen Client und Server gemeinsam genutzt wird.

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

Voraussetzungen

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

• Installieren Sie das Windows-Subsystem für Linux (WSL), einschließlich einer Linux-Distribution (z. B. Ubuntu), und stellen Sie sicher, dass es im WSL 2-Modus ausgeführt wird. Sie können dies überprüfen, indem Sie PowerShell öffnen und Folgendes eingeben: wsl -l -v
• Install Node.js auf WSL 2: Dies umfasst einen Versionsmanager, Paketmanager, Visual Studio Code und die Erweiterung für Remote-Entwicklung.

Wir empfehlen die Verwendung des Windows-Subsystems für Linux bei der Arbeit mit NodeJS-Apps für eine bessere Leistungsgeschwindigkeit, Systemaufrufkompatibilität und für Parodie beim Ausführen von Linux-Servern oder Docker-Containern.

Von Bedeutung

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 Startverzeichnis mithilfe von cd ~aus, und geben Sie dann den Befehl explorer.exe . ein. Achten Sie darauf, Node.js nicht zu installieren oder Dateien, an denen Sie arbeiten werden, auf dem bereitgestellten C-Laufwerk zu speichern (/mnt/c/Users/yourname$). Dadurch werden die Installations- und Bauzeiten deutlich verlangsamt.

Installiere Nuxt.js

Um Nuxt.jszu installieren, müssen Sie eine Reihe von Fragen beantworten, welche Art von integriertem serverseitigem Framework, UI-Framework, Testframework, Modus, Modulen und Linter Sie installieren möchten.

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

2. Erstellen Sie einen neuen Projektordner: mkdir NuxtProjects und geben Sie dieses Verzeichnis ein: cd NuxtProjects.

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

4. Der Nuxt.js Installer stellt Ihnen jetzt die folgenden Fragen:

   • Projektname: my-nuxtjs-app
   • Projektbeschreibung: Beschreibung meiner Nuxt.js-App.
   • Name des Autors: Ich verwende meinen GitHub-Alias.
   • Wählen Sie den Paket-Manager aus: Yarn oder Npm – wir verwenden NPM für unsere Beispiele.
   • Benutzeroberflächenframework auswählen: Keine, Ant Design Vue, Bootstrap Vue usw. Wählen wir Vuetify für dieses Beispiel aus, aber die Vue-Community hat eine schöne Zusammenfassung erstellt, die diese UI-Frameworks vergleicht, um Ihnen zu helfen, das Beste für Ihr Projekt auszuwählen.
   • Wählen Sie benutzerdefinierte Serverframeworks aus: None, AdonisJs, Express, Fastify usw. Lassen Sie uns "Keine" für dieses Beispiel auswählen, aber Sie können einen 2019-2020-Serverframeworkvergleich auf der Dev.to-Website finden.
   • Wählen Sie Nuxt.js Module aus (verwenden Sie die Leertaste, um Module auszuwählen, oder geben Sie einfach ein, wenn Sie keines wünschen): Axios (zur Vereinfachung von HTTP-Anforderungen) oder PWA-Unterstützung (zum Hinzufügen eines Service-Workers, manifest.json Datei usw.). Lassen Sie uns kein Modul für dieses Beispiel hinzufügen.
   • Wählen Sie Lintingtools aus: ESLint, Prettier, Lint mehrstufige Dateien. Lasst uns ESLint wählen (ein Tool zum Analysieren deines Codes und zum Warnen vor potenziellen Fehlern).
   • Wählen Sie ein Testframework aus: None, Jest, AVA. Wählen Sie Keine aus, da in dieser Schnellstartanleitung keine Tests behandelt werden.
   • Wählen Sie den Renderingmodus aus: Universal (SSR) oder Single Page App (SPA). Lassen Sie uns Universellen (SSR)- für unser Beispiel auswählen, aber die Nuxt.js-Dokumente weisen auf einige der Unterschiede hin - SSR erfordert einen Node.js Server, der ausgeführt wird, um Ihre App serverseitig zu rendern, während SPA (Single Page Application) für statisches Hosting genutzt wird.
   • Auswahl von Entwicklungstools: jsconfig.json (empfohlen für VS Code, damit IntelliSense-Codevervollständigung funktioniert)

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

   

6. Es gibt drei Befehle, die Sie wissen müssen, sobald Nuxt.js installiert ist:

   • npm run dev zum Ausführen einer Entwicklungsinstanz mit Hot-Reloading, Dateiüberwachung und erneutem Ausführen von Aufgaben.
   • npm run build zum Kompilieren Ihres Projekts.
   • npm start zum Starten der App im Produktionsmodus.

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

7. Der lokale Entwicklungsserver startet (und zeigt dabei coole Fortschrittsbalken für die Client- und Server-Compilierungen an). Sobald Ihr Projekt erfolgreich erstellt wurde, zeigt Ihr Terminal "Erfolgreich kompiliert" sowie die benötigte Zeit zum Kompilieren an. Verweisen Sie im Webbrowser auf http://localhost:3000, um Ihrer neue Nuxt.js-App zu öffnen.

   

8. Öffnen Sie die pages/index.vue-Datei im VS Code-Editor. Suchen Sie den 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>. Wenn Ihr Webbrowser noch auf localhost:3000 geöffnet ist, speichern Sie Ihre Änderung und beachten Sie, dass die Hot-Reloading-Funktion automatisch kompiliert und Ihre Änderung im Browser aktualisiert.

9. Sehen wir uns an, wie Nuxt.js Fehler behandelt. Entfernen Sie das abschließende </v-card-title>-Tag, damit Ihr Titelcode jetzt so aussieht: <v-card-title class="headline">This is my new Nuxt.js app!. Speichern Sie diese Änderung und beachten Sie, dass ein Kompilierungsfehler in Ihrem Browser und Ihrem Terminal angezeigt wird, die Sie darauf hinweisen, dass ein schließendes Tag für <v-card-title> fehlt, zusammen mit den Zeilennummern, in denen der Fehler im Code zu finden ist. Ersetzen Sie das schließende </v-card-title>-Tag, speichern Sie die Änderungen und die Seite wird neu geladen.

Sie können den Debugger von VS Code mit Ihrer Nuxt.js-App verwenden, indem Sie die F5-TASTE auswählen oder in der Menüleiste > Debug- anzeigen (STRG+UMSCHALT+D) und Ansicht > Debugkonsole (STRG+UMSCHALT+Y) aufrufen. Wenn Sie das Zahnradsymbol im Debugfenster auswählen, wird eine Startkonfigurationsdatei (launch.json) erstellt, damit Sie die Details zur Debug-Setup speichern können. Weitere Informationen finden Sie unter VS Code Debugging.

Weitere Informationen zu Nuxt.jsfinden Sie im Nuxt.js Leitfaden.