Zum Inhalt springen

Tutorial: NUXT.JS Application zur Darstellung aller Star Wars Filme – Teil #1

NUXT.JS

Content Area

Categories

Tutorial: NUXT.JS Application zur Darstellung aller Star Wars Filme – Teil #1

Übersicht

Repository

https://github.com/Thomas-A-Reinert/nuxtjs-starwars-tutorial

Was lerne ich in diesem Tutorial?

  • Installation Node.js und NPM
  • Die Installation der Vue CLI
  • Die Installation des NUXT.JS Framework
  • Die Initialisierung und Konfiguration unseres NUXT.JS Projekts
  • Hintergründe zu den Installationsoptionen
  • Die Initialisierung der GIT Versionsverwaltung
  • Überblick über die NUXT.JS Projektstruktur

Voraussetzungen

  • Grundlegende Kenntnisse in
    • HTML
    • CSS bzw. SCSS
    • Javascript ES6 / ECMAScript 2015
    • Eingaben in der Kommandozeile („Konsole“)
  • Ein Code-Editor (Empfehlung: Visual Studio Code)

Quellen

Schwierigkeitsgrad

Einfach

Update vom 27.09.2019:

  • Kleine Text-Korrekturen
  • Reihenfolge und Bezeichnung der Nuxt-Installationsoptionen an aktuelle Reihenfolge und Bezeichnungen angepasst.

Installation der notwendigen Applications

Installation und Test Node.js und NPM („Node Package Manager“)

Voraussetzung für die Erstellung von Anwendungen für Vue.js ist die Installation von Node.js.

Installationsdateien bzw. -anleitungen findest du auf der Website von Node.js.

Node.js Installation unter Windows

Die Darstellung mag je nach verwendetem Betriebssystem (Windows / MacOs / Linux) anders aussehen, das soll uns aber nicht stören.

Welches der Pakete du installierst ist für uns irrelevant. Jede Node.js Version > 8.x sollte für uns ausreichend sein.

Im Zweifel lade die LTS Version (LTS steht für „Long Term Support“) herunter und installier sie.

Wenn Node.js installiert ist, solltest du testen, ob die Installation erfolgreich war. Gib dazu in die Kommandozeile folgendes ein:

$ node --version
v10.16.0

Am besten testest du direkt auch noch NPM („Node Package Manager“) und NPX („Node Package Executor“)

$ npm --version
6.9.0

$ npx --version
6.9.0

Sollte dabei ein Fehler auftauchen, starte einfach mal den Rechner neu – vor allem Windows braucht ab und an einen kleinen Tritt bei der Installation unserer Pakete 😉

Führ die Test danach noch einmal durch. Dann sollte es klappen.

Installation der Vue CLI („Command Line Interface“)

Eigentlich sollte dieser Schritt überflüssig sein, ich würde ihn dennoch empfehlen.

Gib dazu in der Kommandozeile folgendes ein:

$ npm install -g @vue/cli

Erklärung:

  • npm spricht unseren Paketmanager an.
  • install ist vermutlich eindeutig, lässt sich auch mit -i abkürzen.
  • -g bedeutet „global“ – hiermit wird ein Paket systemweit und nicht nur innerhalb bzw. als Abhängigkeit einer bestimmten Anwendung installiert.
  • Dahinter schreiben wir das Paket, das wir installieren möchten. In unserem Fall @vue/cli .

Teste die Installation danach am besten auch wieder mit folgendem Kommandozeilen-Befehl:

$ vue --version
3.11.0

Hilfreich: Tipp zu Node.js und den Kommandozeilenbefehlen

Nun haben wir schon einige Kommandozeilenbefehle benutzt.

Insofern wäre es nicht verkehrt, sich mit dem Thema etwas näher zu beschäftigen und mal zu sondieren, welche weiteren Befehle es so gibt.

Eine Übersicht über alle npm-Befehle findest du in der npm-Dokumentation. Dort sind auch alle Abkürzungen wie -i für install und Aliases wie add für install gelistet.

Für eine schnelle Übersicht kannst du auch npm --help bzw. npm -h eingeben.

Die Installation des NUXT.js Framework

Spoiler: Können wir uns schenken.

Warum? Weil Nuxt auch als NPX ausführbar ist!

Der Vorteil: Wir müssen nicht erst irgendwelche Pakete (ggf. sogar global) installieren, sondern mit dem Node Package Executor (NPX) können wir Pakete herunterladen und direkt ausführen!

Die Initialisierung und Konfiguration des NUXT.JS Projekts

Die NUXT.JS Dokumentation fordert uns auf wieder in die Konsole zu gehen und folgendes Kommando einzugeben:

$ npx create-nuxt-app <project-name>

Aber Stopp! Das ist nicht das, was wir eingeben wollen, um unser Projekt zu „scaffolden“, also einzurichten. <project-name> ist lediglich als Platzhalter zu verstehen, wir sollten hier unseren Projektnamen eingeben. Dabei dürfen wir keine Sonderzeichen, Leerzeichen etc. verwenden.

Das wirst du vielleicht auch schon gemerkt haben, wenn du den oben stehenden Befehl einfach so in die Konsole gekloppt hast – du hast eine Fehlermeldung erhalten 😛

Falls du nicht wirklich trittfest in der Console und mit NUXT.JS bist, gib einfach folgenden Befehl ein, um dem Tutorial 1:1 zu folgen:

$ npx create-nuxt-app nuxt-star-wars-films

Daraufhin wirst du durch eine ganzen Reihe von Dialogen geführt. Ich will auf einiges gar nicht in der Tiefe eingehen, sondern möchte an dieser Stelle nur kurz die wichtigsten Parameter anhand einer Liste abklopfen.

  • Project name: Einfach so lassen. Lässt sich auch nachher noch ändern. (Siehe package.json)
    Solltest dudennoch nicht die Finger davon lassen können – auch hier darfst du keine Großschreibung, Sonderzeichen, Leerzeichen etc. verwenden.
  • Project description: Gib ein, was immer du magst. Für uns irrelevant. Kannst du auch später noch in der package.json ändern.
  • Author name: Hier kannst du deinen Namen eingeben. Auf Groß-/Kleinschreibung und Sonderzeichen musst du keine Rücksicht nehmen.
  • Choose the package manager: Wir wählen an dieser Stelle npm. Gerne kannst du YARN statt NPM wählen – ich bleibe innerhalb dieses Tutorials allerdings bei NPM.
    Hinweis: Generell ist es keine gute Idee YARN und NPM zu mischen!
  • Choose UI framework: Wir wählen „Bootstrap Vue
  • Choose custom server framework: Wir wählen „none„.
  • Choose Nuxt.js modules: Wir wählen Axios und Progressive Web App (PWA) Support.
  • Choose linting tools: Wir wählen keines davon. Das ist zwar nicht wirklich sinnvoll, erleichtert uns aber den Einstieg erheblich. Langfristig sollten wir dazu übergehen, den Code direkt beim Schreiben bzw. Speichern überprüfen („linten“) zu lassen.
  • Choose test framework: Auch wenn es sinnvoll wäre, bereits während der Entwicklung auf Herz und Nieren zu testen (Stichwort: TDD, „Test Driven Development“), wählen wir an dieser Stelle erst einmal „none„.
  • Choose rendering mode: Wir wählen „Universal„. Warum dazu unten mehr.
  • Choose development tools: Wenn du VS Code verwendest, solltest du jsconfig.json auswählen.

Danach wir die Installation angestubst und das kann eine Weile dauern.

Deshalb die Erklärungen, die ich von oben noch schulde.

PWA („Progressive Web App“)

Bei den Installationsfeatures haben wir PWA („Progressive Web App“) Support gewählt. Was das genau ist, darauf will ich an dieser Stelle nicht in aller Tiefe eingehen, lest dazu einfach kurz auf Wikipedia quer.

Kurzfassung:

  • Bei korrekter Konfiguration verbesserte Performance durch browserseitiges Caching.
  • Möglichkeit die Anwendung auf Mobilgeräten als „App“ zu installieren, inklusive App-Icon, uvm.
  • Dabei kann die Seite auch offline – also ohne Internetverbindung – genutzt werden. Zumindest Teile davon. Dazu und wie wir das optimieren können, vielleicht an anderer Stelle mehr.
  • Es tut uns nicht weh 😉
  • Aber: Initial laden wir damit erst einmal ein paar Kilobyte mehr, soviel muss klar sein.

„Linter / Formatter“

Wir haben Linter / Formatter nicht gewählt. Aus gutem Grund für unser Tutorial.

Nutzen wir Linting und Prettier, wird das Schreiben unserer Anwendung zeitweise zur Qual (…). Das hilft uns bei unserer Übung nicht weiter, deshalb verzichte ich ausnahmsweise darauf.

Letztendlich wollen wir versuchen, optimalen Code zu schreiben, der nachhaltig ist und auch von anderen Entwicklern entsprechend eines fest definierten Standards gelesen, geschrieben und verstanden werden kann. Der Linter überprüft bei der Transpilierung unseres Codes (der Umsetzung in eine im Browser lauffähige App) direkt ob der Code korrekt geschrieben wurde.

„Prettier“

Hilft uns dabei, „schöneren“ Code zu schreiben. Verschiedene Optionen werden bei Aktivierung automatisch beim Speichern ausgeführt.

Die Standardkonfiguration ist dabei vergleichsweise kleinteilig, so dürfen z.B. 80 Zeichen pro Zeile nicht überschritten werden. Das unterstützt in unserem Fall nicht unbedingt die Lesbarkeit und das Handling der Übungsdateien.

Langfristig würde ich dennoch die Nutzung von Linting und Prettier dringend empfehlen!

„Choose rendering mode“

Wir haben „Universal“ und nicht „SPA“ (Single Page Application) gewählt.

Aus zwei Gründen. Erstens wollen wir (vielleicht, ich lasse das an dieser Stelle erst einmal offen..) mehrere Seiten erstellen und zum Zweiten bietet uns die Option „Universal“ die Möglichkeit des SSR („Server Side Rendering“).

Auf die Details will ich auch hier nicht eingehen, lies dazu einfach mal kurz die offizielle Doku von Vue.js zu SSR quer. Auch hier wird direkt auf NUXT.JS verwiesen.

Start der Anwendung

Zeit in das Verzeichnis unserer Anwendung zu wechseln und einen ersten Testlauf zu wagen. Die Kommandozeile hat uns dazu nach Fertigstellung der Installation die notwendigen Befehle bereits mitgeteilt:

$ cd nuxt-star-wars-films
$ npm run dev

Wir sehen, dass sich in der Konsole so einiges tut, um die Anwendung zu transpilieren und begrüßt uns bereits dabei mit der Aufforderung:

Listening on: http://localhost:3000/

Falls du – wie ich auch – Visual Studio Code nutzt, kannst du den Link auch direkt mit STRG+Click auf den Link aufrufen. Ansonsten musst du ihn ggf. manuell in den Browser eintippen.

Daraufhin begrüßt uns folgender Screen:

Unser Startup-Screen – Läuft! 🙂

Aktivierung der Versionierung mit Git

Hinweis: Git ist für die Übung nicht wirklich notwendig – aber generell ist die Nutzung einer Versionsverwaltung eine gute Idee.
Ob du Git nutzen möchtest, ist also dir überlassen!

NOCH funktioniert alles. Grundsätzlich also ein guter Zeitpunkt, einen „Schnappschuss“ einzufangen, zu dem wir jederzeit zurückkehren könnten, wenn wir uns zwischendurch mal verspulen sollten.

Den Download und Installationsanweisungen für Git findest du in der Git-Dokumentation.

Falls du dich mit Git noch nicht so gut auskennst, empfehle ich dir folgende Tutorials:

Falls du ein paar Mark ausgeben kannst und möchtest, kann ich auch immer wieder die (Video-) Tutorials von Udemy empfehlen.

Hier soll der Kurs „Der Git Crashkurs – Versionskontrolle praktisch und kompakt“ nicht schlecht sein – ich kenne ihn aber nicht selbst. Zur Zeit kostet er nur 9,99€ statt 49,99€ Normalpreis. Sollte der Preis bei dir höher sein – warte einfach ein paar Tage. Angebote gibt es eigentlich fast immer.

Und lass dich von dem Timer á la „Dieses Angebot gilt nur noch X Stunden“ bloß nicht künstlich unter Druck setzen! Das ist reine Marketing-Psychologie..

Wie gesagt: Angebote gibt es immer wieder. Eigentlich sogar immer.

Dennoch hat sich nach der Installation etwas getan, einige Dateien wurden bereits angepasst. Deshalb solltest du den aktuellen Status jetzt „committen“, also als Schnappschuss in Git speichern. Gib dazu in der Kommandozeile folgendes ein:

$ git add -A
$ git commit -a -m "Initital commit"

Mit dem ersten Befehl fügst du alle Dateien (geänderte, gelöschte, neue) zum aktuellen Staging hinzu, commitest sie aber noch nicht.

Mit dem zweiten erstellst du deinen ersten „commit“. Damit du auch nachher den Überblick in deiner Commit-Zeitleiste behältst, empfehle ich dringend, in den Anführungszeichen im zweiten Befehl kurz festzuhalten was genau bei dieser Änderung hinzugefügt / gelöscht / geändert wurde.

Ein Überblick über die NUXT-Projektstruktur

Die NUXT.JS Projektstruktur

Die wichtigsten Informationen kannst du der Abbildung oben entnehmen.

Für uns sind erst einmal nur folgende Folder relevant:

  • Assets: Seitenbausteine, die nachher in der Anwendung transpiliert werden, wie zum Beispiel SCSS, Font-Dateien etc.
  • Components: Wiederverwendbare Seitenelemente
  • Layouts: Unser Gesamtlayout, in dem Header, Sidebar, Footer etc. eingebunden werden, die sich auf jeder Seite wieder finden.
  • Pages: Alle Seiten, die jeweils unter einer eigenen URL automatisch aufgerufen werden können. Dafür sorgt der Router von NUXT.JS .

Zusammenfassung

  • Du hast gelernt wie du Node.js und die Kommandozeile nutzt.
  • Du hast die Vue CLI installiert.
  • Du hast ein neues NUXT.JS Projekt initialisiert und eine Übersicht über die Installationsoptionen von NUXT kennen gelernt.
  • Du hast einen ersten Einblick in Git gewonnen.
  • Du hast die Projektstruktur eines NUXT.JS Projekts kennen gelernt.

Hausaufgabe

Bis zum nächsten Teil schau dir einfach mal die Dateistruktur und die Dateien selbst genauer an. Ändere, was immer du magst. Mut zur Lücke!

Du hast gesehen, dass es sehr schnell und einfach ist, ein neues NUXT.JS Projekt zu erstellen. Im schlimmsten Fall startest du das Projekt also neu. Im besten Fall hast du bis dahin tiefere Einblicke in Git gewonnen und kannst in der Zeitleiste bis zu unserem ersten Commit wieder zurück springen 😉

2 thoughts on “Tutorial: NUXT.JS Application zur Darstellung aller Star Wars Filme – Teil #1

  1. Leider bekomme ich andauernd beim npm run dev nen fatal error von nuxt
    SyntaxError: Unexpected token {

    habe keine der Datein nach dem installieren angerührt und auch nicht auffälliges gefunden.

    1. Hi Christian,
      konntest du mittlerweile eine Lösung finden?

      Ansonsten hätte ich folgende Fragen:

      • Hast Du Sonderzeichen im Projektnamen? Würde ich generell vermeiden. Versuchs mit was Kurzem ohne Sonderzeichen wie z.B. „testprojekt“.
      • Hast du in den Projektordner gewechselt in dem die package.json liegt?
      • Ansonsten dürfte der Syntax-Fehler eigentlich nur auftauchen, wenn du eine ältere Node-Version nutzt (<8.9 afaik).

      Habs grad noch mal mit der im Tutorial erwähnten Version 10.x probiert und die läuft einwandfrei durch. Solltest du für irgendwelche Projekte noch eine ältere Version nutzen müssen, empfehle ich dir den Node Version Manager, damit kannst du auf einem System verschiedene Node-Versionen nutzen und bei Bedarf switchen.

Schreiben Sie einen Kommentar

Ihre E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert

To top of Page