लेख

Vue.js 3 सँग Laravel कसरी प्रयोग गर्ने

Vue.js वेब इन्टरफेसहरू र एकल पृष्ठ अनुप्रयोगहरू सिर्जना गर्नका लागि सबैभन्दा धेरै प्रयोग हुने JavaScript फ्रेमभोर्कहरू मध्ये एक हो, Laravel सँगसँगै यो एक धेरै शक्तिशाली विकास उपकरण बन्छ।

वेब एप्सको विकासको लागि, एक व्यापक रूपमा प्रयोग गरिएको उपकरण हो vuejs, र यस लेखमा हामी यसलाई Laravel सँग कसरी स्थापना र प्रयोग गर्ने भनेर हेर्नेछौं। Vue.js फ्रेमवर्क थियो defiनिटो प्रगतिशील फ्रेमवर्क किनभने यो एचटीएमएल दृश्यहरू सिर्जना गर्नमा विशेष छ, र तपाईंलाई सजिलैसँग अन्य पुस्तकालयहरू र परियोजनाहरूका कम्पोनेन्टहरूसँग एकीकृत गर्न अनुमति दिन्छ।

Vue.js को सफलता पनि को छनौट को कारण हो Laravel यसलाई फ्रन्टएन्ड फ्रेमवर्कको रूपमा सुझाव दिन, यसरी संस्करण 2.0 को रिलीजको लागि अग्रणी।

Tabella dei su Facebook

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 लाई विकास निर्भरता मध्ये एकको रूपमा स्थापना गर्नेछ। सम्पत्तिहरू कम्पाइल गरेपछि, तपाईंको उत्पादन 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 con id "vue-app"। स्क्रिप्ट तत्व भित्र हामीले Vue को एक उदाहरण सिर्जना गरेका छौं, जहाँ हामी कन्स्ट्रक्टरलाई एउटा वस्तु पास गर्छौं जसले हामीलाई अनुमति दिन्छ। defiहाम्रो केसमा डाटा र व्यवहार जस्ता केही अनुप्रयोग प्यारामिटरहरू निश गर्नुहोस्:

el: तत्वको सन्दर्भ div defihtml मा समाप्त भयो
मिति: डाटासेट

वस्तु बन्ने बित्तिकै, Vue प्राप्त गर्दछ div con 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

तपाइँ पनि रुचि हुन सक्छ ...