[Vue×Firebase] SPA의 병아리를 만들어 보았다

우선 아티팩트



h tps // 흠뻑 빠지다 p. 코m/
[여기에서 인증 페이지도 볼 수 있습니다]
ID: 메 m r @ 에아 mp ぇ. 이 m
PW: member











환경 구축



※환경 구축은 VueCLI에서 Vue.js 입문①【VueCLI로 나오는 파일을 개요도로 이해】 로 할 수 있습니다.
|- Vue CLI
|- Vuex
|- Vue Router

데이터 클론 & Run



Mac이라면 터미널, Win이라면 커맨드 라인에서 아래 명령을 입력하여 데이터를 복제하십시오.
$ git clone https://[email protected]/dai570415/vuespa-sample.git

복제가 완료되면 압축 데이터를 압축 해제합니다.
그 안의 src 파일을 자신의 CLI에 몰래 넣으십시오.

Vue roter와 vuex를 움직일 수 있는 상태라면 움직일 것입니다.

Firebase와 연동



Firebase 콘솔
· Peoject Overview "프로젝트 설정"

· 내 앱 추가
↓ 「Firebase SDK snippet」의 CDN을 선택하면 script가 나오므로
스크립트 태그로 둘러싸인 부분을 다음 파일에 복사합니다.

/src/main.js
// 省略

// 認証関連
import firebase from 'firebase'
// Firebaseで新たにプロジェクトを作ったら以下を差し替え
Vue.config.productionTip = false
let firebaseConfig = {
  apiKey: "Your_code",
  authDomain: "Your_code",
  databaseURL: "Your_code",
  projectId: "Your_code",
  storageBucket: "Your_code",
  messagingSenderId: "Your_code",
  appId: "Your_code",
  measurementId: "Your_code"
};
firebase.initializeApp(firebaseConfig);
// ここまで差し替え

// 省略

좋은 웹페이지 즐겨찾기