લેખ

Vue.js 3 સાથે Laravel નો ઉપયોગ કેવી રીતે કરવો

Vue.js એ વેબ ઈન્ટરફેસ અને સિંગલ પેજ એપ્લીકેશન બનાવવા માટે સૌથી વધુ ઉપયોગમાં લેવાતા JavaScript ફ્રેમવર્કમાંનું એક છે, લારાવેલ સાથે તે ખૂબ જ શક્તિશાળી વિકાસ સાધન બની જાય છે.

વેબ એપ્સના વિકાસ માટે, વ્યાપકપણે ઉપયોગમાં લેવાતું સાધન છે vuejs, અને આ લેખમાં આપણે જોઈશું કે તેને Laravel સાથે કેવી રીતે ઇન્સ્ટોલ અને ઉપયોગ કરવો. Vue.js ફ્રેમવર્ક હતું defiપરીક્ષા પ્રગતિશીલ માળખું કારણ કે તે 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 ઇન્સ્ટન્સ બનાવી રહ્યા છીએ, અને આ કરવા માટે આપણને Vue ઘટકની જરૂર છે જેને આપણે HelloVue.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.js દાખલાને કારણે માઉન્ટ થયેલ છે id app.

નો ઉપયોગ કરીને તમારી એપ્લિકેશન ચલાવો php artisan serve, અને તેને તમારા મનપસંદ બ્રાઉઝરમાં ખોલો.

Ercole Palmeri

તમને પણ તેમાં રસ હોઈ શકે ...