Nuxt 3 - popularny hybrydowy framework Vue

Nuxt 3 została przeprojektowana i ponownie napisana, aby natywnie obsługiwać ESM i TypeScript. Obecnie jest niestabilna, co sprawia, że nie jest jeszcze gotowa do produkcji. Pierwszy kandydat ([email protected]) ma zostać wydany 7 kwietnia 2022 roku.

źródło

Rozpoczęcie nowego projektu

Otwórz terminal lub otwórz zintegrowany terminal z Visual Studio Kod i użyj następującego polecenia, aby utworzyć nowy starter projekt:

npx nuxi init nuxt3-app

Otwórz folder nuxt3-app:

cd nuxt3-app

Zainstaluj zależności:

yarn install

Uruchom serwer deweloperski:

yarn dev

Tworzenie aplikacji:

budowa przędzy

Uruchom utworzoną aplikację:

początek przędzy

Co nowego?

Vue 3 wsparcie

Vue 3 pojawiła się z kilkoma nowymi funkcjami, które sprawiają, że tworzenie i utrzymywanie aplikacji jest znacznie szybsze i łatwiejsze. Najważniejsze zmiany zostały wprowadzone do Global Vue API i Events API. Vue 3wprowadza również nowe funkcje, takie jak dostarczanie / wstrzykiwanie, API kompozycji (opisane poniżej), Fragmenty i Teleport.

Skład API

Composition API to wbudowana funkcja Vue 3, która zapewnia zestaw interfejsów API, które umożliwiają korzystanie z importowanych funkcji zamiast deklarowania opcji. Główne zalety Composition API to lepsze ponowne wykorzystanie logiki, bardziej elastyczna organizacja kodu i świetna integracja TypeScript. Wszystkie części nowego API mogą być używane poza Vue składniki.

Nuxt 3 zapewnia nowy katalog - composables/ - która umożliwia automatyczne importowanie kompozytów Vue do aplikacji.

Przykład z możliwością komponowania:

// Będzie dostępna jako useFoo() (camelCase nazwy pliku bez rozszerzenia)
 export default function () {
   return useState('foo', () => 'bar')// Będzie dostępna jako useFoo() (camelCase nazwy pliku bez rozszerzenia)
 export default function () {
   return useState('foo', () => 'bar')
 }
 }

Przykład użycia composable w pliku Vue składnik:

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

Jak widać powyżej, composable jest eksportowany jako useFoo, tak jak zadeklarowano w nazwie const. Jeśli nie ma nazwy eksportu, composable będzie dostępny jako pascelCase nazwy pliku. Pozwala to również na łatwą integrację automatycznie importowanych komponentów z popularnym komponentem Vue Store o nazwie Pina.

źródło

Silnik Nitro

Nitro to serwer typu full-stack, który wykorzystuje Rollup i Node.js pracowników w fazie rozwoju, aby zapewnić izolację kodu i kontekstu. Zawiera również API serwera i oprogramowanie pośredniczące serwera. W środowisku produkcyjnym silnik tworzy aplikację i serwer w jednym katalogu - `.output`. Chodzi o to, że dane wyjściowe są lekkie: zminimalizowane i bez żadnych węzeł moduły. Nitro pozwala wdrożyć dane wyjściowe w Node.js, Serverless, Workers, Edge-side rendering lub jako czysto statyczne. 

Nuxt 3 zapewnia możliwość wdrożenia na Azure lub Netlify bez konieczności konfiguracji, wraz z wdrożeniem Firebase lub Cloudflare przy minimalnej konfiguracji.

Vite

Vite to narzędzie frontendowe nowej generacji, które jest wbudowaną funkcją dla Nuxt 3. Narzędzie to zapewnia szybszy rozwój projektów internetowych. Na potrzeby programowania serwer Vite ma bogate ulepszenia funkcji w stosunku do natywnych modułów ES i bardzo szybką wymianę modułów Hot Module Replacement (HMR).

W procesie budowania Vite łączy kod ze wstępnie skonfigurowanym Rollupem, aby zoptymalizować statyczne zasoby do produkcji.

Nowa struktura plików

źródło

Nuxt 3 wprowadza nieco zmienioną strukturę plików. Największe zmiany zaszły w pliku `app.vue` - katalog `pages/` jest opcjonalny i jeśli go nie ma, aplikacja nie będzie zawierała vue-routera, co jest przydatne podczas tworzenia strony ładującej lub aplikacji, która nie potrzebuje routingu. 

Przykładowy plik app.vue:

Hello World!

Aby dołączyć routing, strony i układ, należy użyć wbudowanych komponentów, a mianowicie `NuxtPage` i `NuxtLayout`. Przykład:

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

`app.vue` jest głównym komponentem aplikacji Aplikacja Nuxt, więc wszystko dodane tam będzie globalne i uwzględnione na każdej stronie. 

Zmiana w NuxStruktura katalogów obejmuje zastąpienie katalogu `store/` katalogiem `composables/`, ponieważ Vue 3wprowadza composables, które zastępują sklepy.

Migracja z Vue 2 do Vue 3 przy użyciu Nuxt Bridge

Nuxt 3 wprowadza Nuxt Bridge - warstwę kompatybilności do przodu, która aktualizuje aplikacje Nuxt 2 o funkcje Nuxt 3, umożliwiając im aktualizację kawałek po kawałku. Zapewnia ona dostęp do takich funkcji jak: Silnik Nitro, API kompozycji i nowy CLI, poprzez prostą instalację i aktywację mostu.

Nuxt Bridge jest kompatybilny wstecz, więc starsze wtyczki i moduły będą nadal działać, a migracja jest łatwa i możliwa bez przepisywania całej aplikacji.

Aby włączyć Nuxt Bridge, należy upewnić się, że serwer deweloperski nie jest uruchomiony, a następnie usunąć wszystkie pliki blokady pakietów i zainstalować `nuxt-edge`:

- "nuxt": "^2.15.0"

"nuxt-edge": "latest"

Następnie ponownie zainstaluj wszystkie zależności:

yarn install

Migracja przy użyciu Nuxt Bridge została zakończona!

Innym sposobem jest instalacja Nuxt Bridge jako zależność programistyczna:

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

Następnie należy zaktualizować skrypty w pliku `package.json`, aby uwzględnić zmiany, które serwer Nitro wprowadza do procesu budowania.