Firebase Vue JS #STEP에 로그인/등록(등록)-JS 튜토리얼-php.cn

먼저 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

로그인 후 복사

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 중국어 웹사이트의 기타 관련 기사를 참조하세요!