Vue.js ಜೊತೆಗೆ Laravel ಅನ್ನು ಹೇಗೆ ಬಳಸುವುದು 3

Vue.js ವೆಬ್ ಇಂಟರ್‌ಫೇಸ್‌ಗಳು ಮತ್ತು ಸಿಂಗಲ್ ಪೇಜ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳನ್ನು ರಚಿಸಲು ಹೆಚ್ಚು ಬಳಸಿದ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫ್ರೇಮ್‌ವರ್ಕ್‌ಗಳಲ್ಲಿ ಒಂದಾಗಿದೆ, ಲಾರಾವೆಲ್ ಜೊತೆಗೆ ಇದು ಅತ್ಯಂತ ಶಕ್ತಿಯುತವಾದ ಅಭಿವೃದ್ಧಿ ಸಾಧನವಾಗಿದೆ.

ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್‌ಗಳ ಅಭಿವೃದ್ಧಿಗಾಗಿ, ವ್ಯಾಪಕವಾಗಿ ಬಳಸಲಾಗುವ ಸಾಧನವೆಂದರೆ vuejs, ಮತ್ತು ಈ ಲೇಖನದಲ್ಲಿ ನಾವು ಅದನ್ನು Laravel ನೊಂದಿಗೆ ಹೇಗೆ ಸ್ಥಾಪಿಸಬೇಕು ಮತ್ತು ಬಳಸುವುದು ಎಂದು ನೋಡುತ್ತೇವೆ. Vue.js ಫ್ರೇಮ್‌ವರ್ಕ್ ಆಗಿತ್ತು defiನೈಟೊ ಪ್ರಗತಿಪರ ಚೌಕಟ್ಟು ಏಕೆಂದರೆ ಇದು HTML ವೀಕ್ಷಣೆಗಳ ರಚನೆಯಲ್ಲಿ ಪರಿಣತಿಯನ್ನು ಹೊಂದಿದೆ ಮತ್ತು ಇತರ ಲೈಬ್ರರಿಗಳು ಮತ್ತು ಯೋಜನೆಗಳ ಘಟಕಗಳೊಂದಿಗೆ ಸುಲಭವಾಗಿ ಸಂಯೋಜಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.

Vue.js ನ ಯಶಸ್ಸು ಕೂಡ ಆಯ್ಕೆಯ ಕಾರಣದಿಂದಾಗಿರುತ್ತದೆ laravel ಇದನ್ನು ಮುಂಭಾಗದ ಚೌಕಟ್ಟಿನಂತೆ ಸೂಚಿಸಲು, ಹೀಗಾಗಿ ಆವೃತ್ತಿ 2.0 ಬಿಡುಗಡೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ.

ಲಾರಾವೆಲ್ ಯೋಜನೆಯ ರಚನೆ

ಲಾರಾವೆಲ್‌ನಲ್ಲಿ ಹೊಸ ಯೋಜನೆಯನ್ನು ರಚಿಸುವುದು ಮೊದಲ ಹಂತವಾಗಿದೆ. ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ನೀವು ಒಂದನ್ನು ಹೊಂದಿದ್ದರೆ, ಅದನ್ನು ಬಳಸಿ ಅಥವಾ ಈ ಟ್ಯುಟೋರಿಯಲ್‌ಗಾಗಿ ನೀವು ಹೊಸದನ್ನು ರಚಿಸಬಹುದು.

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 ನಿದರ್ಶನವನ್ನು ರಚಿಸುತ್ತಿದ್ದೇವೆ ಮತ್ತು ಇದನ್ನು ಮಾಡಲು ನಮಗೆ HelloVue.vue ಎಂದು ಕರೆಯಲ್ಪಡುವ 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 ಕೋಡ್ ಅನ್ನು ಕಂಪೈಲ್ ಮಾಡುತ್ತದೆ ಮತ್ತು ಅದನ್ನು ಪ್ರೊಡಕ್ಷನ್ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಫೈಲ್‌ಗೆ ಬಂಡಲ್ ಮಾಡುತ್ತದೆ. ಕಾರ್ಯವು ನಿಮಗೆ ಸಾಧ್ಯವಾಗುವ ವಸ್ತುವನ್ನು ಸ್ವೀಕರಿಸುತ್ತದೆ 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!, Vue.js ನಿದರ್ಶನದ ಕಾರಣದಿಂದಾಗಿ HTML ಅಂಶದ ಮೇಲೆ ಜೋಡಿಸಲಾಗಿದೆ id app.

ಬಳಸಿಕೊಂಡು ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಅನ್ನು ರನ್ ಮಾಡಿ php artisan serve, ಮತ್ತು ಅದನ್ನು ನಿಮ್ಮ ಮೆಚ್ಚಿನ ಬ್ರೌಸರ್‌ನಲ್ಲಿ ತೆರೆಯಿರಿ.

Ercole Palmeri

ನೀವು ಸಹ ಆಸಕ್ತಿ ಹೊಂದಿರಬಹುದು ...

• Laravel ನಲ್ಲಿ ಸೇವಾ ಪೂರೈಕೆದಾರರು: ಅವರು ಏನು ಮತ್ತು Laravel ನಲ್ಲಿ ಸೇವಾ ಪೂರೈಕೆದಾರರನ್ನು ಹೇಗೆ ಬಳಸುವುದು
• ನಿಮ್ಮ ಕಂಪ್ಯೂಟರ್‌ನಲ್ಲಿ ಸ್ಥಳೀಯವಾಗಿ ChatGPT ಅನ್ನು ಹೇಗೆ ಸ್ಥಾಪಿಸುವುದು
• ಮೈಕ್ರೋಸಾಫ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ನಲ್ಲಿ ಗ್ಯಾಂಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಮುದ್ರಣವನ್ನು ಹೇಗೆ ಕಸ್ಟಮೈಸ್ ಮಾಡುವುದು
• ಸಾಫ್ಟ್‌ವೇರ್ ಎಂಜಿನಿಯರಿಂಗ್‌ನಲ್ಲಿ ಫ್ರೇಮ್‌ವರ್ಕ್ ಎಂದರೇನು, defiಚೌಕಟ್ಟುಗಳ ವ್ಯಾಖ್ಯಾನ ಮತ್ತು ವಿಧಗಳು
• ಇಲ್ಲಿ ಮೊದಲ ಡಿಜಿಟಲ್ ವಿಲ್ ಬರುತ್ತದೆ blockchain