Vue.js 3 سان Laravel ڪيئن استعمال ڪجي

Vue.js ويب انٽرفيس ۽ سنگل پيج ايپليڪيشن ٺاهڻ لاءِ سڀ کان وڌيڪ استعمال ٿيندڙ JavaScript فريم ورڪ مان هڪ آهي، Laravel سان گڏ اهو هڪ تمام طاقتور ڊولپمينٽ ٽول بڻجي ٿو.

ويب ايپس جي ترقي لاء، هڪ وڏي پيماني تي استعمال ٿيل اوزار آهي vuejs، ۽ هن آرٽيڪل ۾ اسين ڏسندا سين ته ڪيئن انسٽال ڪجي ۽ ان کي Laravel سان استعمال ڪجي. Vue.js فريم ورڪ هو definito ترقي پسند فريم ورڪ ڇاڪاڻ ته اهو HTML نظارن جي تخليق ۾ خاص آهي، ۽ توهان کي آساني سان ٻين لائبريرين ۽ منصوبن جي اجزاء سان ضم ڪرڻ جي اجازت ڏئي ٿو.

Vue.js جي ڪاميابي پڻ جي چونڊ جي سبب آهي Laravel ان کي فرنٽ اينڊ فريم ورڪ جي طور تي تجويز ڪرڻ لاءِ، اهڙيءَ طرح ورجن 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 جو هڪ مثال ٺاهيو آهي، جتي اسان تعمير ڪندڙ ڏانهن منتقل ڪريون ٿا جيڪو اسان کي اجازت ڏئي ٿو. defiڪجھ ايپليڪيشن پيٽرولر، جهڙوڪ ڊيٽا ۽ رويي، اسان جي صورت ۾:

• el: عنصر جو حوالو div defihtml ۾ ختم ٿيو
• تاريخ: ڊيٽا سيٽ

جيئن ئي شئي پيدا ٿئي ٿي، 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 ڪوڊ کي گڏ ڪندو ۽ ان کي پيداوار جاوا اسڪرپٽ فائل ۾ بنڊل ڪندو. فنڪشن هڪ اعتراض قبول ڪري ٿو جتي توهان ڪري سگهو ٿا 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!, جي ڪري Vue.js مثال سان گڏ هڪ HTML عنصر تي نصب ڪيو پيو وڃي id app.

استعمال ڪندي پنھنجي ايپليڪيشن کي هلائي php artisan serve، ۽ ان کي کوليو پنهنجي پسنديده برائوزر ۾.

Ercole Palmeri

توهان شايد ان ۾ به دلچسپي رکو ٿا ...

• Laravel ۾ سروس فراهم ڪندڙ: اهي ڇا آهن ۽ Laravel ۾ سروس فراهم ڪندڙ ڪيئن استعمال ڪجي
• توهان جي ڪمپيوٽر تي ChatGPT مقامي طور تي ڪيئن انسٽال ڪجي
• مائڪروسوفٽ پروجيڪٽ ۾ گينٽ پروجيڪٽ جي ڇپائي کي ڪئين ترتيب ڏني ويندي
• سافٽ ويئر انجنيئرنگ ۾ فريم ورڪ ڇا آهي، defiفريم ورڪ جي تعريف ۽ قسم
• هتي اچي ٿو پهرين ڊجيٽل سان گڏ blockchain