كيفية استخدام Laravel مع Vue.js 3

Vue.js هو واحد من أكثر إطارات JavaScript استخدامًا لإنشاء واجهات ويب وتطبيقات صفحة واحدة ، مع Laravel يصبح أداة تطوير قوية جدًا.

لتطوير تطبيقات الويب ، الأداة المستخدمة على نطاق واسع هي vuejs ، وفي هذه المقالة سنرى كيفية تثبيتها واستخدامها مع Laravel. كان إطار عمل Vue.js defiنيتو إطار تدريجي لأنه متخصص في إنشاء عروض HTML ، ويسمح لك بالتكامل بسهولة مع مكونات المكتبات والمشاريع الأخرى.

يرجع نجاح Vue.js أيضًا إلى اختيار لارافل لاقتراحه كإطار عمل للواجهة الأمامية ، مما يؤدي إلى إصدار الإصدار 2.0.

إنشاء مشروع Laravel

الخطوة الأولى ، بالطبع ، هي إنشاء مشروع جديد في Laravel. إذا كان لديك واحد على جهاز الكمبيوتر الخاص بك ، فاستخدمه أو يمكنك إنشاء واحد جديد لهذا البرنامج التعليمي فقط.

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

بعد تحضير مشروع Laravel ، يمكننا المتابعة لتثبيت 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 ، حيث نمرر إلى المُنشئ كائنًا يسمح لنا بذلك definish بعض معلمات التطبيق ، مثل البيانات والسلوك ، في حالتنا:

• 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 ملف في جذر المشروع وتحديث محتوياته على النحو التالي:

// 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 وتجميعه في ملف JavaScript للإنتاج. تقبل الوظيفة كائنًا حيث يمكنك ذلك definish إصدار 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

قد تكون مهتم ايضا ب ...

• مقدمو الخدمات في Laravel: ما هم وكيفية استخدام مزودي الخدمة في Laravel
• كيفية تثبيت ChatGPT محليًا على جهاز الكمبيوتر الخاص بك
• كيفية تخصيص طباعة مشروع جانت في Microsoft Project
• ما هو الإطار في هندسة البرمجيات ، defiتعريف وأنواع الأطر
• هنا تأتي الإرادة الرقمية الأولى مع blockchain