لتطوير تطبيقات الويب ، الأداة المستخدمة على نطاق واسع هي vuejs ، وفي هذه المقالة سنرى كيفية تثبيتها واستخدامها مع Laravel. كان إطار عمل Vue.js defiنيتو إطار تدريجي لأنه متخصص في إنشاء عروض HTML ، ويسمح لك بالتكامل بسهولة مع مكونات المكتبات والمشاريع الأخرى.
يرجع نجاح Vue.js أيضًا إلى اختيار لارافل لاقتراحه كإطار عمل للواجهة الأمامية ، مما يؤدي إلى إصدار الإصدار 2.0.
الخطوة الأولى ، بالطبع ، هي إنشاء مشروع جديد في 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
.
عند الانتهاء إذا كان كل شيء يعمل بشكل جيد ، سترى شيئًا مثل هذا:
بعد تحضير مشروع 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.
ضع الكود التالي في ملف 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 بعض معلمات التطبيق ، مثل البيانات والسلوك ، في حالتنا:
div
defiانتهى في htmlبمجرد إنشاء الكائن ، Vue
يكتسب div
مع id vue-app
ويهتم باستبدال العنصر النائب {{ text }}
بالقيمة المضمنة في كائن البيانات. بالطبع ، يمكن أن يحتوي هذا الكائن على أكثر من خاصية واحدة ، حتى من أنواع مختلفة: الأرقام والمصفوفات والكائنات المتداخلة الأخرى صالحة
إلى جانب هذا الاستبدال ، قام Vue أيضًا بتنشيط محركه وجعل التطبيق مستجيبًا ، أي أن أي تغيير في خاصية النص سيؤدي إلى تحديث فوري للعنصر المقابل في HTML.
للمتابعة إلى الإصدار التجريبي الثاني ، ستحتاج أولاً إلى إنشاء مثيل للتطبيق لإنشاء مكون جديد. إفتح أنت 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
قد تكون مهتم ايضا ب ...
يعد القطاع البحري قوة اقتصادية عالمية حقيقية، وقد اتجه نحو سوق يبلغ حجمه 150 مليارًا...
أعلنت صحيفة فاينانشيال تايمز يوم الاثنين الماضي عن صفقة مع OpenAI. "فاينانشيال تايمز" ترخص صحافتها ذات المستوى العالمي...
يدفع الملايين من الأشخاص مقابل خدمات البث، ويدفعون رسوم الاشتراك الشهرية. من الشائع أنك…
سوف تستمر شركة Coveware by Veeam في تقديم خدمات الاستجابة لحوادث الابتزاز السيبراني. ستوفر Coveware إمكانات الطب الشرعي والمعالجة...