#author("2019-10-16T03:55:39+00:00","","") #mynavi(AWSメモ) #setlinebreak(on); * 目次 [#z4fb8e28] - 関連 -- [[AWSメモ]] * 概要 [#y70c87af] #html(<div style="padding-left: 10px;">) #html(</div>) * フォルダ構成 [#ce245159] #html(<div style="padding-left: 10px;">) #html(</div>) * 準備 [#l124f93f] #html(<div style="padding-left: 10px;">) #html(</div>) * Cloudformationテンプレート [#b02b96c2] #html(<div style="padding-left: 10px;">) #html(</div>) * src/index.py [#d930bf49] #html(<div style="padding-left: 10px;">) #html(</div>) * src/api/sample1.py [#za201d5e] #html(<div style="padding-left: 10px;">) #html(</div>) * src/client/* [#sd6ecad8] #html(<div style="padding-left: 10px;">) vue.js のビルド済みファイルをこの配下にコピー #html(</div>) * クライアント周りの作成 [#p47adea4] #html(<div style="padding-left: 10px;">) ** プロジェクトの作成 [#r959dd7a] #myterm2(){{ vue create client-project }} ** client-project/src/main.js [#h7b83b75] #mycode2(){{ 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 [#qa90542d] #mycode2(){{ 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 [#i111bad6] #mycode2(){{ <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 [#e9c2b819] #mycode2(){{ import Vue from 'vue' const EventHub = new Vue() export default EventHub }} #html(</div>)