[Vue×Firebase] SPAの雛形をつくってみた

4466 ワード
vue-router Vue.js vue-cli Vuex Vue.js テキストリンク

まずは成果物

https://vue-login-191230.firebaseapp.com/
[こちらで認証ページもみることができます]
ID: [email protected]
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が出てくるので
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);
// ここまで差し替え

// 省略