環境メモ
⭐️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🍬
— non (@nonnonkapibara) October 19, 2019
Vue CLI(v4.0.4) でVue.js作って、
Firebase(FirebaseHosting) にデプロイしてみたよぉ🤩
【Vue.js】カウントアップ(Firebase・Vue CLI v4.0.4)https://t.co/W7sWcleX4A#Vue #vuejs #Firebase pic.twitter.com/ajUgvvvoSZ
先に、プロジェクトを作成する。
詳細は、下記に記載しています。
【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
完成!!
🎬Vue.js🎬
— non (@nonnonkapibara) October 20, 2019
YouTubeの動画🎀APIリクエスト一覧表示🎀サンプル
作ってみたよぉ。
Vue CLI(v4.0.4) Vue.jsのaxiosでAPI通信🌏して、Firebase(FirebaseHosting) にデプロイ💡💡
ちゃんと動いたよぉ😍https://t.co/y7hw3zHRlI#Vue #vuejs #firebase pic.twitter.com/C5zCM6n78R