【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
파일 구성
①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
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>
<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 build
프로젝트 시작
npm run serve
시작 성공
TOP 표시 OK
카운트업 화면 표시 확인
firebase 배포
firebase deploy
firebase deploy
배포 성공
Firebase TOP 보기 확인
카운트업 화면 표시 확인
완성! !
<script async=""src="https://platform.twitter.com/widgets.js"/>🎬Vue.js🎬
YouTube 동영상 🎀 API 요청 목록 표시 🎀 샘플
만들어 보았습니다.
Vue CLI(v4.0.4) Vue.js의 axios에서 API 통신 🌏하고 Firebase(FirebaseHosting)에 배포 💡💡
제대로 움직였어 non (@nonnonkapibara)
Reference
이 문제에 관하여(【Vue.js】카운트업(Firebase・Vue CLI v4.0.4)), 우리는 이곳에서 더 많은 자료를 발견하고 링크를 클릭하여 보았다 https://qiita.com/nonkapibara/items/94a77629236796716ff4텍스트를 자유롭게 공유하거나 복사할 수 있습니다.하지만 이 문서의 URL은 참조 URL로 남겨 두십시오.
우수한 개발자 콘텐츠 발견에 전념 (Collection and Share based on the CC Protocol.)