سلام اگه میخوای بدونی که چطوری میتونی با استفاده از ابزار فوق العاده 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', ]), ], });
کامپایل کردن assets
خب باید حالا vite رو توی حالت develop اجرا کنیم. برای این کار دستور زیر را وارد کنید:
npm run dev
با اجرا این دستور برنامه اجرا میشه و ولی شما به آدرس localhost:3000 دسترسی ندارید و فقط فایل های js,css فراخوانی میشن براتون و در عمل چیزی نمیبینید چون هنوز برنامه vue رو ایجاد نکردیم.
ساخت اپلیکیشن vue
در resources/js/app.js یک نمونه از vue 3 ایجاد کنید ابتدا {createApp} را از ‘vue’ وارد کنید و createApp را وارد کنید. در اینجا یک پارامتر میگیره که ما App را پاس کردهایم. قبل از اون، می تونید یک فایل vue ایجاد کنید که فایل اصلی برنامه ماس و اسمش رو App.vue بذارید.
// app.js require('./bootstrap'); import {createApp} from 'vue' import App from './App.vue' createApp(App).mount("#app")
ساخت کامپوننت برای vue
خب حالا که برنامه vue خودمون رو ساختیم دیگه باید بریم سراغ ساخت اولین کامپوننت برناممون. خب توی مرحله قبلی گفتم که میتونید ی فایل app.vue ایجاد کنید و برنامه vue رو بهش متصل کنید که این فایل میشه فایل اصلی ما و حالا شما میتونید این فایل رو باز کنید و به طور مثال کد زیر رو داخلش قرار بدین که میشه اولین کامپوننت شما.
<template> Hello vue 3 </template>
ی نکته ای که باید بگم اینه که شما میتونید بقیه کامپوننت هاتون رو هم در همین مسیر ایجاد کنید و بقیه پروژه های vue خودتون اینجا عمل کنید.
اتصال کامپوننت vue به blade لاراول
خب همونطور که میدونید ما نمیتونیم همینطوری فقط داخل لاراول از vue استفاده کنید و باید این دوتارو به هم وصل کنیم دیگه. برای اینکار ما باید کامپوننت vue خودمون رو به blade لاراول وصل کنیم. برای این کار در این مرحله، به دایرکتوری resource / views برید، فایل app.blade.php رو ایجاد کنید و کد زیر را به صورت زیر به app.blade.php اضافه کنید:
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <title>How To Install Vue 3 in Laravel 9 with Vite</title> <link rel="stylesheet" type="text/css" href="{{ asset('css/app.css') }}"> </head> <body> <div id="app"></div> @vite('resources/js/app.js') </body> </html>
بروزرسانی route های لاراول
routes/web.php رو باز کنید و welcome.blade.php را با فایل app.blade.php جایگزین کنید تا فایل app.blade.php جایی که کد vuejs ما اجرا میشه بارگذاری بشه.
<?php use Illuminate\Support\Facades\Route; /* |-------------------------------------------------------------------------- | Web Routes |-------------------------------------------------------------------------- | | Here is where you can register web routes for your application. These | routes are loaded by the RouteServiceProvider within a group which | contains the "web" middleware group. Now create something great! | */ Route::get('/', function () { return view('app'); });
با اینکار وقتی که پروژه لاراولی رو اجرا کنیم برنامه vue ما نمایش داده میشه?
بروزرسانی فایل .env
فایل .env رو باز کنید و APP_URL رو به روز کنید و APP_URL=http://localhost:8000 را تنظیم کنید. این کمک میکنه تا بهروزرسانیهای js و CSS رو فوراً توی مرورگرتون ببینید که منظورم همون قابلیت hot refresh
APP_URL=http://localhost:8000
اجرای پروژه
و در آخر نوبت رسید به اجرای پروژه. خب حالا شما باید دوتا صفحه ترمینال باز کنید و توی یکیشون بزنید npm run dev و توی دیگری بزنید php artisan serv و پروژه براتون روی آدرس http://localhost:8000 بالا میاد و میتونید ازش استفاده کنید. به همین سادگی.
سخن آخر
خب امیدوارم که این آموزشم براتون مفید بوده باشه و بتونید به راحتی داخل پروژه های لاراولیتون از vue استفاده کنید. اگر سوالی هم داشتین یا به خطایی خوردین این زیر واسم کامنتش کنید تا بررسیش کنیم باهم. شاد و پیروز❤️
منبع: devdojo