ويب ايپس جي ترقي لاء، هڪ وڏي پيماني تي استعمال ٿيل اوزار آهي vuejs، ۽ هن آرٽيڪل ۾ اسين ڏسندا سين ته ڪيئن انسٽال ڪجي ۽ ان کي Laravel سان استعمال ڪجي. Vue.js فريم ورڪ هو definito ترقي پسند فريم ورڪ ڇاڪاڻ ته اهو 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
.
جڏهن ختم ٿي وڃي ته سڀ ڪجهه ٺيڪ ڪم ڪري، توهان هن وانگر ڪجهه ڏسندا:
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 جو هڪ مثال ٺاهيو آهي، جتي اسان تعمير ڪندڙ ڏانهن منتقل ڪريون ٿا جيڪو اسان کي اجازت ڏئي ٿو. defiڪجھ ايپليڪيشن پيٽرولر، جهڙوڪ ڊيٽا ۽ رويي، اسان جي صورت ۾:
div
defihtml ۾ ختم ٿيوجيئن ئي شئي پيدا ٿئي ٿي، 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 ڪوڊ کي گڏ ڪندو ۽ ان کي پيداوار جاوا اسڪرپٽ فائل ۾ بنڊل ڪندو. فنڪشن هڪ اعتراض قبول ڪري ٿو جتي توهان ڪري سگهو ٿا 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
توهان شايد ان ۾ به دلچسپي رکو ٿا ...
ڪيٽينيا پولي ڪلينڪ ۾ ايپل ويزن پرو ڪمرشل ناظر استعمال ڪندي هڪ چشمي جو آپريشن ڪيو ويو…
رنگ سازي ذريعي سٺي موٽر صلاحيتن کي ترقي ڪرڻ ٻارن کي وڌيڪ پيچيده صلاحيتن لاء تيار ڪري ٿو جهڙوڪ لکڻ. رنگ ڏيڻ…
بحري شعبي هڪ حقيقي عالمي معاشي طاقت آهي، جيڪا 150 بلين مارڪيٽ جي طرف نيويگيٽ ڪئي آهي ...
گذريل سومر، فنانشل ٽائمز OpenAI سان هڪ ڊيل جو اعلان ڪيو. ايف ٽي پنهنجي عالمي سطح جي صحافت کي لائسنس ڏئي ٿو ...