Vue.jsతో Laravel ఎలా ఉపయోగించాలి 3

Vue.js అనేది వెబ్ ఇంటర్‌ఫేస్‌లు మరియు సింగిల్ పేజీ అప్లికేషన్‌లను రూపొందించడానికి ఎక్కువగా ఉపయోగించే జావాస్క్రిప్ట్ ఫ్రేమ్‌వర్క్‌లలో ఒకటి, లారావెల్‌తో కలిసి ఇది చాలా శక్తివంతమైన అభివృద్ధి సాధనంగా మారుతుంది.

వెబ్ యాప్‌ల అభివృద్ధి కోసం, విస్తృతంగా ఉపయోగించే సాధనం vuejs, మరియు ఈ వ్యాసంలో లారావెల్‌తో దీన్ని ఎలా ఇన్‌స్టాల్ చేసి ఉపయోగించాలో చూద్దాం. 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!, Vue.js ఉదాహరణతో HTML మూలకంపై మౌంట్ చేయబడిన కారణంగా id app.

ఉపయోగించి మీ అప్లికేషన్‌ను అమలు చేయండి php artisan serve, మరియు దీన్ని మీకు ఇష్టమైన బ్రౌజర్‌లో తెరవండి.

Ercole Palmeri

మీకు కూడా ఆసక్తి ఉండవచ్చు ...