Creazione e gestione di un progetto Vue.js con ServBay
Vue.js è un moderno framework JavaScript progressivo per la realizzazione di interfacce utente. Facile da apprendere, versatile e performante, è ideale soprattutto per lo sviluppo di Single Page Application (SPA). ServBay, potente ambiente di sviluppo web locale, offre agli sviluppatori un comodo supporto a Node.js per macOS e Windows, rendendolo la piattaforma ideale per sviluppare con Vue.js.
Questa guida ti mostrerà passo passo come creare un progetto Vue.js partendo da zero, sfruttando l’ambiente integrato di ServBay, e come accedervi sia in modalità di sviluppo che di produzione.
Cos’è Vue.js?
Vue.js è un framework JavaScript progressivo per la costruzione di interfacce utente. A differenza di altri framework più “pesanti”, Vue adotta un approccio incrementale: la libreria core si occupa solo del livello di vista, garantendo una facile integrazione con librerie di terze parti o progetti esistenti. L’ultima versione, Vue 3, introduce molte novità e miglioramenti, tra i quali performance superiori, dimensioni del pacchetto ridotte e un migliore supporto a TypeScript.
Principali caratteristiche e vantaggi di Vue 3
- Composition API: Organizzazione delle logiche tramite funzioni combinate, ideale per la manutenzione e il riuso di codice su componenti complessi.
- Performance migliorate: Vue 3 usa Proxy per la reattività e ottimizza la virtual DOM, ottenendo notevoli vantaggi in termini di velocità.
- Pacchetto più leggero: Grazie alla tecnica del Tree Shaking, la libreria principale è più piccola e si carica più rapidamente.
- Supporto avanzato a TypeScript: Tipizzazione completa che migliora la produttività di chi sviluppa Vue con TypeScript.
- Ciclo di vita dei componenti migliorato: Nuovi hook di ciclo di vita e la funzione Setup rendono più chiara e gestibile la logica dei componenti.
Vue 3 aiuta a sviluppare web app moderne, reattive ed efficienti con grande rapidità.
Creazione e gestione di un progetto Vue.js sfruttando ServBay
In questa guida utilizzeremo l’ambiente Node.js fornito da ServBay per creare e avviare un progetto Vue.js. La funzione Sito web di ServBay permette di configurare facilmente il web server, gestire reverse proxy e fornire file statici per l’accesso locale al progetto.
Prerequisiti
Assicurati di avere:
- ServBay installato: Hai installato correttamente l’ambiente di sviluppo locale ServBay.
- Node.js installato tramite ServBay: Hai installato Node.js tramite la gestione pacchetti di ServBay. Per dettagli consulta Installazione e uso di Node.js su ServBay.
Come creare un progetto Vue.js
Inizializzazione del progetto
Avvia il terminale. ServBay suggerisce di posizionare i progetti nella directory predefinita. Entra in questa cartella e inizializza un nuovo progetto Vue.js con
npm create vue@latest
. Il flag@latest
garantisce che venga utilizzata la versione più recente del CLI (di solito Vue 3).macOS:
bashcd /Applications/ServBay/www npm create vue@latest
1
2Windows:
cmdcd C:\ServBay\www npm create vue@latest
1
2Segui le istruzioni sul terminale per dare un nome al progetto (es.
servbay-vue-app
) e seleziona le opzioni necessarie, come TypeScript, Vue Router, Pinia e altro. Esempio di configurazione:bash✔ Project name: … servbay-vue-app ✔ Add TypeScript? … No # Scegli Yes o No in base alle tue esigenze ✔ Add JSX Support? … No # Scegli Yes o No in base alle tue esigenze ✔ Add Vue Router for Single Page Application development? … Yes # Consigliato Yes ✔ Add Pinia for state management? … No # Scegli Yes o No in base alle tue esigenze ✔ Add Vitest for Unit testing? … No # Scegli Yes o No in base alle tue esigenze ✔ Add an End-to-End Testing Solution? … No # Scegli Yes o No in base alle tue esigenze ✔ Add ESLint for code quality? … Yes # Consigliato Yes ✔ Add Prettier for code formatting? … Yes # Consigliato Yes ✔ Add Vue DevTools 7 extension for debugging? (experimental) … No # Scegli Yes o No in base alle tue esigenze
1
2
3
4
5
6
7
8
9
10Installazione delle dipendenze
Una volta creato il progetto, entra nella cartella
servbay-vue-app
e installa tutte le dipendenze con:bashcd servbay-vue-app npm install
1
2
Modifica del contenuto di esempio del progetto (opzionale)
Per verificare che il progetto funzioni correttamente, modifica il file src/App.vue
sostituendo il contenuto di default con una semplice scritta "Hello ServBay!".
Apri il file src/App.vue
e inserisci:
html
<template>
<div id="app">
<h1>Hello ServBay!</h1>
<p>This is a Vue.js app running via ServBay.</p>
</div>
</template>
<script>
export default {
name: 'App'
}
</script>
<style>
#app {
font-family: Avenir, Helvetica, Arial, sans-serif;
text-align: center;
color: #2c3e50;
margin-top: 60px;
}
</style>
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
Configurazione dell’ambiente di sviluppo (Reverse Proxy)
Normalmente, in fase di sviluppo Vue avvia un server locale (basato su Vite o Webpack) che offre hot reload (HMR). ServBay può creare un dominio locale che si mappa via reverse proxy all’indirizzo e porta del dev server.
Avvia il server di sviluppo
Avvia il server di sviluppo nella cartella principale del progetto. Imposta la porta (ad esempio 8585), assicurandoti che sia libera.
bashnpm run dev -- --port 8585
1Il terminale mostrerà che il server è attivo all’indirizzo
http://localhost:8585
.Configura il reverse proxy su ServBay
Apri ServBay, vai su Siti web e aggiungi una nuova configurazione scegliendo il tipo reverse proxy:
- Nome:
My first Vue dev site
(o altro nome facilmente identificabile) - Dominio:
servbay-vue-dev.servbay.demo
(o altro dominio.servbay.demo
a scelta) - Tipo di sito:
Reverse Proxy
- IP di destinazione:
127.0.0.1
- Porta di destinazione:
8585
(uguale a quella del server di sviluppo)
Salva la configurazione: ServBay aggiornerà automaticamente il web server (Caddy o Nginx) per mappare il dominio
servbay-vue-dev.servbay.demo
suhttp://127.0.0.1:8585
.Per dettagli sulla configurazione di siti Node.js con ServBay, consulta Aggiunta di siti di sviluppo Node.js su ServBay.
- Nome:
Accesso in modalità sviluppo
Assicurati che il web server di ServBay sia in esecuzione. Apri il browser e visita il dominio configurato
https://servbay-vue-dev.servbay.demo
.ServBay genera automaticamente i certificati SSL per i domini locali (tramite ServBay User CA o ServBay Public CA), consentendoti di testare il sito in HTTPS, in modo simile a un ambiente di produzione. Per informazioni sulle impostazioni SSL, vedi Configurare i certificati SSL per un sito su ServBay.
Ora puoi vedere la web app Vue in esecuzione in modalità sviluppo, con la comodità dell’hot reload.
Build di produzione e distribuzione (hosting statico)
A fine sviluppo, puoi creare una versione ottimizzata per la produzione del tuo progetto Vue.js. Questo build genera file statici (HTML, CSS, JavaScript), che ServBay può servire facilmente tramite la funzione Sito statico.
Genera il build di produzione
Esegui il comando:
bashnpm run build
1Il build produrrà una raccolta di file ottimizzati nella cartella
dist
all’interno del progetto.Configurazione del servizio file statici
Apri ServBay, vai su Siti web e aggiungi una nuova configurazione selezionando il tipo Statico:
- Nome:
My first Vue production site
(o altro nome facilmente identificabile) - Dominio:
servbay-vue-prod.servbay.demo
(o altro dominio.servbay.demo
a scelta) - Tipo di sito:
Statico
- Cartella radice: indica il percorso assoluto della cartella
dist
generata:- macOS:
/Applications/ServBay/www/servbay-vue-app/dist
- Windows:
C:\ServBay\www\servbay-vue-app\dist
- macOS:
Salva la configurazione: ServBay servirà direttamente i file statici dal percorso specificato.
- Nome:
Accesso in modalità produzione
Assicurati che il web server di ServBay sia attivo. Apri il browser e visita il dominio configurato per la produzione
https://servbay-vue-prod.servbay.demo
.Ora vedi la versione ottimizzata della tua app Vue, preparata per performance elevate. Grazie ai domini personalizzati e all’SSL automatico di ServBay, puoi testare la produzione in locale in modo sicuro.
Note e consigli
- Conflitti sulle porte: Se la porta scelta per
npm run dev
(es. 8585) è occupata, il comando fallirà. Cambia porta e aggiorna anche la configurazione del reverse proxy su ServBay. - Stato del web server ServBay: Verifica sempre che il web server (Caddy o Nginx, in base alle tue impostazioni) sia attivo, altrimenti non potrai accedere al sito tramite il dominio configurato.
- Risoluzione dei domini: ServBay configura automaticamente i domini
.servbay.demo
per puntare all’indirizzo locale (127.0.0.1
). Se usi altri domini, dovrai modificare il file hosts di sistema o usare la funzione Hosts Manager di ServBay per risolvere correttamente sul locale.
Sintesi
Usando ServBay puoi allestire facilmente su macOS e Windows un ambiente di sviluppo locale integrato con Node.js, gestendo in modo semplice l’intero ciclo di vita di un progetto Vue.js, dalla fase di sviluppo fino alla distribuzione in produzione. La funzione Sito web di ServBay permette di configurare velocemente reverse proxy per lo sviluppo, oppure di pubblicare direttamente file statici del build di produzione, il tutto con domini personalizzati e certificati SSL generati automaticamente, per lavorare in sicurezza e con grande praticità. Questo semplifica e velocizza l’intera esperienza di sviluppo front-end con Vue.js.