Nuxt 3 - ett populärt hybridramverk för Vue

Kör den byggda applikationen:

garnstart

Vad är nytt?

Vue 3 stöd

Vue 3 kom med flera nya funktioner som gör det mycket snabbare och enklare att bygga och underhålla applikationer. De viktigaste ändringarna har gjorts i Global Vue API och Events API. Vue 3introducerar också nya funktioner som provide / inject, composition API (beskrivs nedan), Fragments och Teleport.

Sammansättning API

Composition API är en inbyggd Vue 3-funktion, som tillhandahåller en uppsättning API: er, som gör det möjligt att använda importerade funktioner istället för att deklarera alternativ. Så de viktigaste fördelarna med Composition API är bättre återanvändning av logik, mer flexibel kodorganisation och bra TypeScript-integration. Alla delar av det nya API:et kan användas utanför Vue komponenter.

Nuxt 3 tillhandahåller en ny katalog - sammansatta/ - som gör det möjligt att automatiskt importera Vue composables intro-applikation.

Exempel komponerbar:

// Den kommer att vara tillgänglig som useFoo() (camelCase av filnamn utan tillägg)
 export standardfunktion () {
   return useState('foo', () => 'bar')// Den kommer att vara tillgänglig som useFoo() (camelCase av filnamn utan tillägg)
 export standardfunktion () {
   return useState('foo', () => 'bar')
 }
 }

Exempel på användning av en composable i en Vue komponent:

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

Som du kan se ovan exporteras en composable som useFoo, precis som det deklareras i const-namnet. Om det inte finns något exportnamn kommer den komponerbara att vara tillgänglig som pascelCase i filnamnet. Det gör också att du enkelt kan integrera auto-importerade composables med en populär Vue Store composable som heter Pina.

källa

Nitro-motor

Nitro är en fullstack-server som använder Rollup och Node.js under utveckling för att isolera kod och kontext. Den innehåller också ett server-API och server-mellanprogram. I produktion bygger motorn applikationen och servern i en katalog - `.output`. Saken är den att output är lättviktig: minifierad och utan någon nod moduler. Med Nitro kan du distribuera resultatet på Node.js, Serverless, Workers, Edge-side rendering eller som rent statiskt. 

Nuxt 3 ger möjlighet till driftsättning på Azure eller Netlify utan att någon konfiguration krävs, tillsammans med en Firebase- eller Cloudflare-driftsättning med minimal konfiguration.

Vite

Vite är nästa generations frontend-verktyg, som är en inbyggd funktion för Nuxt 3. Detta verktyg ger en snabbare utvecklingsupplevelse för webbprojekt. För utveckling har server Vite rika funktionsförbättringar jämfört med inbyggda ES-moduler och en mycket snabb Hot Module Replacement (HMR).

I byggprocessen paketerar Vite kod med förkonfigurerad Rollup för att optimera statiska tillgångar för produktion.

Ny filstruktur

källa

Nuxt 3 introducerar en något förändrad filstruktur. De största förändringarna gjordes i `app.vue` - `pages/` katalogen är valfri och om den inte finns kommer applikationen inte att innehålla en vue-router, vilket är användbart när du skapar en laddningssida eller en applikation som inte behöver routing. 

Exempel på app.vue-fil:

Hej, världen!

För att inkludera routing, sidor och layout måste du använda inbyggda komponenter, nämligen `NuxtPage` och `NuxtLayout`. Ett exempel:

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

`app.vue` är huvudkomponenten i Nuxt-ansökanså allt som läggs till där kommer att vara globalt och inkluderas på varje sida. 

Förändringen i Nuxt katalogstruktur innebär att katalogen `store/` ersätts med katalogen `composables/`, eftersom Vue 3introducerar composables som ersätter butiker.

Migrering från Vue 2 till Vue 3 med hjälp av Nuxt Bridge

Nuxt 3 introducerar Nuxt Bridge - ett lager för framåtkompatibilitet som uppgraderar Nuxt 2-applikationer med Nuxt 3-funktioner, så att de kan uppgradera sig själva bit för bit. Det ger tillgång till funktioner som t.ex: Nitro-motorn, Composition API och nya CLI, genom att helt enkelt installera och aktivera bron.

Nuxt Bridge är bakåtkompatibel, så äldre plugins och moduler kommer fortfarande att fungera, medan migrering är enkel och möjlig utan att skriva om hela applikationen.

För att aktivera Nuxt Bridge måste du se till att dev-servern inte körs, sedan ta bort alla paketlåsfiler och installera `nuxt-edge`:

- "nuxt": "^2.15.0"

"nuxt-edge": "senaste"

Därefter installerar du om alla beroenden:

garninstallation

Din migrering med hjälp av Nuxt Bridge är klar!

Ett annat sätt är att installera Nuxt Bridge som ett utvecklingsberoende:

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

Sedan måste du uppdatera skripten i `package.json` för att ta hänsyn till de ändringar som Nitro-servern medför i byggprocessen.