Laravel8にVue.jsをインストールする手順の備忘録です。
プロジェクトは既に作ってある前提で進めます。
（因みに、参考にさせてもらったのは、以下のサイトさんです！ありがたや～！(人''▽｀)☆ こちらでの情報を元に、所々追加・簡略化して記載しています。）
環境：XAMPP
手順1： まずは、ターミナルでlaravel/uiパッケージをインストールします。
composer require laravel/ui
手順2： 次に、Vue.jsをインストールします。
--authもつけると認証機能もつくけど、laravel/uiパッケージの古いバージョンの認証機能になりますよね。。。
php artisan ui vue
手順3： ビルドします。
npm install && npm run dev
☆おまけ。☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
ここでビルドした時に、
『npm ERR! Failed at the @ dev script.』
『npm ERR! This is probably not a problem with npm. There is likely additional logging output above.』
というエラーが出ました。
他には、『Additional dependencies must be installed. This will only take a moment.』とか。。。
色々ググってみると、どうやらPackage.jsonの書き方がダメなようで。。。
↓↓こちらの記事を参考に、以下のコマンドを連続して実行したら、解消されました！Package.jsonのバージョンを最新にすれば良いそうです。
$ npm install --save-dev webpack@latest
↓
$ npm install webpack-cli -D
↓
$ npm install --save-dev webpack-dev-server@latest
↓
$ npm install vue-loader@latest
☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆☆
手順4： \resources\views\welcome.blade.php の中身を、以下のように書き換えます。
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Document</title>
</head>
<body>
<div id="app">
<example-component></example-component>
</div>
<script src="{{ mix('/js/app.js') }}"></script>
</body>
</html>
これで、ターミナルで『php artisan serve』とすると、以下画像のように表示されて、使えていることがわかります。
手順としては以上です。
ちょこっと解説すると、
まず、laravel/uiパッケージは、resources/js/componentsというディレクトリを新しく作ります。自分で新しくVueコンポーネントを作るときは、ここに追加していきます。
（サンプルとして、ExampleComponent.vueファイルがインストール時点で既に作られています。）
次に、新しくVueコンポーネントファイルを作ったら、resources/js/app.jsファイルに登録する必要があります。
resources/js/app.jsファイルの中身を見てみると、22行目に既にExampleComponent.vueが設定されているのがわかります。自分で新しく作った時は、ここに同じように追記していく形となります。
// 22行目
Vue.component('example-component', require('./components/ExampleComponent.vue').default);
以上です。