- 追加された行はこの色です。
- 削除された行はこの色です。
#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>)
![[PukiWiki]](image/pukiwiki.png "[PukiWiki]")
