Kako koristiti Laravel sa Vue.js 3

Vue.js je jedan od najčešće korištenih JavaScript okvira za kreiranje web interfejsa i jednostraničkih aplikacija, zajedno sa Laravel-om postaje veoma moćan razvojni alat.

Za razvoj web aplikacija, alat koji se široko koristi je vuejs, a u ovom članku ćemo vidjeti kako ga instalirati i koristiti s Laravel-om. Vue.js framework je bio defini to progresivni okvir jer je specijalizovan za kreiranje HTML pogleda i omogućava vam laku integraciju sa komponentama drugih biblioteka i projekata.

Uspeh Vue.js-a je takođe posledica izbora Laravel predložiti ga kao frontend framework, što je dovelo do izdavanja verzije 2.0.

Kreiranje Laravel projekta

Prvi korak je, naravno, kreiranje novog projekta u Laravelu. Ako ga imate na svom računaru, koristite ga ili možete kreirati novi samo za ovaj vodič.

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

Nakon što je projekat započeo, morat ćete instalirati npm ovisnosti. Da biste to učinili, pokrenite sljedeću naredbu unutar direktorija projekta:

npm install

Nakon što su zavisnosti instalirane, pokrenite sljedeću naredbu da izgradite resurse i provjerite da li sve zaista radi:

npm run dev

Komanda npm run dev vrši razne provjere i gradnje, posebno Laravel Mix kompajlirajte fajl resources/js/app.js i fajl resources/css/app.css u fajlovima public/js/app.js e public/css/app.css.

Kada završite, ako sve radi kako treba, vidjet ćete nešto poput ovoga:

Instaliranje Vue.js

Nakon pripreme Laravel projekta, možemo nastaviti s instalacijom Vue.js 3. Da biste to učinili, pokrenite sljedeću naredbu u direktoriju vašeg projekta:

npm install --save-dev vue

Ovo će instalirati Vue.js kao jednu od razvojnih zavisnosti. Nakon kompajliranja sredstava, vaša proizvodna JavaScript datoteka će biti samostalna, tako da samo trebate instalirati Vue.js kao razvojnu ovisnost.

Da biste bili sigurni da je Vue 3 ispravno instaliran, otvorite datoteku package.json (prisutno u korijenu projekta) i potražite "vue" u odeljku "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"
    }
}

Kao što vidite, broj verzije pokazuje da je Vue.js 3 instaliran. 

Prvi pokušaj Vue.js

U vaš welcome.blade.php fajl stavite sledeći kod:

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

Kao što vidite, kreirali smo element div con id "vue-app“. Unutar elementa skripte kreirali smo instancu Vue, gdje konstruktoru prosljeđujemo objekat koji nam omogućava da defizavršiti neke parametre aplikacije, kao što su podaci i ponašanja, u našem slučaju:

• el: Referenca na element div defizavršeno u html-u
• datum: skup podataka

Čim se objekat kreira, Vue stiče div con id vue-app i brine se o zamjeni rezerviranog mjesta {{ text }} sa vrijednošću sadržanom u objektu podataka. Naravno, ovaj objekat može sadržavati više od jednog svojstva, čak i različitih tipova: brojevi, nizovi i drugi ugniježđeni objekti su važeći

Osim ove zamjene, Vue je također aktivirao svoj motor i učinio aplikaciju responzivnom, tj. svaka promjena svojstva teksta će uzrokovati trenutno ažuriranje odgovarajućeg elementa u HTML-u.

Drugi test Vue.js

Da biste prešli na drugu probnu verziju, prvo ćete morati instancirati aplikaciju kako biste kreirali novu komponentu. Ti otvori resources/app.js (o resources/js/app.js) i ažurirati njegov sadržaj na sljedeći način:

// resources/app.js

require('./bootstrap');

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

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

U ovoj datoteci kreiramo novu instancu Vue.js, a za to nam je potrebna Vue komponenta koju smo nazvali HelloVue.vue. Za više informacija konsultujte zvanična dokumenta . 

Kreirajte novi fajl resources/components/HelloVue.vue i unesite sljedeći kod:

// resources/components/HelloVue.vue

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

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

Datoteka koju smo upravo kreirali je osnovna komponenta Vue.js koja se ispisuje Hello Vue! doći header1 na stranici. Konačno, otvorite webpack.mix.js datoteku u korijenu projekta i ažurirajte njen sadržaj na sljedeći način:

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

U ovoj datoteci, poziv metode .vue() će kompajlirati bilo koji Vue.js kod i spojiti ga u produkcijsku JavaScript datoteku. Funkcija prihvata objekat tamo gde možete defizavršite verziju Vue.js koju koristite. 

Nakon uređivanja fajla webpack.mix.js morate kompajlirati javascript kod. Da bismo to učinili, ponovo pokrećemo naredbu npm run dev.

Na kraju, da biste operativno isprobali Vue, otvorite datoteku resources/views/welcome.blade.php i unesite sljedeći kod:

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

Kod, zajedno sa prethodno kreiranom komponentom, će proizvesti video poruku Hello Vue!, zbog toga što se instanca Vue.js montira na HTML element sa id app.

Pokrenite svoju aplikaciju koristeći php artisan serve, i otvorite ga u svom omiljenom pretraživaču.

Ercole Palmeri

Možda će vas zanimati i ...

• Dobavljači usluga u Laravelu: šta su i kako koristiti pružatelje usluga u Laravelu
• Kako da instalirate ChatGPT lokalno na vašem računaru
• Kako prilagoditi štampanje Gantt projekata u programu Microsoft Project
• Šta je okvir u softverskom inženjerstvu, defidefinicija i vrste okvira
• Evo prve digitalne oporuke blockchain