はじめに

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アーカイブ操作を有効化して再度実行してください。

php.ini

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スカフォールド

アプリ作成手順