使用 firebase Vue JS 登录/注册#STEP（注册）

首先，我将展示我的 Vue JS 项目中 SRC 文件夹的结构。

.
├── 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 徽标图像的位置，以便我们稍后可以使用它来实现 Google 登录选项;

• module 文件夹是我存放项目模块的位置，在本例中，我将每个模块与文件夹分开，并在每个文件夹中创建了其他包含文件的子文件夹，以便更好地组织；

  • 在 login 和 register 文件夹中，我创建了子文件夹：

  组件：屏幕的 HTML 位于哪里；
  控制器：我们要在屏幕上执行的功能所在的位置；
  view: 我在其中调用在组件中创建的屏幕并将控制器属性分配给它。

• 路由器文件夹中有我们项目的路由；

• App.vue 文件只是调用项目路由并在所有屏幕上定义一些默认的 CSS 样式；

• 最后，main.js 文件，我在其中调用 firebase 为我们提供的 SDK 设置以及 Vue JS 本身创建的其他一些导入。

---

首先，让我们通过在终端中运行以下命令来安装我们将要使用的库，在本例中是 vue-router 和 firebase：

$ npm install vue-router

之后

$ npm install firebase

---

现在，我们开始在 main.js 文件中添加 firebase 为我们提供的 SDK，所以让我们注意下面这个结构：

.
├── 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 文件中进行配置，所以下面我们重点关注这个结构。

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

首先，让我们转到index.js 文件并添加以下内容：

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

Linha	Explicação
1	Importa as funções createRouter e createWebHistory da biblioteca vue-router. createRouter é usado para configurar o roteador, e createWebHistory define o modo de histórico do navegador para gerenciar URLs de forma limpa (sem o símbolo #).
2	Importa o componente Register, que representa a página de registro, localizado na pasta especificada. Este componente será carregado quando o usuário acessar a rota correspondente.
4/13	Cria uma instância do roteador (router) com createRouter. Aqui, history define o modo de histórico (createWebHistory) e routes define as rotas disponíveis. A rota { path: '/cadastro', name: 'Register', component: Register } configura o caminho /cadastro para carregar o componente Register. name é um nome opcional para a rota, que facilita a navegação programática.
15	Exporta a rota como o módulo padrão, para que ele possa ser importado e usado no aplicativo Vue.

现在让我们在App.vue文件中调用路由，如下所示：

$ npm install vue-router

最后，让我们将路由添加到 main.js 文件中，以便应用程序可以使用它。

$ npm install firebase

---

现在，让我们继续创建实际的注册组件、它的函数和调用，所以让我们重点关注这个结构。

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

到目前为止，我们已经在main.js文件中添加了将firebase中的SDK集成到我们项目中的代码，在router/index.js中配置了路由，并在main.js和App.vue中调用了路由，我们在 formRegister.vue 文件中创建了注册屏幕组件，我们在 registerController.js 文件中创建了函数，并在 register.vue 文件中调用了屏幕和控制器 prop，理论上，现在，如果您访问您的应用程序/已经注册 表格应如下所示：

以上是使用 firebase Vue JS 登录/注册#STEP（注册）的详细内容。更多信息请关注PHP中文网其他相关文章！