まずは成果物
https://vue-login-191230.firebaseapp.com/
[こちらで認証ページもみることができます]
ID: member@example.com
PW: member
環境構築
※環境構築はVueCLIからVue.js入門①【VueCLIで出てくるファイルを概要図で理解】でできます。
|- Vue CLI
|- Vuex
|- Vue Router
データクローン & Run
Macならターミナル、Winならコマンドラインから下記コマンドを入力してデータをクローンしてください。
$ git clone https://dai570415@bitbucket.org/dai570415/vuespa-sample.git
クローンできたら圧縮データを解凍する
その中のsrcファイルを各自のCLIにごっそり入れてください。
Vue roterとvuexを動かせる状態なら動くはずです。
Firebaseと連動
Firebaseのコンソール
・Peoject Overview「プロジェクトの設定」
↓
・マイアプリ追加
↓「Firebase SDK snippet」のCDNを選択するとscriptが出てくるので
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);
// ここまで差し替え
// 省略