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: 컴포넌트에서 생성된 화면을 호출하고 컨트롤러 prop을 할당합니다.

• 라우터 폴더에는 프로젝트의 경로가 있습니다.

• App.vue 파일은 프로젝트 경로를 호출하고 모든 화면에서 일부 기본 CSS 스타일을 정의합니다.

• 마지막으로, Firebase가 제공한 SDK 설정과 Vue JS 자체에서 생성하는 기타 가져오기를 호출하는 곳인 main.js 파일입니다.

---

먼저, 터미널에서 아래 명령을 실행하여 사용할 libs(이 경우 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')

구성 요소를 더 쉽게 생성하기 위해 Vuetify와 함께 Vue를 사용하고 있지만 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

Register.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 파일에 통합하는 코드를 이미 추가했고, router/index.js에서 경로를 구성했으며, main.js 및 App.vue에서 경로를 호출했습니다. , formRegister.vue 파일에 등록 화면 구성 요소를 만들었고, RegisterController.js 파일에 함수를 만들었으며, 이론적으로는 Register.vue 파일에 있는 화면과 컨트롤러 소품을 호출했습니다. 이제 애플리케이션에 액세스하면 /이미 등록 양식은 아래와 같이 나타나야 합니다.

위 내용은 Firebase Vue JS #STEP에 로그인/등록(등록)의 상세 내용입니다. 자세한 내용은 PHP 중국어 웹사이트의 기타 관련 기사를 참조하세요!