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.
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:
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.
Î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:
div
definitate în htmlImediat 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.
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.
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 ...
Luni trecută, Financial Times a anunțat un acord cu OpenAI. FT își licențiază jurnalismul de clasă mondială...
Milioane de oameni plătesc pentru serviciile de streaming, plătind taxe lunare de abonament. Este o părere comună că tu...
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...
Întreținerea predictivă revoluționează sectorul petrolului și gazelor, cu o abordare inovatoare și proactivă a managementului uzinelor...