نصب 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',
        ]),
    ],
});

کامپایل کردن 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

امید در ۱۲ عملکرد مهم جاوا اسکریپت که هر توسعه دهنده وب باید بداند۲۱ اسفند ۱۴۰۱
خواهش میکنم. خوشحالم که برات مفید بوده
امیرحسین در ۱۲ عملکرد مهم جاوا اسکریپت که هر توسعه دهنده وب باید بداند۱۹ اسفند ۱۴۰۱
متد bind خیلی کاربردی بود. دمتون گرم
امید در ساخت ویجت سفارشی برای المنتور۱۴ اسفند ۱۴۰۱
منظورتون کدوم فانکشن هاست؟ توی کامنت های کد ها و توضیحات مقاله موارد رو توضیح دادم