Ripartiamo con le nostre Super Guide di Vue.js, libreria che adoriamo e che riteniamo di grande, grandissima qualità peraltro molto semplice da imparare e con un ecosistema in netta crescita.

Installare Vue.js è facile, oggi con calma e come di consueto vi spieghiamo come fare, mettetevi comodi, iniziamo!

Installazione Vue.js: procedura

Ci sono diverse modalità di installazione per quanto riguarda Vue.js, una più complessa con webpack e npm, e una più semplice: scaricando Vue.js e caricandolo nella nostra index.

Noi di solito facciamo così.

Possiamo quindi andare sul sito di Vue.js e prendere direttamente il CDN, prendiamo la versione di sviluppo, ricordiamoci che c’è la possibilità di avere anche quella di produzione:

<script src=”https://cdn.jsdelivr.net/npm/vue/dist/vue.js”></script>

e andiamo a creare una nuova cartella con un solo file index.html a quel punto inseriamo dentro questo script proprio prima della chiusura del tag body.

Vue.js è ora disponibile, possiamo già usarlo con tutte le sue funzionalità!

<div id="app">
    <p>{{title}}</p>
</div>
<script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
<script>
    new Vue({
        el: '#app',
        data: {
            title: 'Ciao mondo!'
        }
    })
</script>

Impostazione Creazione Applicazione con Vue.js post installazione

Impostiamo la creazione di un’applicazione con Vue.js dopo il primo step dedicato all’installazione di Vue.js

  1. Andiamo ad istanziare Vue.js, in fondo dopo il caricamento della libreria e andiamo a creare un’istanza di Vue. A questo punto gli dovremo dire come prima cosa dove deve agire.
  2. Nel costruttore gli passiamo un oggetto che come proprietà  avrà l’elemento del dom su cui Vue, o meglio questa istanza di Vue, avrà controllo, quindi dove noi vogliamo utilizzarlo. Sopra abbiamo creato appunto un div con id #app.
  3. Come terzo punto andiamo a mettere dei dati, un semplice e classico ’Ciao mondo’, Vue ha una proprietà “data” che consente di conservare tutti i dati:  inseriamo quindi una proprietà title e andiamo a richiamarla sul template tra parentesi graffe

Vue.js è una delle librerie JavaScript oggi più evolute, non conoscerlo è un vero peccato, soprattutto per la sua splendida ed essenziale complementarità con Laravel!

LaraMind è corsi per aziende e per privati, da un’occhiata al nostro catalogo e alle nostre soluzioni custom per privati e aziende.