مقالات

نحوه استفاده از لاراول با Vue.js 3

Vue.js یکی از پرکاربردترین فریم‌ورک‌های جاوا اسکریپت برای ایجاد رابط‌های وب و اپلیکیشن‌های تک صفحه‌ای است که همراه با لاراول به یک ابزار توسعه بسیار قدرتمند تبدیل می‌شود.

برای توسعه برنامه های تحت وب، ابزار پرکاربرد vuejs است که در این مقاله نحوه نصب و استفاده از آن با لاراول را خواهیم دید. چارچوب Vue.js بود defiنیتو چارچوب مترقی زیرا در ایجاد نماهای HTML تخصصی است و به شما امکان می دهد به راحتی با اجزای کتابخانه ها و پروژه های دیگر ادغام کنید.

موفقیت Vue.js نیز به دلیل انتخاب است فریم ورک Laravel آن را به عنوان یک فریم ورک فرانت اند پیشنهاد کنید، بنابراین منجر به انتشار نسخه 2.0 می شود.

فهرست مطالب

ایجاد پروژه لاراول

اولین قدم البته ایجاد یک پروژه جدید در لاراول است. اگر در رایانه خود دارید، از آن استفاده کنید یا می توانید یک مورد جدید را فقط برای این آموزش ایجاد کنید.

composer create-project laravel/laravel guide-laravel-vue

پس از شروع پروژه، باید آن را نصب کنید npm اعتیادها برای انجام این کار، دستور زیر را در دایرکتوری پروژه خود اجرا کنید:

npm install

پس از نصب وابستگی ها، دستور زیر را اجرا کنید تا منابع را بسازید و مطمئن شوید که همه چیز واقعا کار می کند:

npm run dev

دستور npm run dev به ویژه انواع مختلفی از بررسی ها و کامپایل ها را انجام می دهد Laravel Mix فایل را کامپایل کنید resources/js/app.js و فایل resources/css/app.css در فایل ها public/js/app.js e public/css/app.css.

پس از اتمام اگر همه چیز خوب کار کند، چیزی شبیه به این را خواهید دید:

در حال نصب Vue.js

پس از آماده سازی پروژه لاراول، می توانیم به نصب Vue.js 3 اقدام کنیم. برای این کار، دستور زیر را در فهرست پروژه خود اجرا کنید:

npm install --save-dev vue

با این کار Vue.js به عنوان یکی از وابستگی های توسعه نصب می شود. پس از کامپایل کردن دارایی ها، فایل جاوا اسکریپت تولیدی شما مستقل خواهد بود، بنابراین فقط باید Vue.js را به عنوان یک وابستگی توسعه نصب کنید.

برای اطمینان از اینکه Vue 3 به درستی نصب شده است، فایل را باز کنید package.json (در ریشه پروژه موجود است) و جستجو کنید "vue" در بخش "devDependencies":

// package.json

{
    "private": true,
    "scripts": {
        "dev": "npm run development",
        "development": "mix",
        "watch": "mix watch",
        "watch-poll": "mix watch -- --watch-options-poll=1000",
        "hot": "mix watch --hot",
        "prod": "npm run production",
        "production": "mix --production"
    },
    "devDependencies": {
        "axios": "^0.21",
        "laravel-mix": "^6.0.6",
        "lodash": "^4.17.19",
        "postcss": "^8.1.14",
        "vue": "^3.2.37"
    }
}

همانطور که می بینید، شماره نسخه نشان می دهد که Vue.js 3 نصب شده است.

اولین تلاش Vue.js

در فایل welcome.blade.php کد زیر را قرار دهید:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

همانطور که می بینید ما یک عنصر ایجاد کرده ایم div با id "vue-app". در داخل عنصر اسکریپت، یک نمونه از Vue ایجاد کرده‌ایم، جایی که یک شی را به سازنده ارسال می‌کنیم که به ما اجازه می‌دهد defiبرخی از پارامترهای برنامه مانند داده ها و رفتارها را در مورد ما مشخص کنید:

el: ارجاع به عنصر div defiدر html به پایان رسید
تاریخ: مجموعه داده

به محض ایجاد شی، Vue را به دست می آورد div با id vue-app و از جایگزینی نگهدارنده مکان مراقبت می کند {{ text }} با مقدار موجود در شی داده. البته، این شی می تواند حاوی بیش از یک ویژگی باشد، حتی از انواع مختلف: اعداد، آرایه ها و سایر اشیاء تودرتو معتبر هستند.

علاوه بر این جایگزینی، Vue موتور خود را نیز فعال کرده و برنامه را پاسخگو کرده است، یعنی هر تغییری در ویژگی متن باعث به‌روزرسانی فوری عنصر مربوطه در HTML می‌شود.

تست دوم Vue.js

برای ادامه آزمایش دوم، ابتدا باید برنامه را برای ایجاد یک جزء جدید نمونه‌سازی کنید. تو باز کن resources/app.js (o resources/js/app.js) و محتوای آن را به شرح زیر به روز کنید:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

در این فایل ما در حال ایجاد یک نمونه Vue.js جدید هستیم و برای انجام این کار به یک کامپوننت Vue نیاز داریم که HelloVue.vue نامیده ایم. برای اطلاعات بیشتر به اسناد رسمی مراجعه کنید .

یک فایل جدید ایجاد کنید resources/components/HelloVue.vue و کد زیر را وارد کنید:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

فایلی که ما ایجاد کردیم یک جزء اصلی Vue.js است که چاپ می شود Hello Vue! بیا header1 در صفحه. در نهایت، را باز کنید webpack.mix.js فایل را در root پروژه قرار دهید و محتویات آن را به صورت زیر به روز کنید:

// webpack.mix.js

const mix = require('laravel-mix');

mix.js('resources/js/app.js', 'public/js')
    .vue({
        version: 3,
    })
    .postCss('resources/css/app.css', 'public/css', [
        //
    ]);

در این فایل متد فراخوانی می شود .vue() هر کد Vue.js را کامپایل کرده و در فایل جاوا اسکریپت تولیدی قرار می دهد. تابع در جایی که شما می توانید یک شی را می پذیرد defiنسخه Vue.js را که از آن استفاده می کنید را پاک کنید.

پس از ویرایش فایل webpack.mix.js باید کد جاوا اسکریپت را کامپایل کنید. برای این کار دوباره دستور را اجرا می کنیم npm run dev.

در نهایت، برای امتحان عملیاتی Vue، فایل را باز کنید resources/views/welcome.blade.php و کد زیر را وارد کنید:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Laravel Vue</title>
    <script src="{{ asset('js/app.js') }}" defer></script>
</head>
<body>
    <div id="app">
        <hello-vue />
    </div>
</body>
</html>

کد، همراه با مؤلفه ایجاد شده قبلی، یک پیام ویدیویی تولید می کند سلام Vue!، به دلیل نصب نمونه Vue.js روی یک عنصر HTML با id app.

برنامه خود را با استفاده از php artisan serveو آن را در مرورگر مورد علاقه خود باز کنید.

Ercole Palmeri

همچنین ممکن است که شما علاقه مند باشید به ...