作っていく環境

Laravel9
Breeze 1.9
Inertia 1.0
PHP8.0以上
apache
MySQL(mariaDB)
Vue.js3 CompositionAPI
XAMPP 3.3.0
windows11
composer 2.5.2

CompositionAPI

VueJS3から搭載。Vue2に比べてscript あたりの書き方がかなり変化があったようです。

Vue2は基本的なことだけをざっくりとしか触ったことがないので、あまり詳細が分からないのですが、Vue2は今年の12月でサポート終了するので、わざわざ触らなくてもいいかなーと。

公式のも書いてあります。

調べただけですが書き出し↓
Vue2のメリット
・慣れなくても見やすく、書きやすい
・ロジックをまとめて書ける
・コードが散らない

Lravel

公式マニュアル

task_teskは好みのプロジェクト名に置き換えてください。
※Laravel9はPHP8.0以上にしか対応していません。

composer create-project "laravel/laravel=9.*" task_test --prefer-dist

インストールが完了したら、作成したプロジェクトフォルダに移動して、簡易サーバーを立ち上げて動作確認をします。

php artisan serve

Laravelの画面が表示されればOKです。

Laravel初期設定

DB

XAMPPを起動し、MySQLのAdminを開きます。

新規作成より新しいデータベースを生成し、このデータベースを操作できるユーザーも新規追加します。

権限を開こうとしたらエラーがでました。

雑ですが過去にこのエラーの解決方法を記載しました。

解決できたらユーザーアカウントを追加するを押します。

ログイン情報に好みで以下2点を記入します。
・ユーザ名
・パスワード

ユーザアカウント専用データベースで、全ての権限を与えるに✓。
最後に実行を押し、完了です。

次に.envファイルをいじります。

↓この部分を作成したユーザアカウントと全く同じ情報に書き換えてください。

コマンドを実行します。

php artisan migrate

テーブルが自動生成されます。

Adminからも確認できます。

デバックバー

インストールコマンド

composer require barryvdh/laravel-debugbar

composer.jsonに追記されているか確認。

画面からも確認。

これで問題ないです。

Breeze/Inertia

Inertiaとは
サーバー側のフレームワークの機能を活かしながら、SPAを作るためのライブラリ。
Reactにも対応。

公式

公式(Breezeのインストールについて)

インストールコマンド

composer require laravel/breeze --dev

エラーがた場合はcomposerのupdateを行って再度コマンドを実行してください。

composer update

無事に実行できたようです。

次に下記コマンドを実行。

php artisan breeze:install vue

成功しました。

npmをインストールし、コンパイルするためのコマンドを実行。

npm install
npm run dev

Viteですが以前はwebpackが使われていたそうです。
処理が速いのでiteに変更になりました。
webpackの詳しいことはわかりません。

composer.jsonとpackege.jsonにinertiaとbreegzeが追記されているか確認。

2023年1月以降、Inertia ver1.0に伴い、以前とインストールされるライブラリが変更になったようなので、package.jsonに下記を追記(個人の自由)。

"@inertiajs/inertia":"^0.11.0"
"@inertiajs/inertia-vue3":"^0.6.0"

app.jsファイルも変更
変更前

resources/js/app.js

import{ createInertiaApp ) form '@inertiajs/vue3';

↓
変更後

resources/js/app.js

import{ createInertiaApp ) form '@inertiajs/inertia-vue3';

追加のライブラリのインストール

npm install

簡易サーバーが立ち上がればOKです。

便利な拡張機能の紹介

GoogleChrome

Vue.js devtools 6.5.0

VSCode

Volar

・Dracula
・aravel Extra Intelisense
・Tailwind CSS IntelliSense