نصب vue3 در laravel9 با استفاده از vite
سلام? اگه میخوای بدونی که چطوری میتونی با استفاده از ابزار فوق العاده vite داخل پروژه laravel خودت vue رو نصب کنی این مقاله رو تا آخر دنبال کن. بزن بریم???
خب همونطور که میدونید لاراول به تازگی نسخه ۹.۱۹ خودش رو منتشر کرد و ی تغییر اساسی داخلش داده. حالا اون تغییر چی بود؟ اینکه اومد و فایل webpack.mix.js رو به چوخ داد? و حرکتی که زد این بود که اومد با فایل vite.config.js جایگزینش کرد.
به نظر من که حرکت خیلی خفنی زدن چون vite واقعا ی ابزار خیلی خوب و باحاله که قصد دارم بعدا راجبش بیشتر توضیح بدم و شمارو با این رعد و برق (اشاره به لوگو vite) دوست داشتنی آشنا کنم.
فعلا توی این پست من این موضوع رو مد نظر میگیرم که شما با لاراول و vue آشنایین و فقط میخوام بهتون یاد بدم که چطوری vue رو با استفاده از vite به پروژه لاراولی خودتون اضافه کنید و مابقی توضیحات جاش توی این پست نیست? خب دیگه خیلی حرف زدم بریم سراغ کار خودمون
نصب vue 3 در laravel 9 با استفاده از vite
خب برای انجام این کار ما مراحل زیر رو طی میکنیم تا کارمون انجام بشه:
- نصب لاراول ۹
- نصب پکیج های npm
- نصب vue 3
- کانفیگ vite.config.js
- کامپایل کردن assets
- ساخت اپلیکیشن vue
- ساخت کامپوننت برای vue
- اتصال کامپوننت vue به blade لاراول
- بروزرسانی route های لاراول
- اجرای پروژه
خب این روند کلیه کاراییه که قراره بکنیم پس بزن بریم سراغشون و تک تک بریم جلو?
نصب لاراول ۹
خب اولین کاری که باید بکنیم اینه که ی پروژه لاراولی بسازیم. اگه اونو از قبل دارید که نیاز به انجام این مرحله نیست.
ترمینالتون رو باز کنید و دستور زیر رو داخلش تایپ کنید و کلید enter رو بزنید:
composer create-project --prefer-dist laravel/laravel:^9.0 laravel9-vue3-vite
یا اگه ابزار Laravel Installer رو روی سیستمتون به صورت سراسری نصب کردین بیاین و دستوری زیر رو وارد کنید:
laravel new laravel9-vue3-vite
خب تا اینجا پروژه ایجاد شد بریم سراغ مرحله بعد
نصب پکیج های npm
بعد از نصب پروژه لاراولی نیازه که پکیج های مورد نیاز جاوااسکریپت پروژه نصب بشن. دیگه اینو فک کنم همتون بدونید. برای این کار دستور زیر رو داخل ترمینالتون وارد کنید:
npm install
خب این کار ممکنه یکم طول بکشه پس صبر و شکیبایی به خرج بدین دوستان? بریم بعدی
نصب vue3
خب حالا که پیشنیاز هارو نصب کردین برین سراغ vue دستور زیر رو وارد کنید و enter بزنید:
npm install vue@next vue-loader@next
vue-loader ی لودر برای webpack که کمک میکنه کامپوننت های vue رو توی فایل های تکی ذخیره کنید. ی اینطور چیزیه خلاصه? خلاصه آقا نصبش کن سوال نکن?
نصب vitejs/plugin-vue
خب این مورد رو اون بالا نگفته بودم که جزو مراحله ولی اینجا گفتم بذار بگم دیگه هم حالشو نداشتم برم اون بالا اضافه کنم?
تو آخرین نسخه لاراول ۹ ی افزونه ای به نام vitejs/plugin-vue رو برای vue در لاراول نصب میکنیم. حالا این افزونه چیکار میکنه؟ میاد وابستگی های مورد نیاز برای اجرا برنامه vuejs در vite رو فراهم میکنه. vite هم ی دستور ساخته شدن برنامس که میاد کد های شمارو rollup میکنه و روی آدرس localhost:3000 اجرا میکنه و به شما قابلیت hot refresh میده. خلاصه که خوبه آقا نصبش کنید و ی جورایی پیشنیازه یعنی حتما نصبش باید کنید? اینم دستور نصبش:
npm i @vitejs/plugin-vue
یعنی حتما من باید ۱۰ خط توضیح بدم تا شما ی ابزارو نصب کنید؟ خو همون اول تا میگم نصبش کنید دیگه نخوام انقد تایپ کنم و خسته بشم.?
کانفیگ vite.config.js
خب بریم سراغ کانفیگ فایل. Vite یک module bundler برای برنامه های جاوا اسکریپت. vite.config.js را باز کنید و کد زیر را کپی و پیست کنید. ابتدا فاکتور defineConfig را از vite در بالای فایل دریافت کنید و افزونه laravel-vite را نیز وارد کنید. در اینجا plugins() مسیر فایل js و CSS را می گیرند و باندل هایی برای برنامه شما ایجاد می کنند. باید vue() را در آرایه پلاگین ها اضافه کنید.
// vite.config.js
import { defineConfig } from 'vite';
import laravel from 'laravel-vite-plugin';
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [
vue(),
laravel([
'resources/css/app.css',
'resources/js/app.js',
]),
],
});
خب برای اینجا کافیه☺️اخه من این پست رو منتشر کردم تا بفهمین ی همچین پست خوبی رو توی سایت آقای مبتدی هست و میتونید اونجا بیاین و این مطلب رو کامل بخونید. (شاید از این حرکت من ناراحت شده باشید ولی اگه دنبال یادگرفتن باشید حتما به سایت میاین و ادامش رو میخونید و اگر هم ناراحت شدین از این حرکت که معذرت میخوام☺️)
لینک مطلب توی سایت آقای مبتدی
https://mrjunior.ir/how-to-install-vue-3-in-laravel-9-with-vite/
مطلبی دیگر از این انتشارات
شروع یک چالش بزرگ – قسمت اول
مطلبی دیگر از این انتشارات
شروع یک چالش بزرگ – قسمت دوم
مطلبی دیگر از این انتشارات
۱۲ عملکرد مهم جاوا اسکریپت که هر توسعه دهنده وب باید بداند