د Vue.js 3 سره Laravel څنګه وکاروئ

Vue.js د ویب انټرفیسونو او واحد پاڼې غوښتنلیکونو رامینځته کولو لپاره یو له خورا کارول شوي جاوا سکریپټ چوکاټونو څخه دی ، د لارویل سره یوځای دا خورا پیاوړی پرمختیایی وسیله ګرځیدلې.

د ویب ایپس پراختیا لپاره، په پراخه کچه کارول شوي وسیله vuejs دی، او پدې مقاله کې به موږ وګورو چې څنګه یې د Laravel سره نصب او وکاروو. د Vue.js چوکاټ و defiنیتو پرمختللی چوکاټ ځکه چې دا د HTML لیدونو په جوړولو کې تخصص لري، او تاسو ته اجازه درکوي په اسانۍ سره د نورو کتابتونونو او پروژو اجزاوو سره یوځای کړئ.

د Vue.js بریالیتوب هم د انتخاب له امله دی Laravel د مخکني چوکاټ په توګه وړاندیز کول، پدې توګه د 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.

کله چې بشپړ شي که هرڅه سم کار وکړي، تاسو به د دې په څیر یو څه وګورئ:

د 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 د پروژې په روټ کې فایل او د هغې مینځپانګې په لاندې ډول تازه کړئ:

// 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.js مثال له امله چې په HTML عنصر کې نصب شوی id app.

په کارولو سره خپل غوښتنلیک چل کړئ php artisan serve، او په خپل غوره براوزر کې یې خلاص کړئ.

Ercole Palmeri

تاسو شاید علاقه هم ولرئ ...

• په لارویل کې د خدماتو چمتو کونکي: دوی څه دي او په لارویل کې د خدماتو چمتو کونکي کارولو څرنګوالی
• ستاسو په کمپیوټر کې په ځایی ډول ChatGPT څنګه نصب کړئ
• په مایکروسافټ پروجیکټ کې د ګانټ پروژې چاپولو څرنګوالی تنظیم کړئ
• په سافټویر انجینرۍ کې چوکاټ څه شی دی، defiد چوکاټونو تعریف او ډولونه
• دلته لومړی ډیجیټل اراده راځي blockchain