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

8306 ワード
Firebase Vue.js vue-cli FirebaseHosting Vue.js テキストリンク

環境メモ
⭐️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

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

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

ファイル構成

①App.vue

<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

③ router - index.js

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

④ store - index.js

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>

ビルドする

npm run build

ビルド成功

プロジェクトを起動する

npm run serve

起動成功

TOP表示OK

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

firebase のデプロイ

firebase deploy

デプロイ成功

Firebase TOP表示OK

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

完成！！