ServBay

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Italiano

English
简体中文
繁體中文
Español
العربية
Português
Русский
日本語
Deutsch
Français
Tiếng Việt
Türkçe
हिन्दी
Bahasa Indonesia
Bahasa Melayu
Polski
Nederlands
Українська
ไทย
한국어

Appearance

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:

  1. ServBay installato: Hai installato correttamente l’ambiente di sviluppo locale ServBay.
  2. 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 ​

  1. 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:

    bash
    cd /Applications/ServBay/www
npm create vue@latest

    Windows:

    cmd
    cd C:\ServBay\www
npm create vue@latest

    Segui 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

  2. Installazione delle dipendenze

    Una volta creato il progetto, entra nella cartella servbay-vue-app e installa tutte le dipendenze con:

    bash
    cd servbay-vue-app
npm install

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>

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.

  1. 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.

    bash
    npm run dev -- --port 8585

    Il terminale mostrerà che il server è attivo all’indirizzo http://localhost:8585.

  2. 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 su http://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.

  3. 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.

  1. Genera il build di produzione

    Esegui il comando:

    bash
    npm run build

    Il build produrrà una raccolta di file ottimizzati nella cartella dist all’interno del progetto.

  2. 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

    Salva la configurazione: ServBay servirà direttamente i file statici dal percorso specificato.

  3. 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.