Vue.js 3 کے ساتھ Laravel کا استعمال کیسے کریں۔

Vue.js ویب انٹرفیس اور سنگل پیج ایپلی کیشنز بنانے کے لیے سب سے زیادہ استعمال ہونے والے JavaScript فریم ورکس میں سے ایک ہے، Laravel کے ساتھ مل کر یہ ایک بہت طاقتور ڈویلپمنٹ ٹول بن جاتا ہے۔

ویب ایپس کی ترقی کے لیے، وسیع پیمانے پر استعمال ہونے والا ٹول vuejs ہے، اور اس آرٹیکل میں ہم دیکھیں گے کہ اسے Laravel کے ساتھ انسٹال اور استعمال کرنے کا طریقہ۔ Vue.js فریم ورک تھا۔ defiنیتو ترقی پسند فریم ورک کیونکہ یہ ایچ ٹی ایم ایل ویوز کی تخلیق میں مہارت رکھتا ہے، اور آپ کو دوسری لائبریریوں اور پروجیکٹس کے اجزاء کے ساتھ آسانی سے ضم کرنے کی اجازت دیتا ہے۔

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 انسٹال کرنا

Laravel پروجیکٹ کی تیاری کے بعد، ہم Vue.js 3 کو انسٹال کرنے کے لیے آگے بڑھ سکتے ہیں۔ ایسا کرنے کے لیے، اپنی پروجیکٹ ڈائرکٹری میں درج ذیل کمانڈ کو چلائیں:

npm install --save-dev vue

یہ Vue.js کو ترقیاتی انحصار میں سے ایک کے طور پر انسٹال کرے گا۔ اثاثوں کو مرتب کرنے کے بعد، آپ کی پروڈکشن JavaScript فائل خود پر مشتمل ہو جائے گی، لہذا آپ کو صرف 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 defihtml میں ختم
• تاریخ: ڈیٹا سیٹ

جیسے ہی شے بنتی ہے، Vue حاصل کرتا ہے div ساتھ id vue-app اور پلیس ہولڈر کو تبدیل کرنے کا خیال رکھتا ہے۔ {{ text }} ڈیٹا آبجیکٹ کے اندر موجود قدر کے ساتھ۔ بلاشبہ، اس آبجیکٹ میں ایک سے زیادہ پراپرٹیز ہو سکتی ہیں، یہاں تک کہ مختلف اقسام کی: نمبرز، اری اور دیگر نیسٹڈ آبجیکٹ درست ہیں۔

اس تبدیلی کے علاوہ، Vue نے اپنے انجن کو بھی فعال کر دیا ہے اور ایپلیکیشن کو ریسپانسیو بنا دیا ہے، یعنی ٹیکسٹ پراپرٹی میں کوئی بھی تبدیلی ایچ ٹی ایم ایل میں متعلقہ عنصر کی فوری اپ ڈیٹ کا سبب بنے گی۔

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 فائل میں بنڈل کرے گا۔ فنکشن ایک ایسی چیز کو قبول کرتا ہے جہاں آپ کر سکتے ہیں۔ defiVue.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!کے ساتھ ایک HTML عنصر پر Vue.js مثال کے نصب ہونے کی وجہ سے id app.

استعمال کرتے ہوئے اپنی درخواست چلائیں۔ php artisan serve، اور اسے اپنے پسندیدہ براؤزر میں کھولیں۔

Ercole Palmeri

آپ کو بھی دلچسپی ہو سکتی ہے ...

• Laravel میں سروس پرووائیڈرز: وہ کیا ہیں اور Laravel میں سروس پرووائیڈرز کو کیسے استعمال کریں۔
• اپنے کمپیوٹر پر چیٹ جی پی ٹی کو مقامی طور پر کیسے انسٹال کریں۔
• مائیکرو سافٹ پروجیکٹ میں گینٹ پروجیکٹ پرنٹنگ کو کس طرح اپنی مرضی کے مطابق بنائیں
• سافٹ ویئر انجینئرنگ میں فریم ورک کیا ہے، defiتعریف اور فریم ورک کی اقسام
• یہاں پہلی ڈیجیٹل مرضی کے ساتھ آتا ہے۔ blockchain