Come installare Vue.JS su Ubuntu 22.04

Vue.js è un framework javascript utilizzato per creare un’interfaccia utente interattiva e applicazioni a pagina singola. È più leggero e più adattabile rispetto al framework AngularJS. È semplice, flessibile, modulare, altamente performante, facile da imparare e fornisce molti strumenti e librerie che facilitano lo sviluppo delle applicazioni. Se conosci le basi di HTML, CSS e JavaScript, puoi iniziare rapidamente a costruire applicazioni web con Vue.js.

Questa guida ti mostrerà come installare Vue JS su Ubuntu 22.04.

Prerequisiti

• Un server che esegue Ubuntu 22.04 per HAProxy.
• Una password di root configurata su tutti i server.

Installa Node.js

Prima di iniziare, dovrai installare Node.js sul tuo server. Per impostazione predefinita, l’ultima versione di Node.js non è inclusa nel repository predefinito di Ubuntu 22.04. Quindi dovrai installarlo dal repository di origine di Node.

Per prima cosa, installa le dipendenze richieste utilizzando il seguente comando:

apt install curl gnupg2 gnupg git wget -y

Successivamente, aggiungi il repository di origine di Node utilizzando il seguente comando:

curl -fsSL https://deb.nodesource.com/setup_lts.x | bash -

Una volta aggiunto il repository, puoi installare Node.js con il seguente comando:

apt install nodejs -y

Una volta installato Node.js, puoi verificare la versione di Node.js utilizzando il seguente comando:

node --version

Otterrai il seguente output:

v16.16.0

Ora, aggiorna NPM all’ultima versione utilizzando il seguente comando:

npm install npm@latest -g

Puoi anche verificare la versione di NPM con il seguente comando:

npm --version

Dovresti ottenere il seguente output:

8.13.2

Installa Vue CLI

Ora puoi utilizzare NPM per installare il pacchetto Vue CLI utilizzando il seguente comando:

npm install -g @vue/cli

Una volta installato Vue, puoi verificare la versione di Vue JS utilizzando il seguente comando:

vue --version

Dovresti vedere il seguente output:

@vue/cli 5.0.8

Crea un’app semplice con Vue JS

Ora puoi utilizzare Vue CLI per creare facilmente la tua applicazione. Esegui il seguente comando per creare un’applicazione di esempio chiamata myapp.

vue create myapp

Otterrai il seguente output:

Vue CLI v5.0.8
?  Creazione del progetto in /root/myapp.
????  Inizializzazione del repository git...
??  Installazione dei plugin CLI. Questo potrebbe richiedere un po' di tempo...


aggiunti 848 pacchetti, e auditati 849 pacchetti in 24s

88 pacchetti stanno cercando finanziamenti
  esegui `npm fund` per dettagli

trovate 0 vulnerabilità
????  Invocazione dei generatori...
????  Installazione delle dipendenze aggiuntive...


aggiunti 95 pacchetti, e auditati 944 pacchetti in 6s

98 pacchetti stanno cercando finanziamenti
  esegui `npm fund` per dettagli

trovate 0 vulnerabilità
?  Esecuzione dei ganci di completamento...

????  Generazione di README.md...

????  Progetto myapp creato con successo.
????  Inizia con i seguenti comandi:

 $ cd myapp
 $ npm run serve

 WARN  Commit git saltato a causa di nome utente e email mancanti nella configurazione git, o commit non firmato.
       Dovrai eseguire tu stesso il commit iniziale.

Successivamente, cambia la directory in myapp e elenca tutti i file e le directory installati utilizzando il seguente comando:

cd myapp  
ls

Otterrai il seguente output:

babel.config.js  jsconfig.json  node_modules  package.json  package-lock.json  public  README.md  src  vue.config.js

Avvia l’applicazione Vue JS

Ora puoi avviare la tua applicazione Vue JS eseguendo il seguente comando:

npm run serve

Una volta avviata l’applicazione, otterrai il seguente output:

> [email protected] serve
> vue-cli-service serve

 INFO  Avvio del server di sviluppo...

 DONE  Compilato con successo in 6469ms                                                                                              8:45:33 AM


  App in esecuzione su:
  - Locale:   http://localhost:8080/ 
  - Rete: non disponibile

  Nota che la build di sviluppo non è ottimizzata.
  Per creare una build di produzione, esegui npm run build.

Accedi all’interfaccia web di Vue JS

A questo punto, l’applicazione Vue JS è installata e ascolta sulla porta 8080. Puoi ora aprire il tuo browser web e accedere all’applicazione Vue JS utilizzando l’URL http://your-serevr-ip. Dovresti vedere il dashboard di Vue JS nella seguente pagina:

Conclusione

In questo post, abbiamo spiegato come installare Vue JS su Ubuntu 22.04. Ora puoi iniziare a costruire la tua applicazione a pagina singola utilizzando il framework Vue JS. Sentiti libero di chiedermi se hai domande.