Come installare Vue.js

In questa lezione vi spiego come installare Vue.js per iniziare ad utilizzarlo. Ci sono diverse opzioni per iniziare ad utilizzare Vue.js: utilizzare la CDN oppure configurare l’ambiente di sviluppo.

Innanzitutto linkiamo il sito ufficiale di Vue.js dove possiamo trovare una vasta gamma di risorse di riferimento: Vue.js.

Su questo sito troviamo infatti il riferimento alla CDN :

<script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>

N.B. Una CDN, ovvero Content Delivery Network oppure in italiano “Rete di Distribuzione dei Contenuti”, è un servizio di rete distribuita progettato per distribuire i contenuti web in modo efficiente e veloce agli utenti in tutto il mondo. Il funzionamento di una CDN coinvolge la distribuzione dei contenuti su diversi server localizzati in varie posizioni geografiche, noti come nodi CDN. Quando un utente richiede un particolare contenuto (come ad esempio un file JavaScript, CSS, immagini o altri asset multimediali), la richiesta viene indirizzata al nodo CDN più vicino geograficamente all’utente anziché al server di origine.

Questo riduce la latenza e migliora le prestazioni complessive del sito web, poiché i contenuti vengono consegnati più rapidamente grazie alla vicinanza fisica del server CDN all’utente finale. Inoltre, i CDN sono in grado di gestire picchi di traffico improvvisi e distribuire il carico su più server, garantendo una maggiore stabilità e affidabilità del sito web.

In alternativa all’uso della CDN possiamo procedere alla configurazione dell’ambiente di sviluppo.

Come installare Vue.js – ambiente di sviluppo

Per procedere con l’installazione di Vue.js nel nostro sistema possiamo procedere con i seguenti passaggi:

1. Installare Node.js, se non è già presente nel nostro sistema

Node.js è un runtime JavaScript (ambiente di esecuzione che consente di interpretare ed eseguire codice JavaScript) basato su eventi e orientato agli oggetti, utilizzato per eseguire codice JavaScript lato server. Offre un ambiente di esecuzione JavaScript server-side che consente agli sviluppatori di scrivere applicazioni web scalabili e ad alte prestazioni.

Per verificare la presenza di Node.js nel nostro sistema occorre aprire il prompt dei comandi e digitare:

node -v

Questo comando “node -v” viene utilizzato per verificare la versione di Node.js installata sul sistema. Quando si esegue questo comando nel terminale o nel prompt dei comandi, si riesce a vedere la versione attualmente installata di Node.js. Se Node.js non è installato sul sistema e si prova ad eseguire il comando “node -v”, si ottiene un messaggio di errore che indica che il comando “node” non è stato trovato.

Dunque se è presente si ha ad esempio:

v20.11.1

Se non è presente si può ricevere un messaggio di errore diverso a seconda del sistema operativo in uso:

Su sistemi Unix-like (come Linux e macOS): “bash: node: command not found”
Su Windows: “node is not recognized as an internal or external command, operable program or batch file.”

Dunque se non è presente procedere con l’installazione andando sul sito ufficiale di Node.js e scaricando l’ultima versione disponibile, la versione da scaricare raccomandata è quella LTS (Long-Term Support). Una volta scaricato il pacchetto di installazione, eseguirlo facendo doppio clic sul file scaricato e seguire le istruzioni visualizzate sullo schermo per completare l’installazione.

Di solito, il processo di installazione è abbastanza semplice e richiede pochi passaggi. Se si sta utilizzando Windows, potrebbe essere necessaario dover riavviare il sistema dopo l’installazione di Node.js affinché le modifiche abbiano effetto.

Installazione tramite gestore dei pacchetti

In alernativa si può installare Node.js attraverso un gestore di pacchetti, in base al sistema operativo:

Ubuntu/Debian: Esegui sudo apt-get install nodejs npm
Fedora: Esegui sudo dnf install nodejs npm
macOS (con Homebrew): Esegui brew install node
Windows (con Chocolatey): Esegui choco install nodejs

Ricordiamo che Chocolatey (choco) è un gestore di pacchetti per Windows, mentre Homebrew (brew) è un gestore di pacchetti per macOS. Entrambi possono essere utilizzati per installare Node.js ed npm, ma non sono preinstallati di default sul sistema.

Verifica dopo l’installazione

Dopo l’installazione verificate che tutto sia andato a buon fine digitando nel prompt (chiudetelo e riapritelo se precentemente è stato aperto) i seguenti comandi uno alla volta:

node -v
npm -v

2. Installare Vue CLI

Proseguiamo con l’installazione di Vue.js procedendo con l’isntallazione di Vue CLI.

Vue CLI è uno strumento potente e conveniente che semplifica molti aspetti dello sviluppo di applicazioni Vue.js, ma non è obbligatorio utilizzarlo. Infatti è possibile creare manualmente la struttura del progetto Vue.js senza l’ausilio di Vue CLI.

Perciò se non volete installarlo potete passare direttamente al punto 3, altrimenti seguite le prossime istruzioni per l’installazione di Vue CLI.

Installazione di Vue CLI

Vue CLI offre un generatore di progetti interattivo che consente di creare rapidamente nuovi progetti Vue.js. Con pochi comandi, è possibile iniziare con un nuovo progetto Vue.js preconfigurato e pronto per lo sviluppo.

Difatti, Vue CLI gestisce automaticamente la configurazione del progetto, compresi Webpack, Babel e altri strumenti di build e bundle. Questo significa che non devi preoccuparti di configurare manualmente questi strumenti o di gestire complessi file di configurazione.

Definizioni:

Build: È il processo di preparazione del codice sorgente per l’ambiente di produzione, che include la trasformazione, la minificazione e l’ottimizzazione del codice.
Bundle: È la creazione di un singolo file contenente tutto il codice necessario per l’applicazione, incluso il codice dell’applicazione stessa e le sue dipendenze.

Quindi, durante la build di un progetto Vue.js, viene creato un bundle ottimizzato che contiene tutto il necessario per l’applicazione e che è pronto per essere distribuito e servito ai clienti.

Per installare Vue CLI dobbiamo chiaramente assicurarci di avere Node.js ed npm installati e dopo procedere con l’installazione globale oppure locale. Noi proseguiamo con l’installazione globale.

npm install -g @vue/cli

Dopo aver completato l’installazione, si può verificare che Vue CLI sia stato installato correttamente eseguendo il seguente comando nel terminale o nel prompt dei comandi:

vue --version

Questo comando dovrebbe restituire la versione di Vue CLI appena installata.

Una volta completati questi passaggi, avremo Vue CLI installato sul nostro sistema e si è pronti per iniziare a creare e gestire i progetti Vue.js utilizzando la potenza di Vue CLI.

3. Creare un progetto

Continuiamo il processo di installazione di Vue.js con la creazione della cartella del nostro progetto.

Per creare una nuova cartella per un progetto Vue.js si utilizza il comando vue create seguito dal nome della cartella del tuo progetto. Scegliamo la directory in cui desideriamo creare il nuovo progetto Vue.js, navigando nella directory desiderata utilizzando i comandi cd nel terminale o nel prompt dei comandi.

Appena ci posizioniamo nella directory desiderata, possiamo eseguire il comando per creare un nuovo progetto Vue.js:

vue create nome_progetto

Sostituisci nome_progetto con il nome che si che desidera assegnare al proprio progetto.

Entriamo nella directory del progetto:

cd ProgettiVue/nome_progetto

Chiaramente sostituite ProgettiVue e nome_progetto con i nomi delle vostre directory.

Una volta nella directory del progetto Vue.js, possiamo eseguire il seguente comando nel terminale se desideriamo aprire la cartella del progetto in Visual Studio Code:

code .

4. Avviamo il server di sviluppo locale

Adesso per far funzionare il progetto occorre avviare un server di sviluppo locale per il progetto Vue.js.

Ci spostiamo nella directory del progetto:

cd ProgettiVue/nome_progetto

Una volta nella directory del progetto, eseguiamo il seguente comando per avviare il server di sviluppo locale:

npm run serve

Il comando npm run serve è dunque utilizzato per avviare un server di sviluppo locale per il progetto Vue.js. Questo è utile durante lo sviluppo poiché consente di visualizzare e testare l’applicazione Vue.js in un ambiente locale mentre si apportano modifiche al codice.

Dopo aver eseguito il comando, il server di sviluppo locale verrà avviato e il terminale mostrerà informazioni sul server, come l’indirizzo locale del server (solitamente localhost) e la porta su cui è in ascolto (di solito 8080). Inoltre, saranno visualizzati eventuali errori o avvisi relativi all’avvio del server.

Dopo che il server di sviluppo locale è stato avviato con successo, si può aprire il browser web preferito e navigare all’indirizzo indicato nel terminale (ad esempio, http://localhost:8080) per visualizzare l’applicazione Vue.js in esecuzione sul server locale.