Vue.js සමඟ Laravel භාවිතා කරන්නේ කෙසේද 3

Vue.js යනු වෙබ් අතුරුමුහුණත් සහ තනි පිටු යෙදුම් නිර්මාණය කිරීම සඳහා වැඩිපුරම භාවිතා වන JavaScript රාමු වලින් එකකි, Laravel සමඟ එක්ව එය ඉතා බලවත් සංවර්ධන මෙවලමක් බවට පත්වේ.

වෙබ් යෙදුම් සංවර්ධනය සඳහා, බහුලව භාවිතා වන මෙවලමක් වන්නේ vuejs වන අතර, මෙම ලිපියෙන් අපි එය Laravel සමඟ ස්ථාපනය කර භාවිතා කරන්නේ කෙසේදැයි බලමු. Vue.js රාමුව විය defiනිටෝ ප්රගතිශීලී රාමුව මන්ද එය 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 ස්ථාපනය කරයි. වත්කම් සම්පාදනය කිරීමෙන් පසු, ඔබේ නිෂ්පාදන 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 කේතයක් සම්පාදනය කර එය නිෂ්පාදන JavaScript ගොනුවට බණ්ඩල් කරනු ඇත. කාර්යය ඔබට හැකි වස්තුවක් පිළිගනී defiඔබ භාවිතා කරන Vue.js අනුවාදය ඉවත් කරන්න. 

ගොනුව සංස්කරණය කිරීමෙන් පසුව webpack.mix.js ඔබ javascript කේතය සම්පාදනය කළ යුතුය. මෙය සිදු කිරීම සඳහා, අපි නැවත විධානය ක්රියාත්මක කරමු 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