Vue.jsで掲示板を作ってみよう vol.2『firebaseとvueファイルの紐付け』

今回も頑張りましょう！

ターミナル

npm install --save firebase

plaginsの中に「firebase.js」というファイルを作る。
下のコードを入れる。

import firebase from "firebase";
if(!firebase.apps.length){
    firebase.initializeApp({

})
}

export default firebase;

次はgoogleにうつります。
googlefirebaseと検索し開きます。
まず、プロジェクトを作成する！!



↓この画面をここではホームと呼ばせていただきます。お願いします。

ホームの</>(ウェブ)ボタンを押します。
ここではboardと名付けます
hostingのチェックはつけません

ここはスルーしてコンソールに進みましょう

ホームに戻ると思うので、次はホームからCloud Firestoreを開きます。

今後board（project名）のCloud firestoreにこれから作る掲示板のコメントを保存し、取得・追加・更新・削除をおこないます



有効にするで完了です。

次に、権限を有効にします。
ホームからCloudfirestoreにいき、ルールを押します。
ルールの編集で下のようにfalseをtrueに変えて、公開にします。

rules_version = '2';
service cloud.firestore {
  match /databases/{database}/documents {
    match /{document=**} {
      allow read, write: if true;
    }
  }
}

最後に、最初に作ったplaginsの中の「firebase.js」というファイルに,
プロジェクト設定＞全般（下にスクロール）のapikeyからmeasurementIdをコピペします。

import firebase from "firebase";
if(!firebase.apps.length){
    firebase.initializeApp({
    apiKey: 
    authDomain: 
    projectId: 
    storageBucket: 
    messagingSenderId:
    appId: 
    measurementId:
})
}

export default firebase;

紐付け作業はここまでになります！
次は、データの取得・追加・更新・削除を行ってください

こんな感じの仕上がりが目標です。
私が勉強したサイトは↓
https://www.wakuwakubank.com/posts/723-firebase-firestore-query/

わかりやすいので作れると思います、頑張ってください！