So verbinden Sie Vue.js und Firebase Firestore, um schnelle, skalierbare und dynamische Anwendungen zu erstellen (Teil 1).

In diesem Tutorial wollte ich einige meiner Erfahrungen beim Aufbau eines Online-Multiplayer-Web-App-Spiels für den Weltraumhandel teilen. Wir werden eine Reihe von Lektionen durcharbeiten, um eine Administrationsoberfläche für die Erstellung von Galaxien zu erstellen (wenn auch eine viel einfachere Version). Eine Herausforderung für mich war die Überlegung, wie ich meine Daten so strukturieren sollte, dass sie sich auf nicht relationale Weise aufeinander beziehen. Wie aus dem Titel hervorgeht, habe ich Vue.js als Administrationsoberfläche und Firebase Firestore als permanente Echtzeitdatenbank ausgewählt.

Warum also Vue / Firebase und nicht etwas populäreres wie React / MongoDB? Nun, ich bin ein Front-End-Typ. Ich habe eine Abneigung gegen Back-End-Sachen aufgebaut. Ich mag es einfach nicht. Ich finde, dass Firebase sehr einfach zu bedienen ist und einfach funktioniert! Außerdem muss ich keinen Server hosten, mich nicht um die Authentifizierung kümmern, keine lokale Datenbank einrichten oder komplizierte Schemata erstellen. Mit dem Firebase-Firestore-SDK kann ich einfach Daten bereitstellen und CRUD-Daten bereitstellen, und das ist alles. Warum also nicht reagieren? Es ist im Grunde wie bei Vue, oder? Ich dachte, ich würde Vue.js ein wenig lieben, da es so ein Traum ist, mit ihm zu arbeiten. Ich möchte das mit euch teilen.

In diesem Tutorial wird davon ausgegangen, dass Sie bereits wissen, wie Node und Npm eingerichtet werden. Ich werde Knoten Version 8+ verwenden. Sie können überprüfen, welche Knotenversion Sie ausführen, indem Sie in der Eingabeaufforderung den Befehl knoten -v eingeben.

Hier ein kurzer Überblick über das, was wir in Teil 1 besprechen werden:

  1. Richten Sie eine Vue-Webpack-Vorlage ein und verbinden Sie sie mit einem Firebase-Projekt.
  2. Erstellen Sie temporäre Beziehungen im Firestore, gegen die Sie testen können.
  3. Holen und rendern Sie die Daten in einer Tabelle.

Schritt 1: Lassen Sie uns Vue und Firebase installieren und verbinden.

Als erstes wollen wir ein paar Pakete auf unserer Maschine installieren: vue-cli und firebase-tools.

Gehen Sie in Ihrer Eingabeaufforderung zu Ihrem bevorzugten Projektverzeichnis und geben Sie den folgenden Befehl ein (vorausgesetzt, Sie haben npm bereits installiert).

npm installiere -g vue-cli firebase-tools

Dann initialisieren wir unser "System-Builder" -Projekt mit der Webpack-Vue-Vorlage.

vue init webpack system-builder

Sie werden dann aufgefordert, eine Reihe von Fragen zu beantworten. Die meisten Dinge werden gleich bleiben. Ich habe mich dafür entschieden, keine Tests durchzuführen oder meinen Code zu fusseln.

Der Einfachheit halber habe ich Folgendes ausgewählt:

? Projektname System-Builder
? Projektbeschreibung Ein Vue.js-Projekt
? Autor artokun 
? Vue Build Standalone
? Vue-router installieren? Ja
? Verwenden Sie ESLint, um Ihren Code zu fusseln? Nein
? Komponententests einrichten Nr
? E2e-Tests mit Nightwatch einrichten? Nein
? Sollen wir `npm install` für Sie ausführen, nachdem das Projekt erstellt wurde? (empfohlen) npm

Nach Abschluss der Installation navigieren wir in unser Projektverzeichnis und installieren einige weitere Abhängigkeiten, mit denen wir sass in unseren Vorlagen verwenden können.

cd system-builder && npm install --save sass-loader node-sass

Jetzt können wir unseren Entwickler-Server starten und im Browser laden

npm run dev

Unser Entwickler-Server sollte jetzt auf http: // localhost: 8080 laufen. An dieser Adresse sollte ein Vue-Kesselschild zu sehen sein, wenn alles wie erwartet gelaufen ist.

Öffnen wir nun unser Projektverzeichnis mit Ihrem bevorzugten Texteditor. Ich verwende vscode.

src / App.vue

Die soeben erstellte Vue-Vorlage enthält eine eingebaute Boilerplate. Wir werden die Dinge ein wenig aufräumen, bevor wir mit dem Rest der App weitermachen.

/src/App.vue

Lassen Sie uns zunächst das Logo in Zeile 3 auskommentieren / entfernen. Wir brauchen es für diese Übung nicht.

/src/components/HelloWorld.vue

Löschen Sie diese Datei, erstellen Sie eine neue Vue-Datei mit dem Namen System.vue und fügen Sie eine

Systemliste in das