Vue.js உடன் Laravel ஐ எவ்வாறு பயன்படுத்துவது 3

Vue.js என்பது வலை இடைமுகங்கள் மற்றும் ஒற்றைப் பக்க பயன்பாடுகளை உருவாக்குவதற்கு அதிகம் பயன்படுத்தப்படும் JavaScript கட்டமைப்புகளில் ஒன்றாகும், Laravel உடன் இணைந்து இது மிகவும் சக்திவாய்ந்த மேம்பாட்டுக் கருவியாக மாறுகிறது.

வலை பயன்பாடுகளின் மேம்பாட்டிற்கு, பரவலாகப் பயன்படுத்தப்படும் கருவி vuejs ஆகும், மேலும் இந்த கட்டுரையில் Laravel உடன் அதை எவ்வாறு நிறுவுவது மற்றும் பயன்படுத்துவது என்பதைப் பார்ப்போம். Vue.js கட்டமைப்பு இருந்தது definito முற்போக்கான கட்டமைப்பு ஏனெனில் இது 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 நிகழ்வை உருவாக்குகிறோம், இதைச் செய்ய 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!, Vue.js நிகழ்வின் காரணமாக HTML உறுப்பில் ஏற்றப்பட்டது id app.

பயன்படுத்தி உங்கள் பயன்பாட்டை இயக்கவும் php artisan serve, மற்றும் உங்களுக்கு பிடித்த உலாவியில் திறக்கவும்.

Ercole Palmeri

நீங்கள் ஆர்வமாக இருக்கலாம் ...

• Laravel இல் சேவை வழங்குநர்கள்: அவர்கள் என்ன மற்றும் Laravel இல் சேவை வழங்குநர்களை எவ்வாறு பயன்படுத்துவது
• உங்கள் கணினியில் ChatGPT ஐ உள்நாட்டில் நிறுவுவது எப்படி
• மைக்ரோசாஃப்ட் திட்டத்தில் கேன்ட் திட்ட அச்சிடலை எவ்வாறு தனிப்பயனாக்குவது
• மென்பொருள் பொறியியலில் ஒரு கட்டமைப்பு என்றால் என்ன, defiவரையறை மற்றும் கட்டமைப்பின் வகைகள்
• இங்கே முதல் டிஜிட்டல் உயில் வருகிறது blockchain