どこにでもいるSEの備忘録

たぶん動くと思うからリリースしようぜ

Firebase+Vue.jsでWebアプリケーション的ななにかを作る

f:id:nogawanogawa:20190721152436j:plain

こないだはこんな感じのことをやってました。

nogawanogawa.hatenablog.com

ホントにFirebaseに入門したてって感じなので、今回はVue.jsで自分で画面を作ったものをデプロイまで頑張ってみたいと思います。

Vue.js

Vue.jsに関しては触りくらいはやってきたので、こちらを御覧ください。

nogawanogawa.hatenablog.com

Vuetifyの導入

過去にこんなのをやっていたので、その復習も兼ねて使ってみます。

nogawanogawa.hatenablog.com

vue-cli 3系を使用してプロジェクトを作成します。

vue create firebase_sample
cd firebase_sample

続いてvuetifyを導入します。

vue add vuetify

サーバーを起動して動作を確認します。

npm run serve

サーバが起動したらlocalhostにアクセスして確認します。

http://localhost:8080

こんな感じの画面が出ればインストール完了です。

f:id:nogawanogawa:20190808072555p:plain:w500

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

一旦ディレクトリだけ揃いました。

なにはともあれ作る

作ったコードはこちらをご参照。

github.com

必要そうなライブラリをインストール

とりあえず以下のライブラリはインストールしておきます。

  • 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はサンプルをそのまんま持ってきました。 画面はこんな感じです。

vuetifyjs.com

もとのコードはこちら。

github.com

各種設定

フォント設定

この辺参考にしました。

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はまだまだ使い方もよくわかりませんが、基本無料なんでガシガシ使っていきながら勉強したいと思います。