Zun?chst zeige ich die Struktur des SRC-Ordners in meinem Vue JS-Projekt.

.
├── src
│   └── assets
│       └── images
|           └── imagem_logo_google.png
│   └── module
│       └── login
|           └── component
|               └── formLogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue
│   └── router
│       └── index.js
│   └── App.vue
│   └── main.js

Lassen Sie es uns erkl?ren:

• Im Ordner Assets befinden sich die Bilder meines Projekts. In diesem Fall habe ich dort das Bild des Google-Logos abgelegt, damit wir es sp?ter zur Implementierung der Google-Anmeldeoption verwenden k?nnen ;

• Im Ordner Module habe ich die Projektmodule. In diesem Fall habe ich jedes Modul durch Ordner getrennt und innerhalb jedes Ordners habe ich zur besseren Organisation weitere Unterordner mit den Dateien erstellt;

  • In den Ordnern login und register habe ich die Unterordner erstellt:

  Komponente: wo ist der HTML-Code der Bildschirme;
  Controller: wo sich die Funktionen befinden, die wir auf dem Bildschirm ausführen werden;
  Ansicht: wo ich den in der Komponente erstellten Bildschirm aufrufe und ihm die Controller-Requisite zuordne.

• Der Router-Ordner enth?lt die Routen für unser Projekt;

• Die App.vue-Datei ruft lediglich die Projektrouten auf und definiert einige Standard-CSS-Stile auf allen Bildschirmen;

• Schlie?lich die Datei main.js, in der ich die SDK-Einstellungen aufrufe, die Firebase uns bereitgestellt hat, und einige andere Importe, die Vue JS selbst erstellt.

Zuerst installieren wir zun?chst die Bibliotheken, die wir verwenden werden, in diesem Fall Vue-Router und Firebase, indem wir die folgenden Befehle im Terminal ausführen:

$ npm install vue-router

Nachher

$ npm install firebase

Jetzt beginnen wir mit dem Hinzufügen des SDK, das Firebase uns zur Verfügung gestellt hat, in der Datei main.js. Achten wir also auf die folgende Struktur:

.
├── src
│   └── main.js

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(vuetify).mount('#app')

Beachten Sie, dass ich Vue mit Vuetify verwende, um das Erstellen von Komponenten zu vereinfachen. Sie k?nnen jedoch Tailwind oder jedes andere gewünschte Framework verwenden.

Jetzt erstellen wir die Projektroute und konfigurieren sie in der App.vue-Datei, also konzentrieren wir uns unten auf diese Struktur.

.
├── src
│   └── router
│       └── index.js
│   └── App.vue

Zuerst gehen wir zur Datei index.js und fügen Folgendes hinzu:

.
├── src
│   └── assets
│       └── images
|           └── imagem_logo_google.png
│   └── module
│       └── login
|           └── component
|               └── formLogin.vue
|           └── controller
|               └── loginController.js
|           └── view
|               └── login.vue
│       └── register
|           └── component
|               └── formRegister.vue
|           └── controller
|               └── registerController.js
|           └── view
|               └── register.vue
│   └── router
│       └── index.js
│   └── App.vue
│   └── main.js

Jetzt rufen wir die Route in der App.vue-Datei wie folgt auf:

$ npm install vue-router

Zuletzt fügen wir die Route zu unserer main.js-Datei hinzu, damit die Anwendung sie verwenden kann.

$ npm install firebase

Jetzt gehen wir zur Erstellung unserer eigentlichen Registrierungskomponente, ihrer Funktionen und ihres Aufrufs über. Konzentrieren wir uns also auf diese Struktur.

.
├── src
│   └── main.js

Datei formRegister.vue.

import { createApp } from 'vue'
import App from './App.vue'
import vuetify from './plugins/vuetify'
import { initializeApp } from 'firebase/app'

const firebaseConfig = {
  apiKey: "AIzaSyA_Bq3nqLfRUWXsqtkpzietY5eu0ewFtzA",
  authDomain: "login-app-8c263.firebaseapp.com",
  projectId: "login-app-8c263",
  storageBucket: "login-app-8c263.appspot.com",
  messagingSenderId: "854129813359",
  appId: "1:854129813359:web:02f776146a0c34be906a9a"
}

initializeApp(firebaseConfig)

const app = createApp(App)

app.use(vuetify).mount('#app')

registerController.js-Datei.

.
├── src
│   └── router
│       └── index.js
│   └── App.vue

Register.vue-Datei.

1  | import { createRouter, createWebHistory } from 'vue-router'
2  | import Register from '@/module/register/view/register.vue'
3  |
4  | const router = createRouter({
5  | history: createWebHistory(),
6  | routes: [
7  |   {
8  |     path: '/cadastro',
9  |     name: 'Register',
10 |     component: Register
11 |   }
12 | ]
13 | })
14 |
15 | export default router

Bislang haben wir also bereits den Code zur Integration des SDK in Firebase zu unserem Projekt in der Datei main.js hinzugefügt, die Routen in router/index.js konfiguriert und die Route in main.js und App.vue aufgerufen , wir haben die Registrierungsbildschirmkomponente in der Datei formRegister.vue erstellt, wir haben die Funktionen in der Datei registerController.js erstellt und den Bildschirm und die Controller-Requisite in der Datei register.vue aufgerufen, theoretisch jetzt, wenn Sie auf Ihre Anwendung zugreifen /bereits registrieren Das Formular sollte wie folgt aussehen:

Das obige ist der detaillierte Inhalt vonAnmelden/Registrieren mit Firebase Vue JS #STEP (Registrierung). Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!