Articole

Cum să utilizați Laravel cu Vue.js 3

Vue.js este unul dintre cele mai utilizate cadre JavaScript pentru crearea de interfețe web și aplicații cu o singură pagină, împreună cu Laravel devine un instrument de dezvoltare foarte puternic.

Pentru dezvoltarea aplicațiilor web, un instrument utilizat pe scară largă este vuejs, iar în acest articol vom vedea cum să îl instalăm și să îl folosim cu Laravel. Cadrul Vue.js a fost definoaptea cadru progresiv deoarece este specializat în crearea de vizualizări HTML și vă permite să vă integrați cu ușurință cu componente ale altor biblioteci și proiecte.

Succesul Vue.js este, de asemenea, legat de alegerea Laravel pentru a-l sugera ca un cadru frontend, ducând astfel la lansarea versiunii 2.0.

Crearea proiectului Laravel

Primul pas este, desigur, crearea unui nou proiect în Laravel. Dacă aveți unul pe computer, utilizați-l sau puteți crea unul nou doar pentru acest tutorial.

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

După ce proiectul a început, va trebui să instalați npm dependențe. Pentru a face acest lucru, executați următoarea comandă în directorul dvs. de proiect:

npm install

Odată ce dependențele sunt instalate, rulați următoarea comandă pentru a compila resursele și pentru a vă asigura că totul funcționează cu adevărat:

npm run dev

Comanda npm run dev efectuează o serie de verificări și compilări, în special Laravel Mix compila fisierul resources/js/app.js si dosarul resources/css/app.css în dosare public/js/app.js e public/css/app.css.

Când ați terminat, dacă totul funcționează corect, veți vedea ceva de genul acesta:

Instalarea Vue.js

După pregătirea proiectului Laravel, putem trece la instalarea Vue.js 3. Pentru a face acest lucru, rulați următoarea comandă în directorul proiectului dvs.:

npm install --save-dev vue

Aceasta va instala Vue.js ca una dintre dependențele dvs. de dezvoltare. După ce ați compilat resursele, fișierul JavaScript de producție va fi autonom, așa că pur și simplu instalați Vue.js ca dependență de dezvoltare.

Pentru a vă asigura că Vue 3 a fost instalat corect, deschideți fișierul package.json (prezent în rădăcina proiectului) și căutare "vue" în secțiune "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"
    }
}

După cum puteți vedea, numărul versiunii indică faptul că Vue.js 3 a fost instalat. 

Primul test de Vue.js

În fișierul welcome.blade.php introduceți următorul cod:

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

După cum puteți vedea, am creat un element div cu id vue-app„. În interiorul elementului de script am creat o instanță de Vue, unde trecem constructorului un obiect care ne permite defidefiniți câțiva parametri ai aplicației, cum ar fi datele și comportamentele, în cazul nostru:

  • el: referire la element div definitate în html
  • date: set de date

Imediat ce obiectul este creat, Vue dobândește div cu id vue-app și se ocupă de înlocuirea substituentului {{ text }} cu valoarea conținută în obiectul de date. Evident, acest obiect poate conține mai multe proprietăți, chiar și de diferite tipuri: numerele, matricele și alte obiecte imbricate sunt valabile.

Buletin informativ de inovare
Nu rata cele mai importante știri despre inovație. Înscrieți-vă pentru a le primi pe e-mail.

Pe lângă această înlocuire, Vue și-a activat și motorul și a făcut ca aplicația să răspundă, adică orice modificare a proprietății text va determina o actualizare instantanee a elementului corespunzător din HTML.

Al doilea test de Vue.js

Pentru a trece la al doilea test, va trebui mai întâi să instanțiați aplicația pentru a crea o nouă componentă. Tu deschizi resources/app.js (o resources/js/app.js) și își actualizează conținutul după cum urmează:

// resources/app.js

require('./bootstrap');

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

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

În acest fișier creăm o nouă instanță Vue.js și pentru a face acest lucru avem nevoie de o componentă Vue pe care am numit-o HelloVue.vue. Pentru mai multe informatii consultați documentele oficiale . 

Creați un fișier nou resources/components/HelloVue.vue și introduceți următorul cod:

// resources/components/HelloVue.vue

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

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

Fișierul pe care tocmai l-am creat este o componentă de bază Vue.js care se imprimă Hello Vue! cum header1 pe pagina. În cele din urmă, deschideți webpack.mix.js fișier în rădăcina proiectului și actualizați conținutul acestuia după cum urmează:

// 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 acest fișier, apelul de metodă .vue() va compila orice cod Vue.js și îl va include în fișierul JavaScript de producție. Funcția acceptă un obiect acolo unde puteți definumiți versiunea de Vue.js pe care o utilizați. 

După modificarea fișierului webpack.mix.js trebuie să compilați codul JavaScript. Pentru a face acest lucru, rulăm din nou comanda npm run dev.

În cele din urmă, pentru a testa Vue funcțional, deschideți fișierul resources/views/welcome.blade.php și introduceți următorul cod:

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

Codul, împreună cu componenta creată anterior, va produce un text pe ecran Bună Vue!, ca urmare a montarii instanței Vue.js pe un element HTML cu id app.

Rulați aplicația folosind php artisan serveși deschideți-l în browserul dvs. preferat.

Ercole Palmeri

De asemenea poti fi interesat de ...

Buletin informativ de inovare
Nu rata cele mai importante știri despre inovație. Înscrieți-vă pentru a le primi pe e-mail.

Articole recente

Editorii și OpenAI semnează acorduri pentru a reglementa fluxul de informații procesate de Inteligența Artificială

Luni trecută, Financial Times a anunțat un acord cu OpenAI. FT își licențiază jurnalismul de clasă mondială...

Aprilie 30 2024

Plăți online: Iată cum serviciile de streaming vă fac să plătiți pentru totdeauna

Milioane de oameni plătesc pentru serviciile de streaming, plătind taxe lunare de abonament. Este o părere comună că tu...

Aprilie 29 2024

Veeam oferă cel mai complet suport pentru ransomware, de la protecție la răspuns și recuperare

Coveware de la Veeam va continua să ofere servicii de răspuns la incidente de extorcare cibernetică. Coveware va oferi capacități criminalistice și de remediere...

Aprilie 23 2024

Revoluția verde și digitală: cum întreținerea predictivă transformă industria petrolului și gazelor

Întreținerea predictivă revoluționează sectorul petrolului și gazelor, cu o abordare inovatoare și proactivă a managementului uzinelor...

Aprilie 22 2024