Nuxt 3 – vinsælt hybrid-Vue-rammasett

Nuxt 3 var endurhannað og endurskrifað til að styðja ESM og TypeScript Í upprunalegu útgáfu. Hún er nú óstöðug, sem gerir hana enn ekki tilbúna í framleiðslu. Fyrsti frambjóðandinn ([email protected]) er áætlaður til útgáfu 7. apríl 2022.

uppspretta

Að hefja nýtt verkefni

Opnaðu skel eða opnaðu innbyggða skel í Visual Studio. Kóði og notaðu eftirfarandi skipun til að búa til nýjan starter verkefni:

`npx nuxi init nuxt3-app`Hljóðskrift

Opnaðu möppuna nuxt3-app:

Farðu í nuxt3-appHljóðskriftHljóðskrift

Setja upp háðarkerfin:

yarn installHljóðskriftHljóðskriftHljóðskrift

Keyraðu þróunarservernum:

yarn devHljóðskriftHljóðskriftHljóðskriftHljóðskrift

Byggja forritið:

yarn buildHljóðskriftHljóðskriftHljóðskriftHljóðskriftHljóðskrift

Keyrið uppbyggða forritið:

Spuna upphafHljóðskriftHljóðskriftHljóðskriftHljóðskriftHljóðskriftHljóðskrift

Hvað er nýtt?

Vue 3 stuðningur

Vue 3 Kom með nokkrar nýjar aðgerðir sem gera byggingu og viðhald forrita mun hraðara og auðveldara. Mikilvægustu breytingarnar eru gerðar á Global Vue. forritaskil og atburða-API. Vue 3kynnir einnig nýja eiginleika eins og provide/inject, samsetningu API (lýst hér að neðan), brot (Fragments) og Teleport.

Samsetningareininga-API

Composition API er innbyggð Vue 3-eiginleiki sem býður upp á safn API sem gerir kleift að nota innfluttar fall í stað þess að tilgreina valkosti. Helstu kostir Composition API eru betri endurnotkun rökfræði, sveigjanlegri kóðaskipulagning og frábær TypeScript samþætting. Allir hlutar nýja API-sins má nota utan Vue hlutar.

Nuxt 3 veitir nýja möppu – samsettanlega/ – sem gerir kleift að flytja inn Vue samsettan í forritið sjálfkrafa.

Dæmi um samsettan:

// Það verður aðgengilegt sem useFoo() (camelCase af skráarnafninu án viðeigandi viðbótar)
 export default function () {
   return useState('foo', () => 'bar')
 }

// Það verður aðgengilegt sem useFoo() (camelCase af skráarnafninu án viðbótar)
 export default function () {
   return useState('foo', () => 'bar')
 }
 }HljóðskriftHljóðskriftHljóðskriftHljóðskriftHljóðskriftHljóðskriftHljóðskriftHljóðskrift

Dæmi um notkun samsettan í a Vue þáttur:

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

Eins og sjá má hér að ofan er samsettanflutningur útfluttur sem useFoo, eins og tilgreint er í nafni const. Ef ekkert útflutningsnafn er tilgreint verður samsettanflutningurinn aðgengilegur sem pascelCase af nafni skráarinnar. Þetta gerir þér einnig kleift að samþætta sjálfkrafa flutta samsettanflutninga með vinsælum Vue Store samsettanflutningi sem kallast Pína.

uppspretta

Nitro-vél

Nitro er full-stack netþjónn sem notar Rollup og Node.js Verkfæri í þróun til að þjóna kóða- og samhengi-einangrun. Það inniheldur einnig netþjónaviðmót (API) og netþjónamiðlunarhugbúnað. Í framleiðslu byggir vélin forritið og netþjóninn í einn möppu – `.output`. Málið er að útgangurinn er léttur: minnkaður og án nokkurs hnútur einingar. Nitro gerir þér kleift að senda út útgáfuna á Node.js, Serverless, Workers, Edge-side rendering eða sem hreint statískt. 

Nuxt 3 veitir möguleika á að setja upp á Blár eða Netlify án þess að þurfa neina stillingu, ásamt útgáfu á Firebase eða Cloudflare með lágmarksstillingu.

Hraðar

Vite er næstu kynslóðar verkfæri fyrir framenda, sem er innbyggð eiginleiki fyrir Nuxt 3. Þetta tól býður upp á hraðari þróunarupplifun fyrir vefur verkefni. Fyrir þróun býður Vite-þjónninn upp á ríkulegar eiginleikaaukningar miðað við innfædda ES-modúla og mjög hraða heita modílaskipti (HMR).

Í byggingarferlinu pakkar Vite kóða með fyrirfram stilltum Rollup til að hagræða kyrrstæðum auðlindum fyrir framleiðslu.

Ný skráarskipulag

uppspretta

Nuxt 3 Kynnir örlítið breytta skráarskipulag. Stærstu breytingarnar voru gerðar í `app.vue` – `pages/` möppan er valkvæð og ef hún er ekki til staðar mun forritið ekki innihalda vue-router, sem er gagnlegt þegar búið er til hleðslusíðu eða forrit sem þarf ekki leiðsögn. 

Dæmi um app.vue-skrá:

Halló heimur!

Til að innifela leiðsögn, síður og uppsetningu þarftu að nota innbyggða íhluti, þ.e. `NuxtPage` og `NuxtLayout`. Dæmi:

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

`app.vue` er aðalkomponentinn af Nuxt-forrit, svo allt sem bætt er þar verður alheims og innifalið á hverri síðu. 

Breytingin í NuxSkipulag möppna felur í sér að skipta út `store/` fyrir `composables/` möppuna, þar sem Vue 3Kynnir samsettan hluta sem kemur í stað geymslna.

Að flytja frá Vue 2 yfir í Vue 3 með Nuxt Bridge

Nuxt 3 kynnir Nuxt Bridge – framtíðar samhæfislag sem uppfærir Nuxt 2-forrit með eiginleikum Nuxt 3 og gerir þeim kleift að uppfæra sig smám saman. Það veitir aðgang að eiginleikum eins og Nitro-vél, composition API og nýjum CLI, einfaldlega með því að setja upp og virkja brúna.

Nuxt Bridge er afturábak samhæft, svo eldri viðbætur og einingar virka áfram, á meðan flutningur er auðveldur og mögulegur án þess að endurskrifa alla forritið.

Til að virkja Nuxt Bridge þarftu að ganga úr skugga um að þróunaraðilinn (dev server) sé ekki í gangi, fjarlægja allar package lock-skrár og setja upp `nuxt-edge`:

- "nuxt": "^2.15.0"

"nuxt-edge": "latest"

Eftir það, setjið aftur upp allar forsendur:

þráður uppsetning

Innflytjun þín með Nuxt Bridge er lokið!

Önnur leið er að setja upp Núxt Bridge sem þróunaráhengd:

bæta við --dev @nuxt/bridge@npm:@nuxt/bridge-edge

Þá þarftu að uppfæra skriptur í `package.json` til að taka tillit til breytinga sem Nitro-þjónninn kallar fram í byggingarferlinu.