1つのAWS Lambda関数でSPA（その２） のバックアップ(No.1) - 闘うITエンジニアの覚え書き

[ トップ ]   [ 一覧 | 単語検索 | 最終更新 | ヘルプ ]

vue.js のビルド済みファイルをこの配下にコピー

プロジェクトの作成 †

vue create client-project

client-project/src/main.js †

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

client-project/src/main.js †

import Vue from 'vue'
import App from './App.vue'

Vue.config.productionTip = false

new Vue({
  render: h => h(App),
}).$mount('#app')

client-project/src/App.vue †

<template>
  <div id="app">
    <Header />
    <component v-bind:is="currentView"></component>
    <Footer />
  </div>
</template>

<script>
import EventHub from './EventHub.js'
import Header from './components/Header.vue'
import PageTop from './components/PageTop.vue'
import PageSample1 from './components/PageSample1.vue'
import PageSample2 from './components/PageSample2.vue'
import Footer from './components/Footer.vue'

export default {
  name: 'app',
  components: {
    Header,
    Footer,
    PageTop,
    PageSample1,
    PageSample2,
  },
  data: function(){
    return {
      currentView: "PageTop"
    }
  },
  methods: {
    switchView(viewName) {
      this.currentView = viewName;
    }   
  },  
  created: function(){
    EventHub.$on('switchView', this.switchView)
  }
}
</script>

<style>
html, body {
  margin: 0;
}
h1 {
  margin: 0;
  font-size: 120%;
}
#header {
  padding: 2px 0;
}
#main {
  padding: 5px 10px;
}
#footer {
  position: fixed;
  padding: 5px;
  bottom: 0;
  width: 100%;
  background: #eee;
}
</style>

client-project/src/EventHub †

import Vue from 'vue'
const EventHub = new Vue()
export default EventHub