Si të përdorni Laravel me Vue.js 3

Vue.js është një nga kornizat më të përdorura JavaScript për krijimin e ndërfaqeve në internet dhe aplikacioneve me një faqe, së bashku me Laravel bëhet një mjet shumë i fuqishëm zhvillimi.

Për zhvillimin e aplikacioneve në internet, një mjet i përdorur gjerësisht është vuejs, dhe në këtë artikull do të shohim se si ta instaloni dhe përdorni atë me Laravel. Korniza Vue.js ishte defithumba kornizë progresive sepse është i specializuar në krijimin e pamjeve HTML dhe ju lejon të integroheni lehtësisht me komponentët e bibliotekave dhe projekteve të tjera.

Suksesi i Vue.js është edhe për shkak të zgjedhjes së Laravel për ta sugjeruar atë si një kornizë frontend, duke çuar kështu në lëshimin e versionit 2.0.

Krijimi i projektit Laravel

Hapi i parë është, sigurisht, krijimi i një projekti të ri në Laravel. Nëse e keni një në kompjuterin tuaj, përdorni atë ose mund të krijoni një të ri vetëm për këtë tutorial.

composer create-project laravel/laravel guide-laravel-vue

Pasi të ketë filluar projekti, do t'ju duhet të instaloni npm varësitë. Për ta bërë këtë, ekzekutoni komandën e mëposhtme brenda drejtorisë së projektit tuaj:

npm install

Pasi të instalohen varësitë, ekzekutoni komandën e mëposhtme për të ndërtuar burimet dhe sigurohuni që gjithçka të funksionojë vërtet:

npm run dev

Komanda npm run dev kryen një sërë kontrollesh dhe ndërtimesh, në veçanti Laravel Mix përpiloni skedarin resources/js/app.js dhe dosjen resources/css/app.css në dosje public/js/app.js e public/css/app.css.

Kur të përfundoni nëse gjithçka funksionon mirë, do të shihni diçka të tillë:

Po instalon Vue.js

Pas përgatitjes së projektit Laravel, ne mund të vazhdojmë me instalimin e Vue.js 3. Për ta bërë këtë, ekzekutoni komandën e mëposhtme në drejtorinë e projektit tuaj:

npm install --save-dev vue

Kjo do të instalojë Vue.js si një nga varësitë e zhvillimit. Pas përpilimit të aseteve, skedari juaj JavaScript i prodhimit do të jetë i pavarur, kështu që ju vetëm duhet të instaloni Vue.js si një varësi zhvillimi.

Për t'u siguruar që Vue 3 është instaluar saktë, hapni skedarin package.json (i pranishëm në rrënjën e projektit) dhe kërkoni për "vue" në pjesën "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"
    }
}

Siç mund ta shihni, numri i versionit tregon që Vue.js 3 është instaluar. 

Prova e parë e Vue.js

Në skedarin tuaj welcome.blade.php vendosni kodin e mëposhtëm:

<div id="vue-app">
    {{ text }}
</div>
<script>
window.vueApp = new Vue({
  el: '#vue-app',
  data: {
    text: 'Hello World from Vue!'
  }
});
</script>

Siç mund ta shihni ne kemi krijuar një element div me id "vue-app“. Brenda elementit të skriptit kemi krijuar një shembull të Vue, ku i kalojmë konstruktorit një objekt që na lejon të defishënoni disa parametra të aplikacionit, të tilla si të dhënat dhe sjelljet, në rastin tonë:

• el: Referenca për elementin div defipërfunduar në html
• data: grupi i të dhënave

Sapo të krijohet objekti, Vue fiton div me id vue-app dhe kujdeset për zëvendësimin e mbajtësit të vendit {{ text }} me vlerën që përmban objekti i të dhënave. Sigurisht, ky objekt mund të përmbajë më shumë se një veti, madje edhe të llojeve të ndryshme: numrat, vargjet dhe objektet e tjera të mbivendosur janë të vlefshme.

Përveç këtij zëvendësimi, Vue gjithashtu ka aktivizuar motorin e tij dhe e ka bërë aplikacionin të përgjegjshëm, d.m.th. çdo ndryshim në vetinë e tekstit do të shkaktojë një përditësim të menjëhershëm të elementit përkatës në HTML.

Testi i dytë i Vue.js

Për të vazhduar në provën e dytë, së pari do t'ju duhet të instaloni aplikacionin për të krijuar një komponent të ri. Ju hapeni resources/app.js (o resources/js/app.js) dhe përditësoni përmbajtjen e tij si më poshtë:

// resources/app.js

require('./bootstrap');

import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';

createApp({
    components: {
        HelloVue,
    }
}).mount('#app');

Në këtë skedar ne po krijojmë një shembull të ri Vue.js dhe për ta bërë këtë na duhet një komponent Vue të cilin e kemi quajtur HelloVue.vue. Për më shumë informacion konsultohuni me dokumentet zyrtare . 

Krijo një skedar të ri resources/components/HelloVue.vue dhe shkruani kodin e mëposhtëm:

// resources/components/HelloVue.vue

<template>
  <h1>Hello Vue!</h1>
</template>

<script>
export default {
    name: 'HelloVue'
}
</script>

Skedari që sapo krijuam është një komponent bazë Vue.js që printon Hello Vue! si header1 në faqe. Së fundi, hapni webpack.mix.js skedari në rrënjën e projektit dhe përditësoni përmbajtjen e tij si më poshtë:

// 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', [
        //
    ]);

Në këtë skedar, thirrja e metodës .vue() do të përpilojë çdo kod Vue.js dhe do ta bashkojë atë në skedarin JavaScript të prodhimit. Funksioni pranon një objekt ku mundeni defitregoni versionin e Vue.js që po përdorni. 

Pas redaktimit të skedarit webpack.mix.js ju duhet të përpiloni kodin javascript. Për ta bërë këtë, ne ekzekutojmë përsëri komandën npm run dev.

Më në fund, për të provuar Vue në mënyrë operative, hapni skedarin resources/views/welcome.blade.php dhe shkruani kodin e mëposhtëm:

<!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>

Kodi, së bashku me komponentin e krijuar më parë, do të prodhojë një mesazh video Përshëndetje Vue!, për shkak të instancës Vue.js që është montuar në një element HTML me id app.

Drejtoni aplikacionin tuaj duke përdorur php artisan serve, dhe hapeni në shfletuesin tuaj të preferuar.

Ercole Palmeri

Ju gjithashtu mund të jeni të interesuar në ...

• Ofruesit e shërbimeve në Laravel: çfarë janë ata dhe si të përdorin Ofruesit e Shërbimeve në Laravel
• Si të instaloni ChatGPT në nivel lokal në kompjuterin tuaj
• Si të personalizoni shtypjen e projektit Gantt në Microsoft Project
• Çfarë është një Kornizë në Inxhinieri Softuerësh, defipërkufizimi dhe llojet e kornizave
• Këtu vjen testamenti i parë dixhital me blockchain