Kako koristiti Laravel s Vue.js 3

Vue.js je jedan od najčešće korištenih JavaScript okvira za kreiranje web sučelja i jednostranih aplikacija, zajedno s Laravelom postaje vrlo moćan razvojni alat.

Za razvoj web aplikacija, široko korišten alat je vuejs, au ovom ćemo članku vidjeti kako ga instalirati i koristiti s Laravelom. Okvir Vue.js bio je defini to progresivni okvir jer je specijaliziran za stvaranje HTML prikaza i omogućuje vam jednostavnu integraciju s komponentama drugih biblioteka i projekata.

Za uspjeh Vue.js-a također je zaslužan izbor Laravel predložiti ga kao frontend okvir, što je dovelo do izdanja verzije 2.0.

Stvaranje Laravel projekta

Prvi korak je, naravno, kreiranje novog projekta u Laravelu. Ako ga imate na računalu, upotrijebite ga ili možete izraditi novi samo za ovaj vodič.

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

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

npm install

Nakon što su ovisnosti instalirane, pokrenite sljedeću naredbu za izgradnju resursa i uvjerite se da sve stvarno radi:

npm run dev

Zapovijed npm run dev obavlja razne provjere i posebno gradnje Laravel Mix sastaviti datoteku resources/js/app.js i datoteka resources/css/app.css u datotekama public/js/app.js e public/css/app.css.

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

Instalacija Vue.js

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

npm install --save-dev vue

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

Kako biste bili sigurni da je Vue 3 ispravno instaliran, otvorite datoteku package.json (prisutno u korijenu projekta) i potražite "vue" u odjeljku "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 svoju datoteku welcome.blade.php stavite sljedeć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, napravili smo element div s id "vue-app“. Unutar elementa skripte stvorili smo instancu Vue, gdje konstruktoru prosljeđujemo objekt koji nam omogućuje defiuništiti 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 je objekt kreiran, Vue stječe div s id vue-app i brine se o zamjeni rezerviranog mjesta {{ text }} s vrijednošću sadržanom unutar podatkovnog objekta. Naravno, ovaj objekt 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 mehanizam i učinio aplikaciju responzivnom, tj. svaka promjena svojstva teksta uzrokovat će trenutačno ažuriranje odgovarajućeg elementa u HTML-u.

Drugi test Vue.js

Da biste nastavili s drugom probom, prvo ćete morati instancirati aplikaciju kako biste stvorili novu komponentu. Ti otvori resources/app.js (o resources/js/app.js) i ažurirajte 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 stvaramo novu instancu Vue.js, a za to nam je potrebna Vue komponenta koju smo nazvali HelloVue.vue. Za više informacija pogledajte službene dokumente . 

Napravite novu datoteku 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 stvorili osnovna je Vue.js komponenta koja ispisuje Hello Vue! , dođite header1 na stranici. Na kraju otvorite webpack.mix.js datoteku u korijenu projekta i ažurirajte njezin 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 proizvodnu JavaScript datoteku. Funkcija prihvaća objekt gdje možete defiuništite verziju Vue.js koju koristite. 

Nakon uređivanja datoteke webpack.mix.js trebate kompajlirati javascript kod. Da bismo to učinili, ponovno izvodimo naredbu npm run dev.

Na kraju, da biste Vue isprobali operativno, 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 će zajedno s prethodno kreiranom komponentom proizvesti video poruku Pozdrav Vue!, jer je instanca Vue.js montirana na HTML element sa id app.

Pokrenite svoju aplikaciju pomoću php artisan serve, i otvorite ga u svom omiljenom pregledniku.

Ercole Palmeri

Možda će vas također zanimati ...

• Davatelji usluga u Laravel-u: što su i kako koristiti pružatelje usluga u Laravel-u
• Kako instalirati ChatGPT lokalno na vaše računalo
• Kako prilagoditi ispis Gantt projekata u programu Microsoft Project
• Što je okvir u softverskom inženjerstvu, defidefinicija i vrste okvira
• Dolazi prva digitalna oporuka sa blockchain