2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?

More than 5 years have passed since last update.

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

Last updated at Posted at 2019-10-19

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

ファイル構成

045.png

①App.vue

046.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

048.png

③ router - index.js

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

④ store - index.js

050.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>
051.png

ビルドする

npm run build

ビルド成功
037.png

プロジェクトを起動する

npm run serve
038.png

起動成功

039.png

TOP表示OK

040.png

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

041.png

firebase のデプロイ

firebase deploy

デプロイ成功

042.png

Firebase TOP表示OK

043.png

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

044.png

完成!!


2
3
0

Register as a new user and use Qiita more conveniently

  1. You get articles that match your needs
  2. You can efficiently read back useful information
  3. You can use dark theme
What you can do with signing up
2
3

Delete article

Deleted articles cannot be recovered.

Draft of this article would be also deleted.

Are you sure you want to delete this article?