Creare ed eseguire un progetto Nuxt.js

Cos'è Nuxt.js?

Nuxt.js è un framework open source basato su Vue.js per la costruzione di applicazioni Vue.js con rendering lato server. Offre una vasta gamma di funzionalità come il rendering lato server (SSR), la generazione di siti statici (SSG), la divisione automatica del codice, un potente sistema di routing e altro, consentendo agli sviluppatori di costruire applicazioni web moderne in modo più efficiente.

Principali caratteristiche e vantaggi di Nuxt.js

• Rendering lato server (SSR): Migliora la velocità di caricamento delle pagine e le performance SEO.
• Generazione di siti statici (SSG): Pre-renderizza le pagine statiche, migliorando le performance e l'esperienza utente.
• Divisione automatica del codice: Carica solo il codice JavaScript necessario per la pagina corrente, ottimizzando così le performance.
• Routing integrato: Routing basato sul file system senza necessità di configurazioni aggiuntive.
• Modulare: Estende facilmente le funzionalità tramite moduli, integrando librerie e servizi di terze parti.
• Ecosistema potente: Nuxt.js dispone di un'ampia varietà di plugin e moduli, rendendo lo sviluppo più comodo.

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

Creare ed eseguire un progetto Nuxt.js con ServBay

In questo articolo, utilizzeremo l'ambiente Node.js offerto da ServBay per creare ed eseguire un progetto Nuxt.js. Utilizzeremo la funzione 'Host' di ServBay per configurare il server web e accedere al progetto tramite il reverse proxy e il servizio di file statici.

Creare un progetto Nuxt.js

1. Inizializzare il progetto

   Prima di tutto, assicurati di aver già installato l'ambiente Node.js fornito da ServBay. Poi, utilizza il seguente comando per inizializzare un nuovo progetto Nuxt.js:

   cd /Applications/ServBay/www
   npx create-nuxt-app servbay-nuxt-app

   Segui le istruzioni per inserire il nome del progetto (si consiglia di chiamarlo servbay-nuxt-app) e scegliere le altre opzioni necessarie:

   ? Nome progetto: servbay-nuxt-app
   ? Linguaggio di programmazione: JavaScript
   ? Gestore pacchetti: Npm
   ? Framework UI: Nessuno
   ? Moduli Nuxt.js: Axios
   ? Strumenti di linting: ESLint
   ? Framework di testing: Nessuno
   ? Modalità di rendering: Universale (SSR / SSG)
   ? Destinazione del deploy: Server (hosting Node.js)
   ? Strumenti di sviluppo: jsconfig.json (Raccomandato per VS Code)

2. Installare le dipendenze

   Entra nella directory del progetto e installa le dipendenze:

   cd servbay-nuxt-app
   npm install

Modificare il contenuto di output del progetto Nuxt.js

1. Modificare il file pages/index.vue

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

   <template>
     <div>
       <h1>Hello ServBay!</h1>
     </div>
   </template>
   
   <script>
   export default {
     name: 'IndexPage'
   }
   </script>
   
   <style>
   div {
     text-align: center;
     margin-top: 50px;
   }
   </style>

Entrare in modalità sviluppo

1. Eseguire il server di sviluppo

   Avvia il server di sviluppo specificando la porta (esempio: 8585):

   npm run dev -- --port 8585

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

2. Configurare il reverse proxy dell'host di ServBay

   Utilizza la funzione 'Host' di ServBay per accedere al server di sviluppo tramite il reverse proxy. Nelle impostazioni degli host di ServBay, aggiungi un nuovo reverse proxy:

   • Nome: Il mio primo sito di sviluppo Nuxt.js
   • Nome di dominio: servbay-nuxt-test.dev
   • Tipo di host: Reverse proxy
   • IP: 127.0.0.1
   • Porta: 8585

   Per i dettagli sulle impostazioni, fai riferimento a aggiungere un sito di sviluppo Nodejs.

3. Accedere alla modalità sviluppo

   Apri il browser e accedi a https://servbay-nuxt-test.dev per vedere il progetto in tempo reale. Poiché ServBay supporta i nomi di dominio personalizzati e i certificati SSL gratuiti, beneficerai di una maggiore sicurezza.

Costruire la versione di produzione

1. Costruire la versione di produzione

   Una volta terminato lo sviluppo, utilizza il seguente comando per costruire la versione di produzione:

   npm run build
   npm run export

   Dopo la costruzione, i file statici generati si troveranno nella directory dist.

2. Configurare il servizio di file statici

   Utilizza la funzione 'Host' di ServBay per accedere alla versione di produzione tramite il servizio di file statici. Nelle impostazioni degli host di ServBay, aggiungi un nuovo sito statico:

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

3. Accedere alla modalità di produzione

   Apri il browser e accedi a https://servbay-nuxt-test.prod per vedere la versione di produzione costruita. Grazie ai nomi di dominio personalizzati e ai certificati SSL gratuiti offerti da ServBay, il tuo sito sarà più sicuro e affidabile.

Seguendo questi passaggi, avrai creato ed eseguito con successo un progetto Nuxt.js e utilizzato le funzionalità offerte da ServBay per gestire e accedere al tuo progetto.