使用 firebase Vue JS 登入/註冊#STEP（註冊）

首先，我將展示我的 Vue JS 專案中 SRC 資料夾的結構。

讓我們解釋一下：

• assets 資料夾是我的項目圖像的位置，在本例中，這是我放置Google 標誌圖像的位置，以便我們稍後可以使用它來實現Google 登入選項;

• module 資料夾是我存放專案模組的位置，在本例中，我將每個模組與資料夾分開，並在每個資料夾中建立了其他包含檔案的子文件夾，以便更好地組織；

  • 在 login 和 register 資料夾中，我建立了子資料夾：

  元件：螢幕的 HTML 位於哪裡；
  控制器：我們要在螢幕上執行的功能所在的位置；
  view: 我在其中調用在組件中創建的螢幕並將控制器屬性分配給它。

• 路由器資料夾中有我們專案的路由；

• App.vue 檔案只是呼叫項目路由並在所有螢幕上定義一些預設的 CSS 樣式；

• 最後，main.js 文件，我在其中調用 firebase 為我們提供的 SDK 設定以及 Vue JS 本身創建的其他一些導入。

---

首先，讓我們透過在終端機中執行以下命令來安裝我們將要使用的庫，在本例中是 vue-router 和 firebase：

之後

---

現在，我們開始在 main.js 檔案中加入 firebase 為我們提供的 SDK，所以讓我們注意下面這個結構：

請注意，我將 Vue 與 Vuetify 結合使用，以便更輕鬆地建立元件，但您可以使用 Tailwind 或任何其他您想要的框架。

---

現在，我們來建立專案路由並在 App.vue 檔案中進行配置，所以下面我們將重點放在這個結構上。

首先，讓我們前往index.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檔案中呼叫路由，如下所示：

最後，讓我們將路由新增到 main.js 檔案中，以便應用程式可以使用它。

---

現在，讓我們繼續創建實際的註冊元件、它的函數和調用，所以讓我們專注於這個結構。

文件形式Register.vue。

registerController.js 檔案。

註冊.vue 檔。

到目前為止，我們已經在main.js檔案中新增了將firebase中的SDK整合到我們專案中的程式碼，在router/index.js中配置了路由，並在main.js和App.vue中調用了路由，我們在formRegister.vue 文件中創建了註冊屏幕組件，我們在registerController.js 文件中創建了函數，並在register.vue 文件中調用了屏幕和控制器prop，理論上，現在，如果您存取您的應用程式/已註冊表格應如下所示：

以上是使用 firebase Vue JS 登入/註冊#STEP（註冊）的詳細內容。更多資訊請關注PHP中文網其他相關文章！