Google App Engine Java スタンダード環境の Spring BootでVue.jsを利用する

Spring Boot を Google App Engine Java スタンダード環境で動作するようにして、テンプレートエンジンThymelear を適用したので、テンプレートで生成したHTMLから、Vue.js を使えるようにする。

公式ページの無料動画をさらっと見る。うん。わかりやすい。

https://jp.vuejs.org/v2/guide/

無料動画

1.Chromeに開発ツールを入れる

Chrome Web Store を検索して表示、して、Vue.js を検索、Vue.js devtool をインストール

設定から、ファイルへのURLへのアクセスを許可するをONにする。

2.静的コンテンツとして Javascriptファイルを置く

Spring Boot で静的ファイルをホストするパスを調べる。

静的コンテンツ

https://docs.spring.io/spring-boot/docs/2.1.4.RELEASE/reference/htmlsingle/

https://docs.spring.io/spring-boot/docs/2.1.4.RELEASE/reference/htmlsingle/#boot-features-spring-mvc-static-content

/src/main/resource/static でよさそう。

ここに、以下の内容の、Javascript ファイルを置く

var app = new Vue({
	el: '#app',
	data: {
		message: 'Hello Vue!'
	}
})

3.テンプレートの編集

ThymeThymeleaf で作成したテンプレートを編集

</body> の前で、上記で静的ファイルとして置いたJavascriptを読み込む
Vue.jsの開発用スクリプトを読み込む(https://jp.vuejs.org/v2/guide/ 参照)
div の id=”app” により、上記で記述した Javascript の el:=”#app” と紐づけ
data: で指定した、message と　{{message}} がリアクティブにバインディングされる

<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>Insert title here</title>
</head>
<body>
    <div id="app">
        {{message}}
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
    <!--  script src="https://cdn.jsdelivr.net/npm/vue"></script> -->
    <script src="/js/favphrase.js"></script>
</body>
</html>