Nuxt 3 - un popolare framework ibrido Vue

Nuxt 3 è stato riarchitettato e riscritto per supportare ESM e TypeScript in modo nativo. Attualmente è instabile, il che lo rende non ancora pronto per la produzione. Il rilascio del primo candidato ([email protected]) è previsto per il 7 aprile 2022.

fonte

Avvio di un nuovo progetto

Aprite un terminale o aprite un terminale integrato da Visual Studio. Codice e utilizzare il comando seguente per creare un nuovo starter progetto:

npx nuxi init nuxt3-app

Aprite la cartella nuxt3-app:

cd nuxt3-app

Installare le dipendenze:

installazione di yarn

Eseguire il server di sviluppo:

yarn dev

Costruire l'applicazione:

costruzione di yarn

Eseguire l'applicazione creata:

inizio filato

Cosa c'è di nuovo?

Vue 3 supporto

Vue 3 ha introdotto diverse nuove funzionalità che rendono la costruzione e la manutenzione delle applicazioni molto più veloce e semplice. Le modifiche più importanti riguardano l'API Global Vue e l'API Events. Vue 3introduce anche nuove funzionalità come fornire/iniettare, API di composizione (descritte di seguito), frammenti e teletrasporto.

Composizione API

Composition API è una funzione integrata di Vue 3 che fornisce una serie di API che consentono di utilizzare le funzioni importate invece di dichiarare le opzioni. I principali vantaggi di Composition API sono quindi un migliore riutilizzo della logica, un'organizzazione più flessibile del codice e una grande integrazione con TypeScript. Tutte le parti della nuova API possono essere utilizzate al di fuori di Vue componenti.

Nuxt 3 fornisce una nuova directory - componibili/ - che consente di importare automaticamente i compositi Vue nell'applicazione.

Esempio componibile:

// Sarà disponibile come useFoo() (camelCase del nome del file senza estensione)
 esportare la funzione predefinita () {
   return useState('foo', () => 'bar')// Sarà disponibile come useFoo() (camelCase del nome del file senza estensione)
 esportare la funzione predefinita () {
   return useState('foo', () => 'bar')
 }
 }

Esempio di utilizzo di un componibile in un file Vue componente:

<div>{{ foo }}</div>
</>

Come si può vedere sopra, un componibile viene esportato come useFoo, proprio come dichiarato nel nome const. Se non c'è un nome di esportazione, il componibile sarà accessibile come pascelCase del nome del file. Consente inoltre di integrare facilmente i componibili importati automaticamente con un popolare componibile di Vue Store chiamato Pina.

fonte

Motore Nitro

Nitro è un server full-stack che utilizza Rollup e Node.js per l'isolamento del codice e del contesto. Include anche un'API per il server e un middleware per il server. In produzione, il motore costruisce l'applicazione e il server in un'unica cartella, `.output`. Il fatto è che l'output è leggero: minificato e senza alcun nodo moduli. Nitro consente di distribuire l'output su Node.js, Serverless, Workers, Edge-side rendering o come puramente statico. 

Nuxt 3 offre la possibilità di distribuire su Azure o Netlify senza alcuna configurazione, oltre a distribuire su Firebase o Cloudflare con una configurazione minima.

Vite

Vite è un tooling di frontend di nuova generazione, che è una funzionalità integrata di Nuxt 3. Questo strumento offre un'esperienza di sviluppo più rapida per i progetti web. Per lo sviluppo, il server Vite offre una serie di funzionalità migliorate rispetto ai moduli ES nativi e una sostituzione a caldo dei moduli (HMR) molto veloce.

Durante il processo di costruzione, Vite raggruppa il codice con Rollup preconfigurati per ottimizzare le risorse statiche per la produzione.

Nuova struttura dei file

fonte

Nuxt 3 introduce una struttura di file leggermente modificata. Le modifiche più importanti sono state apportate a `app.vue` - la cartella `pages/` è opzionale e se non è presente, l'applicazione non includerà un vue-router, il che è utile quando si crea una pagina di caricamento o un'applicazione che non ha bisogno di routing. 

Esempio di file app.vue:

Ciao mondo!

Per includere le rotte, le pagine e il layout, è necessario utilizzare i componenti incorporati, ossia `NuxtPage` e `NuxtLayout`. Esempio:

<div>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;</p>
<p>&nbsp;&nbsp;&nbsp;&nbsp;</p>
</div>

`app.vue` è il componente principale di Applicazione Nuxt, quindi tutto ciò che viene aggiunto lì sarà globale e incluso in ogni pagina. 

La variazione del NuxLa struttura delle directory prevede la sostituzione della directory `store/` con quella `composables/`, dal momento che Vue 3introduce i componibili che sostituiscono i negozi.

Migrazione da Vue 2 a Vue 3 con Nuxt Bridge

Nuxt 3 introduce Nuxt Bridge, uno strato di compatibilità che aggiorna le applicazioni Nuxt 2 con le funzionalità di Nuxt 3, consentendo di aggiornarsi pezzo per pezzo. Fornisce l'accesso a funzionalità quali: Motore Nitro, API di composizione e nuova CLI, semplicemente installando e attivando il bridge.

Nuxt Bridge è retrocompatibile, quindi i plugin e i moduli legacy continueranno a funzionare, mentre la migrazione è facile e possibile senza riscrivere l'intera applicazione.

Per abilitare Nuxt Bridge, bisogna assicurarsi che il server dev non sia in esecuzione, quindi rimuovere tutti i file di blocco del pacchetto e installare `nuxt-edge`:

- "nuxt": "^2.15.0"

"nuxt-edge": "latest"

Successivamente, reinstallare tutte le dipendenze:

installare yarn

La migrazione con Nuxt Bridge è terminata!

Un altro modo è quello di installare Nuxt Bridge come dipendenza di sviluppo:

yarn add --dev @nuxt/bridge@npm:@nuxt/bridge-edge

Quindi è necessario aggiornare gli script in `package.json` per tenere conto delle modifiche apportate dal server Nitro al processo di costruzione.