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/
/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>
4.実行
想定通り表示された。
Chrome の開発コンソールから、app オブジェクトを変更すると、即座に画面のメッセージ領域が変更される。