【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 카운트업을 만듭니다.

↓↓↓ 실제로 움직인 동영상
htps : // 라고 해서 r. 코m/논온카 피바라/s타츠 s/1185650513469038592

🍬Vue.js🍬Vue CLI(v4.0.4) 로 Vue.js 만들어 Firebase(FirebaseHosting)에 배포해 보았어요 🤩【Vue.js】카운트업 htps // t. 코 / W7sWc × X4 #Vue — non (@nonnonkapibara) #vuejs


먼저 프로젝트를 만듭니다.

자세한 내용은 아래에 설명되어 있습니다.



【Vue.js】Firebase 프로젝트에서 Vue CLI v4.0.4 만들기(Firebase · Vue CLI v4.0.4)

#Firebase



파일 구성



피 c. 라고 r. 코 m / 아쥬 g ゔ ぉ SZ



①App.vue



10월 19, 2019



<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



htps : // 이 m/논카피바라/있어 ms/6146106c524b652f49db



③ 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





카운트업 화면 표시 확인





firebase 배포



firebase deploy


배포 성공





Firebase TOP 보기 확인





카운트업 화면 표시 확인





완성! !






<script async=""src="https://platform.twitter.com/widgets.js"/>

좋은 웹페이지 즐겨찾기