लेख

Vue.js 3 सह Laravel कसे वापरावे

Vue.js हे वेब इंटरफेस आणि सिंगल पेज अॅप्लिकेशन्स तयार करण्यासाठी सर्वात जास्त वापरल्या जाणार्‍या JavaScript फ्रेमवॉर्कपैकी एक आहे, 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 स्थापित करत आहे

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 ने त्याचे इंजिन देखील सक्रिय केले आहे आणि ऍप्लिकेशनला प्रतिसादात्मक बनवले आहे, म्हणजे मजकूर मालमत्तेमध्ये कोणताही बदल केल्यास 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 कोड संकलित करेल आणि उत्पादन JavaScript फाइलमध्ये बंडल करेल. फंक्शन एक ऑब्जेक्ट स्वीकारते जिथे आपण करू शकता 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!, सह HTML घटकावर Vue.js इंस्टन्स आरोहित झाल्यामुळे id app.

वापरून तुमचा अर्ज चालवा php artisan serve, आणि तुमच्या आवडत्या ब्राउझरमध्ये उघडा.

Ercole Palmeri

आपल्याला कदाचित यात रस असेल ...