②SpringBootプロジェクトにVue.jsを追加する方法 【Vue.js+SpringBootでアプリケーション作成】

SpringBootプロジェクト作成方法

下記をご覧ください。
①SpringBootプロジェクト作成方法 【Vue.js+SpringBootでアプリケーション作成】

ディレクトリ構造

Vue.jsの追加

1. コマンドプロンプトでSpring Bootプロジェクトの配下に移動

> cd .\twitterbot\  

Spring Boot プロジェクト外の場合、cd Spring Bootプロジェクトのパスでディレクトリを移動できます。

1. Vue.jsを追加

> vue create web

vue create　作成したいディレクトリ名　
で作成できます。
3. Vue.js のversionを選択

Default ([Vue 3] babel, eslint)を選択します。

Vue.jsプロジェクトの追加ができました。

4. Vue.jsのビルド設定
ソースフォルダにあるpackage.jsonを編集します。
「scripts」に「build」の値に「 --dest ../src/main/resources/static」を追加。

5. Vue.jsのビルド
コマンドプロンプトの「cd」コマンドで、作成したVue.jsのソースフォルダに移動します。
「cd web」
「npm run build」コマンドでビルドします。

6. 実行
「Run」ボタンで実行します。

7. http://localhost:8080/index.html
Spring　Boot起動後、
「http://localhost:8080/index.html」
を開く。

SpringBootプロジェクトでVue.jsの起動ができました。