Vue.jsをnpmでインストールして、<script>で読み込む
package.jsonの配置されているディレクトリへ移動し、npmでインストールする
npm install vue
HTMLへの読み込み
<script src="/CrudBaseBulk2/public/node_modules/vue/dist/vue.global.prod.js"></script>
distディレクトリの各ビルドを説明
Vue.jsのdistディレクトリ内にはいくつかのビルド形式があり、それぞれ異なる目的や環境で使用されます。以下は、主要なビルド形式とその一般的な使用ケースです。
CommonJSビルド（サーバーサイドやツールで使用）
vue.cjs.js: 開発環境でのCommonJSビルド。
vue.cjs.prod.js: 本番環境でのCommonJSビルド（最適化済み）。
ESM（ECMAScriptモジュール）ビルド
vue.esm-bundler.js: バンドラ（WebpackやRollupなど）とともに使うためのESMビルド。
vue.runtime.esm-bundler.js: 上記のランタイム限定版。テンプレートコンパイラは含まれていません。
グローバルビルド（<script>タグで直接ブラウザに読み込む）
vue.global.js: 開発環境でのグローバルビルド。
vue.global.prod.js: 本番環境でのグローバルビルド（最適化済み）。←基本的にはこちらを使うことになると思います。
ブラウザのESMビルド（type="module"を使用する場合）
vue.esm-browser.js: 開発環境でのブラウザESMビルド。
vue.esm-browser.prod.js: 本番環境でのブラウザESMビルド（最適化済み）。
ランタイム限定ビルド
これらのビルドは、テンプレートコンパイラが含まれていません。したがって、これらのビルドを使用する場合は、Vueテンプレートを事前にコンパイルするか、レンダリング関数を直接使用する必要があります。
vue.runtime.global.js: 開発環境でのランタイム限定グローバルビルド。
vue.runtime.global.prod.js: 本番環境でのランタイム限定グローバルビルド（最適化済み）。
TypeScript定義
vue.d.ts, vue.d.mts: TypeScriptでVue.jsを使用する際に利用する型定義ファイル。
選択するビルドは、プロジェクトの必要性や環境に依存します。
たとえば、Webpackを使用している場合は、vue.esm-bundler.jsが一般的に推奨されます。直接ブラウザでVue.jsを読み込む場合は、vue.global.js（開発）またはvue.global.prod.js（本番）を使用することが多いでしょう。