نصب 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@nextvue-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.jsimport { 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/