[Vue×Firebase] SPA의 병아리를 만들어 보았다
4344 단어 vue-routerVue.jsvue-cliゔ그림x
우선 아티팩트
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);
// ここまで差し替え
// 省略
Reference
이 문제에 관하여([Vue×Firebase] SPA의 병아리를 만들어 보았다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dai_designing/items/27e62489f70da3d296c2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
※환경 구축은 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);
// ここまで差し替え
// 省略
Reference
이 문제에 관하여([Vue×Firebase] SPA의 병아리를 만들어 보았다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다
https://qiita.com/dai_designing/items/27e62489f70da3d296c2
텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념
(Collection and Share based on the CC Protocol.)
$ git clone https://[email protected]/dai570415/vuespa-sample.git
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);
// ここまで差し替え
// 省略
Reference
이 문제에 관하여([Vue×Firebase] SPA의 병아리를 만들어 보았다), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/dai_designing/items/27e62489f70da3d296c2텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)