こないだはこんな感じのことをやってました。
ホントにFirebaseに入門したてって感じなので、今回はVue.jsで自分で画面を作ったものをデプロイまで頑張ってみたいと思います。
Vue.js
Vue.jsに関しては触りくらいはやってきたので、こちらを御覧ください。
Vuetifyの導入
過去にこんなのをやっていたので、その復習も兼ねて使ってみます。
vue-cli 3系を使用してプロジェクトを作成します。
vue create firebase_sample
cd firebase_sample
続いてvuetifyを導入します。
vue add vuetify
サーバーを起動して動作を確認します。
npm run serve
サーバが起動したらlocalhostにアクセスして確認します。
こんな感じの画面が出ればインストール完了です。
Atomic designっぽいディレクトリ階層にする
Atomic designっぽいディレクトリ階層にして、SFCで作っていく準備をします。
src ├── App.vue ├── assets │ ├── logo.png │ └── logo.svg ├── components │ ├── HelloWorld.vue │ ├── atoms │ ├── molecules │ ├── organisms │ ├── pages │ └── templates ├── main.js └── plugins └── vuetify.js
一旦ディレクトリだけ揃いました。
なにはともあれ作る
作ったコードはこちらをご参照。
必要そうなライブラリをインストール
とりあえず以下のライブラリはインストールしておきます。
- vue-router
- vuex
$npm install vue-router + vue-router@3.1.1 added 1 package from 1 contributor and audited 26368 packages in 10.414s found 0 vulnerabilities
$npm install vuex + vuex@3.1.1 added 1 package from 1 contributor and audited 26369 packages in 6.96s found 0 vulnerabilities
layoutを作成する
layoutはサンプルをそのまんま持ってきました。 画面はこんな感じです。
もとのコードはこちら。
各種設定
フォント設定
この辺参考にしました。
vuetifyjscom-uznxvccuyb.now.sh
$ npm install material-design-icons-iconfont -D
$ npm install @mdi/font -D
$ npm install @fortawesome/fontawesome-free -D
なんかmain.jsも書き換えろって書いてあるので、言われるがまま書き換え。。。
routes
とりあえず、route設定だけ設定します。
Firebase
今回もとりあえずHostingだけしてみます。前回と違うのはホスティングするものがデフォルトかオリジナルで作ったものかの違いですね。
ビルド
npm run build
これで、distというディレクトリの中に、プロジェクトがビルドされます。
Firebase設定
下記コマンドで設定していきます。
firebase init
ポイントは、ディレクトリの指定を変更することです。
? What do you want to use as your public directory? dist
デプロイ
前と同様にデプロイします。
firebase deploy
あとはアクセスすれば、vueプロジェクトが公開されます。
感想
それにしてもvuetifyはきれいでいいですね。ちゃちゃっといい感じの画面作るのにはもってこいです。
firebaseはまだまだ使い方もよくわかりませんが、基本無料なんでガシガシ使っていきながら勉強したいと思います。