vue&firebase

ゴールと進捗状況

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ってやつが使えるようになりました。

http://localhost:8080/

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が使えると思います。

https://cr-vue.mio3io.com/tutorials/firebase.html#%E3%83%97%E3%83%AD%E3%82%B8%E3%82%A7%E3%82%AF%E3%83%88%E3%81%AE%E8%BF%BD%E5%8A%A0

いきなり上記を元に、チャットアプリを作ってみたいと思います。

ここからがめっちゃ難しそう・・・

■firebaseconfig情報をmain.jsに張り付ける

 firebaseconfig情報は、アプリの設定、全般、画面下部のFirebase SDK snippetの構成欄にあった。

 これを、main.jsに張り付けるっぽい。続く

コメントを残す

メールアドレスが公開されることはありません。 * が付いている欄は必須項目です