vue.js
Firebase

Vue.jsでFirebaseを始めよう 1.プロジェクト作成編

More than 1 year has passed since last update.

フロント専門の人、作品を作るときちょっとした永続化をしたいときあるよね?自分でバックエンドをゴニョゴニョするのはかなりエネルギーが必要だ。最低限の労力で、javaやらphpやら触らずにバックエンド実装できるのがFirebaseだ。

このチュートリアルでVueとfirebaseで掲示板っぽいものを作ってみよう。

※Firebaseについてはこの辺とかを参照してください。

全編
Vue.jsでFirebaseを始めよう 1.プロジェクト作成編
Vue.jsでFirebaseを始めよう 2.Vueプロジェクト準備編
Vue.jsでFirebaseを始めよう 3.ユーザーログイン編
Vue.jsでFirebaseを始めよう 4.送信してみる編
Vue.jsでFirebaseを始めよう 5.リストを表示させる編
Vue.jsでFirebaseを始めよう 6.入力&送信編

始める前に

ゴール設定

簡単な掲示板を作る。
フロントエンド:Vue.js
バックエンド:Firebase

注意

本稿はあくまでFirebaseを触る第一歩という目的で書いたもので、作品やサンプルなどちょっとしたものを作るなら問題ないが、サービスとなると別途データ構造やらルール設定を勉強してください。

必要なスキル

  • vue.js 2.xの基本スキル
  • jsonでデータを扱う知識
  • やる気

必要なもの

  • Firebaseプロジェクト
  • vue-cliをインストール npm install -g vue-cli or ここ参照

ではスタート

まずはGoogleへログインしてfirebaseのコンソール画面

新規プロジェクトを作成

Firebase_console_1.png

プロジェクト名を入力

Firebase_console_2.png

認証方法設定

Firebase_console_3.png

Firebase_console_4.png

今回は匿名にする

Firebase_console_5.png

準備完了

firebaseの設定はこれで完了。とりあえず、プロジェクトのデータベースを確認してみよう。「fire-vue-3b40d」はデータベースのルートだ。まだ何も入っていない空の状態だ。
Firebase_console_6.png

次はVueプロジェクト準備編。
Vue.jsでFirebaseを始めよう 2.Vueプロジェクト準備編