Vue.js è uno dei framework JavaScript più popolari e flessibili per lo sviluppo di interfacce utente e applicazioni web dinamiche.

In questa guida scoprirai come configurare un progetto Vue.js da zero utilizzando Vue CLI e come integrare Vue.js in progetti esistenti.

Segui attentamente per ottenere un setup ottimizzato e pronto per lo sviluppo. Perché scegliere Vue.js per i tuoi progetti

Vue.js è apprezzato per la sua facilità di apprendimento, la documentazione chiara e una vasta comunità di supporto. Con un setup iniziale semplice e un ecosistema ricco, Vue è perfetto sia per piccoli widget che per applicazioni complesse. Setup di un progetto Vue.js con Vue CLI

Vue CLI è lo strumento ufficiale di command-line per Vue.js, che ti permette di creare un ambiente di sviluppo completo in pochi minuti.

1. Prerequisiti

• Node.js: Assicurati di avere Node.js installato. Puoi scaricarlo da Node.js.
• npm o yarn: Inclusi con Node.js per gestire i pacchetti.

Per verificare l’installazione, esegui i seguenti comandi nel terminale:

1
2
node -v
npm -v

1. Installazione di Vue CLI

Installa Vue CLI globalmente usando npm:

1
npm install -g @vue/cli

Verifica l’installazione:

1
vue --version

1. Creazione di un nuovo progetto Vue.js

Crea un progetto con un comando semplice:

1
vue create nome-progetto

Opzioni disponibili durante il setup:

• Default: Configurazione predefinita con Babel e ESLint.
• Manual: Scegli i tool e le caratteristiche che desideri, come Vue Router, - Vuex o TypeScript.

Naviga nella cartella del progetto:

1
cd nome-progetto

Avvia l’applicazione con il server di sviluppo integrato:

1
npm run serve

Ora puoi accedere al tuo progetto all’indirizzo http://localhost:8080. Integrazione di Vue.js in un progetto esistente

Vue.js può essere facilmente integrato in progetti esistenti senza dover rifattorizzare l’intero codice base.

1. Aggiungi Vue.js al progetto

Puoi includere Vue.js direttamente tramite un CDN:

1
<script src="https://cdn.jsdelivr.net/npm/vue@3"></script>

1. Crea un’istanza Vue

Nel file HTML del tuo progetto, aggiungi un elemento con un ID:

1
2
3
<div id="app">
  
</div>

Aggiungi uno script per inizializzare Vue:

1
2
3
4
5
6
7
8
const app = Vue.createApp({
  data() {
    return {
      messaggio: 'Ciao dal tuo primo componente Vue!'
    };
  }
});
app.mount('#app');

1. Integra componenti

Puoi suddividere il tuo progetto in componenti modulari:

1
2
3
4
5
6
7
8
9
<script>
Vue.createApp({
  components: {
    'mio-componente': {
      template: `<p>Questo è un componente personalizzato!</p>`
    }
  }
}).mount('#app');
</script>

Strumenti e risorse utili

• Vue Devtools: Un’estensione del browser per il debug di applicazioni Vue.js.
• Vue Router: Gestione delle rotte per creare SPA (Single Page Applications).
• Vuex: Libreria di gestione dello stato per applicazioni complesse.

Conclusione

Configurare Vue.js è un processo semplice e veloce, che ti permette di iniziare immediatamente a costruire applicazioni moderne e performanti. Che tu stia creando un nuovo progetto con Vue CLI o integrando Vue in un progetto esistente, il framework offre flessibilità e potenza per soddisfare ogni esigenza.

Prova oggi stesso Vue.js e scopri quanto può semplificare lo sviluppo front-end!.

Prosegui con i Concetti fondamentali di Vue.js: Un viaggio attraverso le basi