Πώς να συνδέσετε το Vue.js και το Firebase Firestore για την κατασκευή γρήγορων, επεκτάσιμων και δυναμικών εφαρμογών (μέρος 1).

Για αυτό το σεμινάριο ήθελα να μοιραστώ κάποιες από τις εμπειρίες μου, ενώ οικοδόμησα ένα online multiplayer space-trading παιχνιδιού app. Θα εργαστούμε μέσα από μια σειρά μαθημάτων για να δημιουργήσουμε μια διεπαφή διαχείρισης για τη δημιουργία γαλαξιών (αν και μια πολύ απλούστερη έκδοση). Ένα από τα πράγματα που βρήκα προκλητική ήταν να σκεφτόμαστε πώς να δομήσουμε τα δεδομένα μου, καθώς αυτά σχετίζονται μεταξύ τους με μη-σχεσιακό τρόπο. Όπως υποδηλώνει ο τίτλος, επέλεξα να χρησιμοποιήσω το Vue.js ως interface admin και το Firebase Firestore ως την επίμονη βάση δεδομένων σε πραγματικό χρόνο.

Γιατί λοιπόν το Vue / Firebase και όχι κάτι πιο δημοφιλές όπως το React / MongoDB. Λοιπόν, είμαι ένας άντρας μπροστά, έχτισα μια αποστροφή για να υποστηρίξω πράγματα, απλά δεν μου αρέσει. Θεωρώ ότι η πυροσβεστική είναι πραγματικά εύκολη στη χρήση και απλά λειτουργεί! Επιπλέον, δεν χρειάζεται να φιλοξενώ ένα διακομιστή, να ανησυχώ για την αυθεντία, να δημιουργήσω μια τοπική βάση δεδομένων ή να δημιουργήσω περίπλοκα σχήματα. Μπορώ απλά να αναπτύξω και CRUD δεδομένα χρησιμοποιώντας το firebase firekore SDK και αυτό είναι όλο. Γιατί λοιπόν να μην Αντιδράσω, είναι βασικά όπως ο Vue; Σκέφτηκα ότι θα έδινα Vue.js μια μικρή αγάπη, δεδομένου ότι είναι ένα τέτοιο όνειρο να συνεργαστεί, θέλω να το μοιραστώ μαζί σας.

Αυτό το σεμινάριο υποθέτει ότι ήδη ξέρετε πώς να ορίσετε κόμβο και npm. Θα χρησιμοποιώ την έκδοση κόμβου 8+. Μπορείτε να ελέγξετε ποια έκδοση κόμβου εκτελείτε εισάγοντας τον κόμβο -v στη γραμμή εντολών σας.

Υπάρχει μια γρήγορη επισκόπηση του τι θα συζητήσουμε στο μέρος 1:

  1. Ρυθμίστε ένα πρότυπο webpack Vue και συνδέστε το σε ένα έργο Firebase.
  2. Δημιουργήστε προσωρινές σχέσεις στην τράπεζα πυρκαγιάς για να δοκιμάσετε.
  3. Λήψη και απόδοση των δεδομένων σε έναν πίνακα.

Βήμα 1: Ας πάρουμε τα Vue και Firebase εγκατεστημένα και συνδεδεμένα.

Το πρώτο πράγμα που θέλουμε να κάνουμε είναι να εγκαταστήσουμε δύο πακέτα στη μηχανή μας: vue-cli και firebase-tools.

Στη γραμμή εντολών προχωρήστε και μεταβείτε στον αγαπημένο σας κατάλογο έργου και πληκτρολογήστε την ακόλουθη εντολή (υποθέτοντας ότι έχετε ήδη εγκαταστήσει npm).

npm εγκαταστήστε-g vue-cli firebase-tools

Ας αρχικοποιήσουμε το έργο "system-builder" χρησιμοποιώντας το πρότυπο webpack vue.

vue init webpack σύστημα-οικοδόμος

Στη συνέχεια θα σας ζητηθεί να απαντήσετε σε μια σειρά ερωτήσεων. Τα περισσότερα πράγματα θα παραμείνουν τα ίδια. Επέλεξα να μην χρησιμοποιήσω δοκιμές ή να μου λείψει τον κώδικα.

Για λόγους απλότητας, εδώ είναι αυτό που επέλεξα:

; Όνομα έργου σύστημα-οικοδόμος
; Περιγραφή έργου Ένα έργο Vue.js
; Συγγραφέας artokun 
; Η Vue κατασκευάζεται αυτόνομα
; Εγκαταστήστε vue-router; Ναί
; Χρησιμοποιήστε το ESLint για να χρωματίσετε τον κωδικό σας; Οχι
; Ρύθμιση δοκιμαστικών μονάδων αριθ
; Εγκατάσταση δοκιμών e2e με το Nightwatch; Οχι
; Πρέπει να εκτελέσουμε `npm install` για εσάς μετά την δημιουργία του έργου; (συνιστάται) npm

Μόλις ολοκληρωθεί η εγκατάσταση, ας πλοηγηθείτε στον κατάλογο έργων μας και να εγκαταστήσετε μερικές επιπλέον εξαρτήσεις που θα μας επιτρέψουν να χρησιμοποιήσουμε sass στα πρότυπα μας.

cd system-builder && npm install - αποθήκευση sass-loader node-sass

Τώρα μπορούμε να ξεκινήσουμε τον εξυπηρετητή dev και να το φορτώσουμε στο πρόγραμμα περιήγησης

npm εκτέλεση dev

Ο εξυπηρετητής dev θα πρέπει να εκτελείται τώρα στη διεύθυνσηhttp: // localhost: 8080. Θα πρέπει να υπάρχει κάποια λέιζερ Vue που θα εμφανίζεται σε αυτή τη διεύθυνση αν τα πάντα πήγαν όπως ήταν αναμενόμενο.

Τώρα ας ανοίξουμε τον κατάλογο έργων με τον αγαπημένο σας επεξεργαστή κειμένου. Θα χρησιμοποιώ vscode.

src / App.vue

Το πρότυπο vue που δημιουργήσαμε έρχεται με ένα ενσωματωμένο boilerplate. Θα καθαρίσουμε τα πράγματα λίγο πριν προχωρήσουμε με την υπόλοιπη εφαρμογή.

/src/App.vue

Πρώτα απ 'όλα, ας προχωρήσουμε και σχολιάζουμε / αφαιρέσουμε το λογότυπο στη γραμμή 3. Δεν θα το χρειαστούμε γι' αυτή την άσκηση.

/src/components/HelloWorld.vue

Ας διαγράψουμε αυτό το αρχείο και να δημιουργήσουμε ένα νέο αρχείο Vue που ονομάζεται System.vue και να ρίξουμε μια

Λίστα Συστήματος στην ετικέτα