はじめに
Laravel（バックエンド）とVue.js（フロントエンド）を組み合わせたシステムを構築する
手順を記述します。
事前準備
以下がインストール済み・環境構築済みであること。
手順は別記事でまとめておりますので、ご参考になれば幸いです。
- PHP
- Composer
- PHPデバッグ環境構築（Xdebug・PHP Debug）
- Node.js（npmコマンドを実行できるようにするために必要）
Laravelアプリ作成手順
① プロジェクト用のディレクトリを作成
※私は「C:\work\demo」のように作成しました。
② Laravelプロジェクト作成
(1) VSCodeで①ディレクトリを開く
(2) メニューバー[ターミナル] > [新しいターミナル] でターミナルを起動
(3) プロジェクト作成コマンドを実行
ターミナルで以下コマンドを実行します。
laravelProject01部分は任意のプロジェクト名に置き換えてください。
composer create-project --prefer-dist laravel/laravel laravelProject01
これにより、プロジェクトディレクトリ「laravelProject01」が作成されます。
※ここで「The zip extension and unzip/7z commands are both missing,skipping.」エラーが
発生した場合は、C:\xampp\php\php.ini内のextension=zipのコメントを
外しZIPアーカイブ操作を有効化して再度実行してください。
extension=zip ;←コメント外す
③ Vue.jsの組み込み
(1) ③(3)で作成したプロジェクトディレクトリへ移動
cd ./laravelProject01
(2) Composer経由で「laravel/ui」をインストール
Laravel UI(laravel/ui)とはComposerパッケージの1つで、Laravelのフロントエンド用
スカフォールド（テンプレート）です。フロントエンドとしてBootstrap・Vue.js・Reactが
利用できます。
composer require laravel/ui
今回は複雑な認証機能は実装せず小規模アプリを作成するためLaravel UIを選択
しましたが、他にはLaravel BreezeやLaravel Jetstreamがあります。
これらの違いについては参考文献の記事をご覧ください。
(3) Vue.jsセットアップ
(2)Laravel UIを利用しLaravelプロジェクトにVue.jsの基本的なセットアップ（初期設定
など）を行います。
ArtisanはLaravelに組み込まれているCLIで、コマンドを提供するものです。
Laravelのコマンドは基本的にphp artisan 〇〇という形式で実行します。
php artisan ui vue
これにより、以下のようなセットアップが行われます。
(A) Vue.js関連ファイルの作成
・resources/js/app.js
・resources/js/components/ExampleComponent.vue
・ vite.config.js（ビルドツールViteの設定ファイル）
※Laravel9.2以降：Vite推奨
Laravel9.2以前：laravel-mix
(B) Vue.js関連npmパッケージの追加（resources/js/app.js）
→追加されたnpmパッケージをインストールするため、後ほどnpm installを実行
します。
(C) Bladeテンプレートファイルの作成
・resources/views/welcome.blade.php
(4) npmパッケージをインストールする
package.jsonに記述されたnpmパッケージをインストールします。
npm install
参考
事前準備
Laravelスカフォールド
アプリ作成手順