Vue.js-നൊപ്പം Laravel എങ്ങനെ ഉപയോഗിക്കാം 3

വെബ് ഇന്റർഫേസുകളും സിംഗിൾ പേജ് ആപ്ലിക്കേഷനുകളും സൃഷ്‌ടിക്കുന്നതിന് ഏറ്റവും കൂടുതൽ ഉപയോഗിക്കുന്ന JavaScript ഫ്രെയിംവർക്കുകളിൽ ഒന്നാണ് 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 കോഡ് കംപൈൽ ചെയ്യുകയും പ്രൊഡക്ഷൻ 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

നിങ്ങൾ‌ക്കും താൽ‌പ്പര്യമുണ്ടാകാം ...