artikuluak

Nola erabili Laravel Vue.js 3-rekin

Vue.js web-interfazeak eta orrialde bakarreko aplikazioak sortzeko JavaScript framevork erabilienetako bat da, Laravel-ekin batera garapen-tresna oso indartsua bihurtzen da.

Web aplikazioak garatzeko, oso erabilia den tresna vuejs da, eta artikulu honetan Laravel-ekin nola instalatu eta nola erabili ikusiko dugu. Vue.js markoa zen definito marko progresiboa izan ere, HTML ikuspegien sorkuntzan espezializatua dago, eta beste liburutegi eta proiektu batzuen osagaiekin erraz integratzeko aukera ematen baitu.

Vue.js-en arrakasta ere aukeratzeari zor zaio Laravel frontend esparru gisa iradokitzea, horrela 2.0 bertsioa kaleratzea ekarriko duena.

Edukien taula

Laravel proiektuaren sorrera

Lehen urratsa, noski, Laravelen proiektu berri bat sortzea da. Zure ordenagailuan bat baduzu, erabili edo berri bat sor dezakezu tutorial honetarako soilik.

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

Proiektua hasi ondoren, instalatu beharko duzu npm mendekotasunak. Horretarako, exekutatu komando hau zure proiektuaren direktorioa barruan:

npm install

Mendekotasunak instalatuta daudenean, exekutatu komando hau baliabideak eraikitzeko eta dena benetan funtzionatzen duela ziurtatzeko:

npm run dev

Agindua npm run dev hainbat egiaztapen eta eraikuntza egiten ditu, bereziki Laravel Mix fitxategia konpilatu resources/js/app.js eta fitxategia resources/css/app.css fitxategietan public/js/app.js e public/css/app.css.

Amaitutakoan dena ondo funtzionatzen badu, honelako zerbait ikusiko duzu:

Vue.js instalatzen

Laravel proiektua prestatu ondoren, Vue.js 3 instalatzen jarrai dezakegu. Horretarako, exekutatu komando hau zure proiektuaren direktorioan:

npm install --save-dev vue

Honek Vue.js instalatuko du garapen-menpekotasunetako bat bezala. Aktiboak konpilatu ondoren, zure ekoizpen JavaScript fitxategia autonomoa izango da, beraz, Vue.js instalatu besterik ez duzu behar garapen menpekotasun gisa.

Vue 3 behar bezala instalatu dela ziurtatzeko, ireki fitxategia package.json (proiektuaren erroan aurkeztu) eta bilatu "vue" atalean "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"
    }
}

Ikus dezakezunez, bertsio zenbakiak Vue.js 3 instalatu dela adierazten du.

Vue.js-en lehen proba

Zure welcome.blade.php fitxategian jarri honako kodea:

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

Ikus dezakezunez elementu bat sortu dugu div duten id "vue-app“. Script-elementuaren barruan Vue-ren instantzia bat sortu dugu, non eraikitzaileari pasatzen diogun objektu bat. defiAmaitu aplikazio parametro batzuk, hala nola datuak eta portaerak, gure kasuan:

el: elementuaren erreferentzia div defihtml-n amaitu da
data: datu multzoa

Objektua sortu bezain laster, Vue eskuratzen du div duten id vue-app eta leku-marka ordezkatzeaz arduratzen da {{ text }} datu-objektuan jasotako balioarekin. Noski, objektu honek propietate bat baino gehiago izan ditzake, baita mota ezberdinetakoak ere: zenbakiak, matrizeak eta habiaraturiko beste objektu batzuk balio dute.

Ordezkapen honetaz gain, Vue-k bere motorra ere aktibatu du eta aplikazioa erantzuteko moduan jarri du, hau da, testuaren propietatearen edozein aldaketak HTMLn dagokion elementuaren berehalako eguneratzea eragingo du.

Vue.js-en bigarren proba

Bigarren probara joateko, lehenik eta behin aplikazioa instantziatu beharko duzu osagai berri bat sortzeko. Ireki duzu resources/app.js (o resources/js/app.js) eta bere edukia honela eguneratu:

// resources/app.js

require('./bootstrap');

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

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

Fitxategi honetan Vue.js instantzia berri bat sortzen ari gara, eta horretarako HelloVue.vue deitu dugun Vue osagai bat behar dugu. Informazio gehiagorako kontsultatu dokumentu ofizialak .

Sortu fitxategi berri bat resources/components/HelloVue.vue eta sartu hurrengo kodea:

// resources/components/HelloVue.vue

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

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

Sortu berri dugun fitxategia inprimatzen duen Vue.js oinarrizko osagaia da Hello Vue! nola header1 orrialdean. Azkenik, ireki webpack.mix.js fitxategia proiektuaren erroan eta eguneratu bere edukia honela:

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

Fitxategi honetan, metodo-deia .vue() Edozein Vue.js kodea konpilatuko du eta ekoizpeneko JavaScript fitxategian bilduko du. Funtzioak ahal duzun lekuan objektu bat onartzen du defiAmaitu erabiltzen ari zaren Vue.js bertsioa.

Fitxategia editatu ondoren webpack.mix.js javascript kodea konpilatu behar duzu. Horretarako, berriro exekutatzen dugu komandoa npm run dev.

Azkenik, Vue operatiboki probatzeko, ireki fitxategia resources/views/welcome.blade.php eta sartu hurrengo kodea:

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

Kodeak, aurretik sortutako osagaiarekin batera, bideo-mezu bat sortuko du Kaixo Vue!, Vue.js instantzia HTML elementu batean muntatuta dagoelako id app.

Exekutatu zure aplikazioa erabiliz php artisan serve, eta ireki zure gogoko arakatzailean.

Ercole Palmeri

Agian ere interesatuko zaizu ...