作っていく環境
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ファイルも変更
変更前
import{ createInertiaApp ) form '@inertiajs/vue3';
↓
変更後
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