Laravel6でvue.jsを利用する

Laravel6だとvue.jsが自動で生成されないのでvue.jsを利用するための手順を記載。

環境

#cat /etc/centos-release
CentOS Linux release 7.7.1908 (Core)

Laravelプロジェクトの作成

ここではvueというプロジェクト名で作成してます

※Laravelの構築手順はこちら

## ディレクトリ作成
sudo mkdir /var/www/html/vue

## プロジェクト作成
composer create-project laravel/laravel /var/www/html/vue --prefer-dist

## 権限変更
sudo chmod 755 /var/www/html/vue

## 移動
cd /var/www/html/vue

## Laravel6起動
php artisan serve --host 0.0.0.0

とりあえず、ブラウザから http://プライベートIP:8000 にアクセスにして下記の画面が表示されることを確認

laravel/uiをインストール

公式パッケージのインストールを実行

## インストール
composer require laravel/ui

これで、下記のコマンドを実行すればVueの利用が可能になります。

※node.jsのインストールはこちら

## vue生成
php artisan ui vue

## npmを実行
npm install
npm run dev

npm install

package.jsonというファイルの記述に従い、必要なJavaScriptのパッケージをダウンロードしたりインストールするためのコマンド

npm run dev

上記で入手したものをコンパイルするためのコマンド

確認

/var/www/html/vue/resources/views内のwelcome.blade.phpに下記のコードを追加

<div id="app">
　　　<example-component></example-component>
</div>
<script src="{{mix('js/app.js')}}"></script>

ブラウザから http://プライベートIP:8000 にアクセスにして

Example Component
I’m an example component.

が表示されることを確認します