ゴールと進捗状況
https://qiita.com/ToshioAkaneya/items/aa1211d73c2d38134e63
全くVueやfirebaseについて知識が無いのもあり、上記「VueとFirebaseで爆速でチャットサービスを作ろう」を完コピで再現してみることをゴールとします。
が、、、本日9/8(日)時点、3時間くらい頑張ったけど、奥が深そうで全然出来ない状況なので、また続きから出来るように、成果をメモしておきます。
node.jsとnpmコマンドについて
Firebaseが何かについては追々理解するとして、とにかくFirebaseCLIを使う必要があるらしいことがわかりました。で、Firebaseでcliを使うには、npmコマンドで・・・ってことでnpmってエラーが出たから、
npmとは？ってことで、node.jsというのをインストールしたら、npmも使えるようになりました。
node.jsが何かについては追々理解するとして・・・。
でも、hello.jsってファイルを作ってconsole.log(“Hello World”);って書いて、node hello.jsってすると、Hello Worldが成功したから、powershell、python、node.jsみたいな感じなんかな。
で、npmはpip的なパッケージ管理ツールみたいに理解しました。
Vue.jsをローカルで動かす
vue.jsが何かについては追々理解するとして、「Vue.js を vue-cli を使ってシンプルにはじめてみる」の記事をみつけた（ https://qiita.com/567000/items/dde495d6a8ad1c25fa43 ）ので、vue-cliを入れてみることに。早速さっき使えるようになったnpmコマンドで！
npm install -g @vue/cli
# vue create my-project
# npm run serve
ってうつと、ローカルでvueってやつが使えるようになりました。
Firebase Hostingへデフォルトの状態でデプロイ
Firebaseを使いたかったら、以下のコマンド叩いてね。ってことで、ようやくさっき覚えたnpmでfirebase-toolsをインストール。
npm install -g firebase-tools
で、Firebaseでプロジェクト作っておいて、ログインコマンドをクリック。
# firebase login
紐づけれました。
デプロイする為には、cdで、対象とするディレクトリに移動してから、firebase initコマンドを叩きます。
ここでは、testAppとします。
ややこしくなりそうなので、一旦Hostingのみ選択して、とりあえずinitを通してみました。
デフォルト、publicフォルダに公開用ファイル置くよな？って聞いてくるのでOKして、
そうなるとフォルダ構成的にはこうなります。
testApp
|- .firebaserc
|- firebase.json
|_ public
で、publicの中のindex.htmlが、WEBから見れるってことになるようです。
では、firebase deployコマンドを叩きます。
無事とりあえずindexファイルは見れました。
Vue&Firebase
ここまでやったことを、上手く合わせれば、Firebase上でvueが使えると思います。
いきなり上記を元に、チャットアプリを作ってみたいと思います。
ここからがめっちゃ難しそう・・・
■firebaseconfig情報をmain.jsに張り付ける
firebaseconfig情報は、アプリの設定、全般、画面下部のFirebase SDK snippetの構成欄にあった。
これを、main.jsに張り付けるっぽい。続く