توی این پست روش آماده‌سازی پروژه‌ی فول‌استک لاراول ۸ رو آموزش دادم.
اما توی نسخه‌ی ۹ ابزار Vite جایگزین Laravel Mix شده و روش آماده‌سازی اون متفاوت شده.
توی این پست می‌خوام مراحل آماده‌سازی پروژه‌ی فول‌استک لاراول ۹ رو به همراه فریمورک Vue برای فرانت‌اند و ابزار TailwindCSS برای نوشتن استایل‌های بهتر رو آموزش بدم. امیدوارم مورد پسند قرار بگیره.
ابتدا باید یک پروژه‌ی جدید لاراول ۹ ایجاد کنیم:
laravel new laravel9-fullstack
و وارد دایرکتوری پروژه می‌شیم:
cd laravel9-fullstack
بعد پکیج laravel/ui رو نصب میکنیم:
composer require laravel/ui
بعد به کمک دستور زیر تنظیمات پیشفرض Vue رو اعمال میکنیم:
php artisan ui vue
و بعد دستور زیر رو وارد میکنیم که پکیج‌های npm نصب بشن:
npm i
بعد با وارد کردن دستور زیر tailwindcss رو نصب میکنیم:
npm install --save-dev tailwindcss
و دستور زیر رو وارد میکنیم که فایل کانفیگ tailwind.config.js به پروژه اضافه بشه:
npx tailwindcss init -p
حالا محتویات فایل vite.config.js موجود در ریشه‌ی پروژه رو به شکل زیر تغییر میدیم:
حالا فایل tailwind.config.js موجود در ریشه‌ی پروژه رو باز میکنیم و اون رو به شکل زیر تغییر میدیم:
اگر به عکس بالا دقت کنید میخوایم یک پوشه‌ی جدا برای قسمت frontend پروژه ایجاد کنیم و فایل‌های مربوط به فرانت‌اند رو در اون قرار بدیم.
خب حالا یک پوشه در root پروژه با اسم frontend ایجاد میکنیم.
در مرحله‌ی بعد پوشه‌ی css و محتویات پوشه‌ی js موجود در پوشه‌ی resources رو به پوشه‌ی frontend منتقل میکنیم.
سپس فایل frontend/css/app.css رو باز میکنیم و محتویات زیر رو در اون می‌نویسیم:
پوشه‌ی sass موجود در پوشه‌ی resources رو هم نیاز نداریم و اون رو حذف میکنیم.
حالا باید چند تا فایل جدید ایجاد کنیم:
اولین فایل توی مسیر frontend/components با نام components.js و با محتویات زیر:
و توی این فایل کامپوننت‌های Vue رو register میکنیم که در سراسر اپ در دسترس باشن.
بعد فایل App.vue در مسیر frontend/views با محتویات زیر ایجاد میکنیم:
و در انتها محتویات فایل frontend/app.js رو به شکل زیر تغییر میدیم:
خب حالا باید یک route در فایل routes/web.php به شکل زیر ایجاد کنیم:
و پس از این کار محتوای فایل resources/views/welcome.blade.php رو هم به شکل زیر تغییر میدیم:
در این مرحله کارهای مورد نیاز اولیه رو انجام دادیم و فقط کافیه دستور زیر رو برای بیلد کردن فایل‌های فرانت‌اند وارد کنیم:
npm run dev
و حالا می‌تونیم با دستور زیر پروژه‌مون رو serve کنیم و خروجی کارمون رو در مرورگرمون ببینیم:
php artisan serve
امیدوارم این مطلب به کارتون بیاد و اگر سوالی در همین مورد داشتید می‌تونید از قسمت نظرات بپرسید.
