まず、Vue JS プロジェクトの SRC フォルダーの構(gòu)造を示します。

.
├── 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

説明しましょう:

• assets フォルダーは、プロジェクトの畫像が配置されている場所です。この場合は、後で Google ログイン オプションを?qū)g裝するために使用できるように、Google ロゴの畫像を配置した場所です。 ;

• module フォルダーにはプロジェクト モジュールがあります。この場合、各モジュールをフォルダーで分離し、各フォルダー內(nèi)にファイルを含む他のサブフォルダーを作成して、整理しやすくしました。

  • login フォルダーと register フォルダー內(nèi)に、次のサブフォルダーを作成しました。

  component: は畫面の HTML です。
  コントローラー: 畫面上で実行する機(jī)能が配置される場所;
  view: ここで、コンポーネント內(nèi)で作成された畫面を呼び出し、それにコントローラー プロパティを割り當(dāng)てます。

• ルーターフォルダーにはプロジェクトのルートが含まれています;

• App.vue ファイルはプロジェクト ルートを呼び出し、すべての畫面でデフォルトの CSS スタイルを定義しているだけです。

• 最後に、firebase が提供する SDK 設(shè)定と、Vue JS 自體が作成するその他のインポートを呼び出す main.js ファイルです。

---

まず、何よりもまず、ターミナルで以下のコマンドを?qū)g行して、使用するライブラリ (この場合は vue-router と firebase) をインストールしましょう。

$ npm install vue-router

その後

$ npm install firebase

---

それでは、firebase が提供する SDK を main.js ファイルに追加することから始めましょう。そのため、以下の構(gòu)造に注目してみましょう。

.
├── 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')

コンポーネントの作成を容易にするために、Vue と Vuetify を使用していますが、Tailwind またはその他の任意のフレームワークを使用できることに注意してください。

---

次に、プロジェクト ルートを作成して App.vue ファイルで構(gòu)成しましょう。以下ではこの構(gòu)造に注目してみましょう。

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

まず、index.js ファイルに移動(dòng)して以下を追加しましょう:

.
├── 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

次に、App.vue ファイル內(nèi)のルートを次のように呼び出してみましょう:

$ npm install vue-router

最後に、アプリケーションが使用できるように、main.js ファイルにルートを追加しましょう。

$ npm install firebase

---

ここで、実際の登録コンポーネント、その関數(shù)、およびその呼び出しの作成に進(jìn)みましょう。この構(gòu)造に焦點(diǎn)を當(dāng)てましょう。

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

ファイルフォームRegister.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 ファイル。

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

.vue ファイルを登録します。

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

これまでのところ、firebase の SDK を main.js ファイルのプロジェクトに統(tǒng)合するコードを追加し、router/index.js でルートを設(shè)定し、main.js と App.vue でルートを呼び出しています。理論的には、formRegister.vue ファイルに登録畫面コンポーネントを作成し、registerController.js ファイルに関數(shù)を作成し、register.vue ファイルで畫面とコントローラー プロパティを呼び出しました。 /すでに登録しています フォームは次のように表示されます:

以上がfirebase Vue JS #STEPでログイン?登録（登録）の詳細(xì)內(nèi)容です。詳細(xì)については、PHP 中國語 Web サイトの他の関連記事を參照してください。