Creazione ed esecuzione di un progetto Vue.js

Cos'è Vue.js?

Vue.js è un framework JavaScript progressivo per la costruzione di interfacce utente. Diversamente da altri grandi framework, Vue è progettato per uno sviluppo incrementale dal basso verso l'alto. Il core library di Vue si concentra solo sul livello di visualizzazione, rendendolo non solo facile da adottare, ma anche semplice da integrare con librerie di terze parti o progetti esistenti. Vue 3 è l'ultima versione di Vue.js, che introduce molte nuove caratteristiche e miglioramenti, tra cui prestazioni più rapide, dimensioni del pacchetto più piccole e un migliore supporto per TypeScript.

Principali caratteristiche e vantaggi di Vue 3

• API compositiva: Organizzazione del codice logico tramite funzioni composte, rendendo il codice più facile da mantenere e riutilizzare.
• Prestazioni migliorate: Vue 3 utilizza oggetti Proxy per implementare il sistema reattivo, migliorando significativamente le prestazioni.
• Dimensioni del pacchetto ridotte: Grazie alla tecnologia di Tree-shaking, le dimensioni del pacchetto di Vue 3 sono inferiori a quelle di Vue 2.
• Miglior supporto per TypeScript: Vue 3 fornisce definizioni di tipo TypeScript migliorate, migliorando l'esperienza di sviluppo.
• Ciclo di vita dei componenti migliorato: Nuovi hook del ciclo di vita, rendendo la logica dei componenti più chiara e gestibile.

Utilizzare Vue 3 può aiutare gli sviluppatori a costruire applicazioni web moderne e reattive in modo più efficiente.

Creare ed eseguire un progetto Vue 3 con ServBay

In questo articolo, utilizzeremo l'ambiente Node.js fornito da ServBay per creare ed eseguire un progetto Vue 3. Utilizzeremo la funzionalità "host" di ServBay per impostare il server web e per accedere al progetto tramite proxy inverso e servizio di file statici.

Creazione del progetto Vue 3

1. Inizializzare il progetto

   Prima di tutto, assicurati di averinstallato l'ambiente Node.js fornito da ServBay. Quindi, utilizza il seguente comando per inizializzare un nuovo progetto Vue 3:

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

   Segui le istruzioni fornite per inserire il nome del progetto (si suggerisce di chiamarlo servbay-vue-app) e selezionare altre opzioni secondo necessità:

   ✔ Nome del progetto: … servbay-vue-app
   ✔ Aggiungere TypeScript? … No
   ✔ Aggiungere supporto JSX? … No
   ✔ Aggiungere Vue Router per lo sviluppo di applicazioni a pagina singola? … Sì
   ✔ Aggiungere Pinia per la gestione dello stato? … No
   ✔ Aggiungere Vitest per i test unitari? … No
   ✔ Aggiungere una soluzione per i test end-to-end? … No
   ✔ Aggiungere ESLint per la qualità del codice? … Sì
   ✔ Aggiungere Prettier per la formattazione del codice? … Sì
   ✔ Aggiungere l'estensione Vue DevTools 7 per il debug? (sperimentale) … No

2. Installare le dipendenze

   Entra nella directory del progetto e installa le dipendenze:

   cd servbay-vue-app
   npm install

Modificare il contenuto di output del progetto Vue

1. Modificare il file src/App.vue

   Apri il file src/App.vue e modifica il contenuto per far sì che la pagina web mostri "Hello ServBay!":

   <template>
     <div id="app">
       <h1>Hello ServBay!</h1>
     </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>

Entrare in modalità sviluppo

1. Eseguire il server di sviluppo

   Avvia il server di sviluppo e specifica la porta (ad esempio: 8585):

   npm run dev -- --port 8585

   Questo avvierà un server di sviluppo locale e esporrà la porta 8585.

2. Configurare il proxy inverso dell'host ServBay

   Utilizza la funzionalità "host" di ServBay per accedere al server di sviluppo tramite proxy inverso. Nelle impostazioni dell' "host" di ServBay, aggiungi un nuovo proxy inverso:

   • Nome: Il mio primo sito di sviluppo Vue
   • Nome di dominio: servbay-vue-test.dev
   • Tipo di host: Proxy inverso
   • IP: 127.0.0.1
   • Porta: 8585

   Per i dettagli sui passaggi di configurazione, consulta aggiungere un sito di sviluppo Nodejs.

3. Accedere alla modalità sviluppo

   Apri un browser e visita https://servbay-vue-test.dev per visualizzare il progetto in tempo reale. Poiché ServBay supporta nomi di dominio personalizzati e certificati SSL gratuiti, godrai di una maggiore sicurezza.

Creare la versione di produzione

1. Creare la versione di produzione

   Una volta completato lo sviluppo, utilizza il seguente comando per creare la versione di produzione:

   npm run build

   Una volta completata la costruzione, i file statici generati si troveranno nella directory dist.

2. Impostare il servizio di file statici

   Utilizza la funzionalità "host" di ServBay per accedere alla versione di produzione tramite servizio di file statici. Nelle impostazioni dell' "host" di ServBay, aggiungi un nuovo sito statico:

   • Nome: Il mio primo sito di produzione Vue
   • Nome di dominio: servbay-vue-test.prod
   • Tipo di host: Statico
   • Directory radice del sito web: /Applications/ServBay/www/servbay-vue-app/dist

3. Accedere alla modalità produzione

   Apri un browser e visita https://servbay-vue-test.prod per visualizzare la versione di produzione. Grazie ai nomi di dominio personalizzati e ai certificati SSL gratuiti forniti da ServBay, il tuo sito web avrà una sicurezza e una credibilità maggiori.

Attraverso i passaggi sopra descritti, hai creato e gestito con successo un progetto Vue 3, utilizzando le funzionalità offerte da ServBay per gestire e accedere al tuo progetto.