آماده‌سازی یک پروژه فول‌استک لاراول + VueJS و TailwindCss

این نوشته برای نسخه‌های 8 لاراول و قبل از آن تهیه شده است. در نسخه‌ی 9 ابزار Vite اضافه شده که روش آماده‌سازی آن متفاوت از آموزش زیر است.

برای نسخه‌ی ۹ این پست رو ببینید.

سلام.

امروز میخوام کاری که خودم برای آماده‌سازی یک پروژه فول‌استک لاراول (Laravel و VueJS به همراه TailwindCss) انجام میدم رو قدم به قدم آموزش بدم امیدوارم به دردتون بخوره و چیزی ازش یاد بگیرید.

ابتدا و قبل از هر کاری یک پروژه جدید لاراولی رو به کمک دستور زیر ایجاد می‌کنیم:

laravel new laravel-fullstack-sample

بعد در اولین قدم پکیج laravel/ui رو نصب می‌کنیم:

composer require laravel/ui

بعد به کمک دستور زیر تنظیمات پیشفرض Vue رو اعمال می‌کنیم:

php artisan ui vue

و در مرحله‌ی بعد دستور زیر رو برای نصب کردن نیازمندی‌های فرانت‌اند وارد می‌کنیم:

npm install

بعد با وارد کردن دستور زیر tailwindcss رو نصب می‌کنیم:

npm install --save-dev tailwindcss

سپس توی root پروژه فایل webpack.mix.js رو باز می‌کنیم و تغییرات زیر رو در اون اعمال میکنیم:

اگر به عکس بالا دقت کنید میخوایم یک پوشه‌ی جدا برای قسمت frontend پروژه ایجاد کنیم و فایل‌های مربوط به فرانت‌اند رو در اون قرار بدیم.

خب حالا یک پوشه در root پروژه با اسم frontend ایجاد می‌کنیم.

در مرحله‌ی بعد پوشه‌ی css و محتویات پوشه‌ی js موجود در پوشه‌ی resources رو به پوشه‌ی frontend منتقل می‌کنیم.

سپس فایل frontend/css/app.css رو باز می‌کنیم و محتویات زیر رو در اون می‌نویسیم:

پوشه‌ی sass موجود در پوشه‌ی resources رو هم نیاز نداریم و اون رو حذف میکنیم.

در نهایت ساختار دو پوشه‌ی resources و frontend باید به این شکل در بیاد.

حالا باید چند تا فایل جدید ایجاد کنیم:

اولین فایل توی مسیر frontend/components با نام components.js و با محتویات زیر:

و توی این فایل کامپوننت‌های Vue رو register می‌کنیم که در سراسر اپ در دسترس باشن.

بعد فایل App.vue در مسیر frontend/views با محتویات زیر ایجاد می‌کنیم:

و در انتها محتویات فایل frontend/app.js رو به شکل زیر تغییر میدیم:

خب حالا باید یک route در فایل routes/web.php به شکل زیر ایجاد کنیم:

و پس از این کار محتوای فایل resources/views/welcome.blade.php رو هم به شکل زیر تغییر میدیم:

در این مرحله کارهای مورد نیاز اولیه رو انجام دادیم و فقط کافیه دستور زیر رو برای بیلد کردن فایل‌های فرانت‌اند وارد کنیم:

npm run watch

و حالا می‌تونیم با دستور زیر پروژه‌مون رو serve کنیم و خروجی کارمون رو در مرورگرمون ببینیم:

php artisan serve

امیدوارم این مطلب به کارتون بیاد و اگر سوالی در همین مورد داشتید می‌تونید از قسمت نظرات بپرسید.