【Vue.js】カウントアップ（Firebase・Vue CLI v4.0.4）

環境メモ
⭐️Mac OS Mojave バージョン10.14
⭐️Firebase Hosting
⭐️Vue CLI v4.0.4

Firebase HostingにVue CLI v4.0.4のプロジェクトで
VueJSのカウントアップを作成する。

↓↓↓実際に動かした動画
https://twitter.com/nonnonkapibara/status/1185650513469038592
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🍬Vue.js🍬<br>Vue CLI（v4.0.4） でVue.js作って、<br>Firebase(FirebaseHosting) にデプロイしてみたよぉ🤩<br><br>【Vue.js】カウントアップ（Firebase・Vue CLI v4.0.4）<a href="https://t.co/W7sWcleX4A">https://t.co/W7sWcleX4A</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/Firebase?src=hash&amp;ref_src=twsrc%5Etfw">#Firebase</a> <a href="https://t.co/ajUgvvvoSZ">pic.twitter.com/ajUgvvvoSZ</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185650513469038592?ref_src=twsrc%5Etfw">October 19, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>


先に、プロジェクトを作成する。
詳細は、下記に記載しています。

【Vue.js】FirebaseプロジェクトでVue CLI v4.0.4を作成する（Firebase・Vue CLI v4.0.4）
https://qiita.com/nonkapibara/items/6146106c524b652f49db


# ファイル構成
<img width="381" alt="045.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/1613894e-4b08-d5d9-4ced-fb45f5860da4.png">

# ①App.vue

<img width="673" alt="046.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/7ea5003f-b8aa-5db9-8775-5cbcf489f60f.png">

```
<template>
  <div id="app">
    <div id="nav">
      <router-link to="/">Home</router-link> |
      <router-link to="/about">About</router-link> |
      <router-link to="/halloween">Halloween Count UP</router-link>
    </div>
    <router-view/>
  </div>
</template>
```

# ②halloween_btn.png

<img width="532" alt="048.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/c30a4001-1731-16b7-50a5-96e75dd5d16e.png">

# ③ router - index.js

<img width="639" alt="049.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/19365026-5d88-a0b1-6ffa-cb737c933661.png">

```
    {
      path: '/halloween',
      name: 'halloween',
      // Count up Page
      component: () => import('../views/HalloweenCountUp.vue')
    }
```

# ④ store - index.js

<img width="674" alt="050.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/4d64a887-3188-804e-d221-cabbaacd41e2.png">


```
import Vue from 'vue'
import Vuex from 'vuex'

Vue.use(Vuex)

export default new Vuex.Store({
  state: {
    countNumber: 0
  },
  mutations: {
    countup(state)
    {
      state.countNumber++
    }
  },
  actions: {
    countup: ({ commit }) => {
      setTimeout(() =>{
        commit('countup')
      }, 5000)
    }
  }
})

```

# ⑤ views - HalloweenCountUp.vue

```
<template>
  <div class="halloween">
    <center>
			<div class="titleStyle">CLI Vue.js カウントアップ</div>
			<div class="sytle001">{{$store.state.countNumber}}回</div><br>
      <img v-on:click="click_count_up" type="image" class="halloweenButton" src="../assets/halloween_btn.png">
    </center>
  </div>
</template>

<script>
export default {
  methods: {
    click_count_up() {
      this.$store.commit("countup");
    }
  }
};
</script>
```

<img width="872" alt="051.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ab77e500-2a3f-7b39-f78c-393597fa366d.png">

# ビルドする
```
npm run build
```

ビルド成功
<img width="700" alt="037.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/f4346500-2f42-cc32-37fa-fa31db76cfd1.png">

プロジェクトを起動する

```
npm run serve
```

<img width="411" alt="038.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/6bd95f97-4f85-237f-eda2-6627c61dcedf.png">

起動成功

<img width="537" alt="039.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/5ece0300-2a8b-d177-b10a-7867932dbd1d.png">

TOP表示OK

<img width="824" alt="040.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/06feeb2e-69e5-3542-68ea-250d5000096c.png">

カウントアップ画面表示OK

<img width="987" alt="041.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/ee0d2389-4a13-3f53-951f-70fd3d646f69.png">

# firebase のデプロイ

```
firebase deploy
```

デプロイ成功

<img width="680" alt="042.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/99783bcc-4665-02a2-969b-4cb6349b9593.png">

Firebase TOP表示OK

<img width="823" alt="043.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/b0a1d10b-9ad6-05fb-c2a5-cc730dab1689.png">

カウントアップ画面表示OK

<img width="765" alt="044.png" src="https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/93155/e1219739-3143-6b7c-c838-a73c1f868390.png">


完成！！

<br>
<blockquote class="twitter-tweet"><p lang="ja" dir="ltr">🎬Vue.js🎬<br>YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル<br>作ってみたよぉ。<br>Vue CLI（v4.0.4） Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡<br>ちゃんと動いたよぉ😍<a href="https://t.co/y7hw3zHRlI">https://t.co/y7hw3zHRlI</a><a href="https://twitter.com/hashtag/Vue?src=hash&amp;ref_src=twsrc%5Etfw">#Vue</a> <a href="https://twitter.com/hashtag/vuejs?src=hash&amp;ref_src=twsrc%5Etfw">#vuejs</a> <a href="https://twitter.com/hashtag/firebase?src=hash&amp;ref_src=twsrc%5Etfw">#firebase</a> <a href="https://t.co/C5zCM6n78R">pic.twitter.com/C5zCM6n78R</a></p>&mdash; non (@nonnonkapibara) <a href="https://twitter.com/nonnonkapibara/status/1185956946630692864?ref_src=twsrc%5Etfw">October 20, 2019</a></blockquote> <script async src="https://platform.twitter.com/widgets.js" charset="utf-8"></script>