Spring Boot + Vue.jsのプロジェクトの作成
今回はSpring Boot + Vue.jsのプロジェクトを作成します。
この記事の手順通りに進めるだけで、Vue.jsのアプリケーションを立ち上げることができます。まずはVue.jsを体験してみましょう！
Spring Bootプロジェクトの作成
まずはSpring Bootを使ったWebプロジェクトを作成します。
Spring Initializrを使って、プロジェクトの作成を開始します。
プロジェクトの情報入力のダイアログが表示されます。
ここでは、タイプを「Gradle Project」に、パッケージングを「War」にしています。
プロジェクトの依存関係を指定します。
「Web」の「Spring Web」だけチェックして、「次へ」ボタンをクリックします。
作成するプロジェクトの確認画面が表示されます。「完了」ボタンをクリックします。
作成されたプロジェクトが表示されます。Webアプリケーションのリソースが格納される「/src/main/resources/static」フォルダにファイルがないことに注目してください。
このフォルダにVue.jsのビルド結果が格納されます。
プロジェクトのプロパティーから、ファイル・エンコードを「UTF-8」に、テキスト・ファイルの行区切り文字を「Unix」に変更します。
Vue.jsのソースをプロジェクトに追加
次に、作成したSpring BootプロジェクトにVue.jsのソースを追加します。
コマンドプロンプトの「cd」コマンドで、作成したSpring Bootプロジェクトのフォルダに移動して、「vue create」コマンドでVue.jsのソースを作成します。
「vue create」コマンドの引数に、Vue.jsのソースを作成するフォルダを指定します。ここでは「vue」フォルダを指定しています。
すると、作成するVue.jsソースのバージョン選択が表示されます。カーソルキーで選択し、Enterキーで決定です。ここでは「Vue 3」を指定しています。
Vue.jsのソースファイルの作成が始まります。作成が完了するまで待ちます。
作成が完了したら、Eclipseのプロジェクトをリフレッシュ(F5)します。すると、vueフォルダにVue.jsのソースファイル一式が作成されていることがわかります。
Vue.jsのビルド設定
Vue.jsのソースファイルをビルドすると、ビルドした結果がSpring BootのWebリソースのフォルダに格納されるようにします。
Vue.jsのソースフォルダにあるpackage.jsonを編集します。
「scripts」-「build」の値に「 -dest ../src/main/resources/static」を追加します。
コマンドプロンプトの「cd」コマンドで、作成したVue.jsのソースフォルダに移動して、「npm run build」コマンドでVue.jsのソースをビルドします。
Vue.jsのソースビルドが終わったら、Eclipseのプロジェクトをリフレッシュ(F5)します。すると、src/main/resources/staticフォルダにVue.jsのビルド結果が格納されていることがわかります。
アプリケーションの実行・確認
これまでの手順でプロジェクトの作成は完了です。いよいよ、アプリケーションを実行して動作させてみます。
といっても、Spring Bootのプロジェクトなので、実行は簡単です。Eclipseからプロジェクトを実行します。
起動ログがコンソール・ビューに表示されるので、起動が終わるまで待ちます。
起動が終わったら、Webブラウザで「http://localhost:8080/index.html」を開きます。
Vue.jsのサンプルアプリケーションの画面が表示されます。
