VUE 3ベースのWebAppプロジェクトを行います.Vue.jsの基礎的な内容には触れないが、必要に応じて説明してもよい.プロジェクト作成から開発基準の策定や汎用機能の開発などWebアプリケーション開発に至るまで考慮すべき事項.しかし、まだどの範囲に整理するかは決まっていません.このプロジェクトは経験を積むためで、プロジェクトが完成すると考えが変わるかもしれません.この文章はいつでも変更できる.また、サーバの部分については詳しく説明しません.
この記事では、SpringBootプロジェクトがFont-end開発のプロジェクトを作成し、開発環境でサーバを実行し、ブラウザを開き、HelloWorld画面を表示します.

プロジェクトの作成

SpringBootAppでVUE 3を使います.SpringBootAppプロジェクトルートで、次のように入力します.

yarn create @vitejs/app vue --template vue

ディレクトリは次のように生成されます.

🗂️ project_root
  🗂️ src
     🗂️ main
        🗂️ java
  🗂️ vue

node modulesのインストール

vueディレクトリに移動します.

cd vue

「vueディレクトリ」に、必要なノードモジュールをインストールするために次の内容を入力します.

yarn install

テスト項目

糸viteを使用してアプリケーションを実行します.

yarn dev

実行後、端末は次のようにメッセージを出力します.

  vite v2.4.1 dev server running at:

  > Local: http://localhost:3000/
  > Network: use `--host` to expose

  ready in 448ms.

ブラウザを開き、次のように入力します.

http://localhost:3000/

次のように表示されます.