Nuxt 3 - oblíbený hybridní framework Vue

Nuxt 3 byl přepracován a přepsán tak, aby podporoval ESM a TypeScript nativně. V současné době je nestabilní, takže ještě není připraven k výrobě. Vydání prvního kandidáta ([email protected]) je plánováno na 7. dubna 2022.

zdroj

Zahájení nového projektu

Otevřete terminál nebo integrovaný terminál z aplikace Visual Studio. Kód a pomocí následujícího příkazu vytvořte nový startér projekt:

npx nuxi init nuxt3-app

Otevřete složku nuxt3-app:

cd nuxt3-app

Nainstalujte závislosti:

instalace příze

Spusťte vývojový server:

příze dev

Vytvoření aplikace:

sestavení příze

Spusťte sestavenou aplikaci:

začátek příze

Co je nového?

Vue 3 podpora

Vue 3 přišel s několika novými funkcemi, které výrazně urychlují a usnadňují tvorbu a údržbu aplikací. Nejdůležitější změny se týkají rozhraní API Global Vue a rozhraní API Events. Vue 3přináší také nové funkce, jako jsou provide / inject, kompoziční API (popsané níže), fragmenty a teleport.

Složení API

Composition API je vestavěná funkce Vue 3, která poskytuje sadu rozhraní API, jež umožňuje používat importované funkce namísto deklarování možností. Hlavními výhodami Composition API jsou tedy lepší opakované použití logiky, flexibilnější organizace kódu a skvělá integrace TypeScript. Všechny části nového rozhraní API lze používat i mimo Vue komponenty.

Nuxt 3 poskytuje nový adresář - kompozitní materiály/ - který umožňuje automatický import kompozitů Vue do úvodní aplikace.

Příklad složitelný:

// Bude k dispozici jako useFoo() (camelCase názvu souboru bez přípony)
 exportovat výchozí funkci () {
   return useState('foo', () => 'bar')// Bude k dispozici jako useFoo() (camelCase názvu souboru bez přípony)
 exportovat výchozí funkci () {
   return useState('foo', () => 'bar')
 }
 }

Příklad použití kompozitního prvku v Vue součást:

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

Jak vidíte výše, kompozitum je exportováno jako useFoo, přesně tak, jak je deklarováno v názvu const. Pokud není jméno exportováno, bude kompozitum přístupné jako pascelCase názvu souboru. To také umožňuje snadno integrovat automaticky importované kompozitory s populárním kompozitorem Vue Store tzv. Pina.

zdroj

Motor Nitro

Nitro je full-stack server, který používá Rollup a Node.js pracovníků ve vývoji, aby sloužily k izolaci kódu a kontextu. Zahrnuje také serverové rozhraní API a serverový middleware. Ve výrobě engine sestavuje aplikaci a server do jednoho adresáře - `.output`. Jde o to, že výstup je odlehčený: minifikovaný a bez jakýchkoli uzel moduly. Nitro umožňuje nasadit výstup na Node.js, Serverless, Workers, Edge-side rendering nebo jako čistě statický. 

Nuxt 3 poskytuje možnost nasazení na Azure nebo Netlify bez nutnosti konfigurace, spolu s nasazením Firebase nebo Cloudflare s minimální konfigurací.

Vite

Vite je frontendový nástroj nové generace, který je vestavěnou funkcí pro Nuxt 3. Tento nástroj umožňuje rychlejší vývoj webových projektů. Pro vývoj má server Vite bohaté funkční vylepšení oproti nativním modulům ES a velmi rychlou funkci Hot Module Replacement (HMR).

V procesu sestavování Vite spojuje kód s předkonfigurovaným nástrojem Rollup, který optimalizuje statické prostředky pro produkci.

Nová struktura souborů

zdroj

Nuxt 3 zavádí mírně změněnou strukturu souborů. Největší změny byly provedeny v adresáři `app.vue` - adresář `pages/` je nepovinný, a pokud není přítomen, aplikace nebude obsahovat vue-router, což je užitečné při vytváření načítací stránky nebo aplikace, která nepotřebuje routování. 

Příklad souboru app.vue:

Ahoj světe!

Chcete-li zahrnout směrování, stránky a rozvržení, musíte použít vestavěné komponenty, konkrétně `NuxtPage` a `NuxtLayout`. Příklad:

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

`app.vue` je hlavní komponentou systému Aplikace Nuxt, takže vše, co tam bude přidáno, bude globální a bude zahrnuto na každé stránce. 

Změna v Nuxt adresářová struktura zahrnuje nahrazení adresáře `store/` adresářem `composables/`, protože Vue 3zavádí kompozitní materiály, které nahrazují sklady.

Migrace z Vue 2 na Vue 3 pomocí můstku Nuxt Bridge

Nuxt 3 zavádí Nuxt Bridge - vrstvu dopředné kompatibility, která aktualizuje aplikace Nuxt 2 o funkce Nuxt 3 a umožňuje tak jejich postupnou aktualizaci. Poskytuje přístup k funkcím, jako jsou: Nitro engine, kompoziční API a nové CLI, a to pouhou instalací a aktivací můstku.

Nuxt Bridge je zpětně kompatibilní, takže starší zásuvné moduly a moduly budou stále fungovat, zatímco migrace je snadná a možná bez nutnosti přepisovat celou aplikaci.

Chcete-li povolit Nuxt Bridge, musíte se ujistit, že není spuštěn dev server, poté odstranit všechny soubory zámku balíčku a nainstalovat `nuxt-edge`:

- "nuxt": "^2.15.0"

"nuxt-edge": "latest"

Poté znovu nainstalujte všechny závislosti:

instalace příze

Vaše migrace pomocí můstku Nuxt Bridge je dokončena!

Dalším způsobem je instalace Nuxt Bridge jako vývojová závislost:

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

Pak je třeba aktualizovat skripty v souboru `package.json`, aby se zohlednily změny, které do procesu sestavování vnesl server Nitro.