Per lo sviluppo di app web, uno strumento molto utilizzato è vuejs, è in questo articolo vedremo come installarlo e usarlo con Laravel. Il framework Vue.js è stato definito framework progressivo perchè è specializzato nella realizzazione delle viste HTML, e permette di integrarsi facilmente con componenti di altre librerie e progetti.
Il successo di Vue.js è da collegare anche alla scelta di Laravel di suggerirlo come framework frontend, portando così al rilascio della versione 2.0.
Il primo passo è, ovviamente, creare un nuovo progetto in Laravel. Se ne hai uno sul tuo computer, usalo o puoi crearne uno nuovo solo per questo tutorial.
composer create-project laravel/laravel guide-laravel-vue
Dopo che il progetto è stato avviato, dovrai installare le npm
dipendenze. Per fare ciò, esegui il seguente comando all’interno della directory del tuo progetto:
npm install
Al termine dell’installazione delle dipendenze, eseguire il seguente comando per compilare le risorse e assicurarsi che tutto funzioni davvero:
npm run dev
Il comando npm run dev
esegue una serie di controlli e compilazioni, in particolare Laravel Mix
compila il file resources/js/app.js
e il file resources/css/app.css
nei file public/js/app.js
e public/css/app.css
.
Al termine se tutto funziona correttamente, vedrai qualcosa come segue:
Dopo aver preparato il progetto Laravel, possiamo procedere a installare Vue.js 3. Per fare ciò, esegui il seguente comando nella directory del tuo progetto:
npm install --save-dev vue
Questo installerà Vue.js come una delle dipendenze di sviluppo. Dopo aver compilato le risorse, il file JavaScript di produzione sarà autosufficiente, quindi è sufficiente installare Vue.js come dipendenza di sviluppo.
Per assicurarti che Vue 3 sia stato installato correttamente, apri il file package.json
(presente in root di progetto) e cerca "vue"
nella sezione "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"
}
}
Come puoi vedere, il numero di versione indica che Vue.js 3 è stato installato.
Nel tuo file welcome.blade.php inserisci il seguente codice:
<div id="vue-app">
{{ text }}
</div>
<script>
window.vueApp = new Vue({
el: '#vue-app',
data: {
text: 'Hello World from Vue!'
}
});
</script>
Come puoi notare abbiamo creato un elemento div
con id
“vue-app
“. All’interno dell’elemento script abbiamo creato una istanza di Vue, dove passiamo al costruttore un oggetto che ci permette di definire alcuni parametri dell’applicazione, come dati e comportamenti, nel nostro caso:
div
definito nell’htmlAppena l’oggetto viene creato, Vue
acquisisce il div
con id vue-app
e si occupa di sostituire il placeholder {{ text }}
con il valore contenuto all’interno dell’oggetto data. Ovviamente questo oggetto può contenere più di una proprietà anche di tipo diverso: sono validi numeri, array e altri oggetti annidiati
Oltre a questa sostituzione, Vue ha anche attivato il suo motore e ha reso l’applicazione reattiva, cioè qualsiasi cambiamento alla proprietà text, provocherà un aggiornamento istantaneo del corrispondente elemento nell’HTML.
Per procedere alla seconda prova, dovrai prima creare un’istanza dell’app per creare un nuovo componente. Apri resources/app.js
(o resources/js/app.js
) e aggiorna il suo contenuto come segue:
// resources/app.js
require('./bootstrap');
import { createApp } from 'vue';
import HelloVue from '../components/HelloVue.vue';
createApp({
components: {
HelloVue,
}
}).mount('#app');
In questo file stiamo creando una nuova istanza Vue.js, e per far questo abbiamo bisogno di un componente Vue che abbiamo chiamato HelloVue.vue. Per maggiori informazioni consulta i documenti ufficiali .
Crea un nuovo file resources/components/HelloVue.vue
e inserisci il seguente codice:
// resources/components/HelloVue.vue
<template>
<h1>Hello Vue!</h1>
</template>
<script>
export default {
name: 'HelloVue'
}
</script>
Il file che abbiamo appena creato è un componente Vue.js di base che stampa Hello Vue!
come header1
sulla pagina. Infine, apri il webpack.mix.js
file nella root del progetto e aggiornane il contenuto come segue:
// 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', [
//
]);
In questo file, la chiamata del metodo .vue()
compilerà qualsiasi codice Vue.js e lo raggrupperà nel file JavaScript di produzione. La funzione accetta un oggetto in cui puoi definire la versione di Vue.js che stai utilizzando.
In seguito alla modifica del file webpack.mix.js
è necessario compilare il codice JavaScript. Per fare ciò, eseguiamo nuovamente il comando npm run dev
.
Infine, per provare in modo operativo Vue, apri il file resources/views/welcome.blade.php
e inserisci il seguente codice:
<!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>
Il codice, insieme al componente creato precedentemente, produrrà una scritta a video Hello Vue!, per effetto dell’istanza Vue.js che viene montata su un elemento HTML con id
app
.
Esegui la tua applicazione usando php artisan serve
, e aprila nel tuo browser preferito.
Ercole Palmeri
Potrebbe interessarti anche…
Nasce l’Osservatorio del Nordest sull’economia dell’Innovazione Nim, (Numbers Innovation Motion) è un progetto di Galileo Visionary District realizzato in collaborazione…
ASKtoAI lancia le innovative funzionalità Memory e Personality, strumenti d'avanguardia per la creazione di contenuti digitali che promettono di migliorare…
Discuss , la piattaforma leader appositamente creata per trasformare le esperienze in insight, ha potenziato le sue capacità di scalare la…
Con le festività che si avvicinano rapidamente, Blue Lake Packaging è entusiasta di offrire un'alternativa ecologica al nastro da imballaggio…
Netlogistik , leader in potenti servizi che guidano le aziende verso la trasformazione digitale della catena di fornitura, ha recentemente tenuto…
Annuncia una soluzione integrata che combina FPGA di Lattice a bassa potenza e bassa latenza con la piattaforma NVIDIA Orin…
Con un successo clamoroso, il Textile Export Promotion Project (TEPP), guidato dalla Taiwan Textile Federation nel 2023, ha messo in…
Lattice presenta i nuovi FPGA mid-range Lattice Avant-G e Lattice Avant-X, stack di soluzioni specifiche per le applicazioni ampliate e…
Innovazione per i professionisti della gestione della conoscenza e dell'innovazione (KM&I). Nel settore legale è ora disponibile un riferimento completo…
La Eclipse Foundation , una delle più grandi fondazioni di software open source al mondo, ha annunciato oggi la formazione dell'Eclipse…