Struktura projektu Nuxt 3 i routing oparty na plikach
Automatyczny import z pages/, layouts/ i components/, nazewnictwo plików dla zagnieżdżonych tras oraz trasy catch-all.
Struktura projektu Nuxt 3 i routing oparty na plikach to bezpłatna lekcja Vue Academy na CoddyKit. To lekcja 1 z 4. Możesz przeczytać całą lekcję poniżej za darmo — a potem ćwiczyć ją interaktywnie w przeglądarce z wbudowanym edytorem kodu i tutorem AI dostępnym 24/7. To część ścieżki edukacyjnej Vue Academy, a Twój postęp synchronizuje się między webem a aplikacją CoddyKit. Kurs Vue Academy zawiera 4 lekcji w sumie.
Czym jest Nuxt 3?
Nuxt 3 to metaframework oparty na Vue 3. Dodaje renderowanie po stronie serwera, routing oparty na plikach, automatyczne importy i silnik serwerowy, dzięki czemu można tworzyć pełne aplikacje Vue niemal bez konfiguracji.
Katalog pages
Katalog pages/ steruje routingiem. Każdy plik .vue automatycznie staje się trasą — ręczna konfiguracja routera nie jest potrzebna. pages/about.vue mapuje się na /about.
pages/
index.vue -> /
about.vue -> /about
contact.vue -> /contactWłączanie routera
Router zostaje aktywowany, gdy tylko istnieje katalog pages/. Należy dodać <NuxtPage /> w pliku app.vue, aby wyrenderować dopasowaną stronę.
<!-- app.vue -->
<template>
<NuxtPage />
</template>Zagnieżdżone trasy
Foldery tworzą zagnieżdżone ścieżki. pages/blog/index.vue obsługuje /blog, a pages/blog/archive.vue obsługuje /blog/archive.
pages/
blog/
index.vue -> /blog
archive.vue -> /blog/archiveDynamiczne segmenty z [id]
Umieszczenie nazwy pliku w nawiasach kwadratowych tworzy dynamiczny segment. pages/users/[id].vue pasuje do /users/42, udostępniając id jako parametr trasy.
// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"Catch-all z [...slug]
Forma rozwinięta [...slug].vue to catch-all. Pasuje do ścieżek o dowolnej głębokości i jest idealna dla treści z CMS-u lub niestandardowej obsługi błędu 404.
pages/
[...slug].vue -> /a, /a/b, /a/b/c ...Katalog layouts
Folder layouts/ zawiera komponenty opakowujące, współdzielone między stronami — nagłówki, paski boczne i stopki. layouts/default.vue opakowuje każdą stronę, chyba że zostanie zastąpiony innym layoutem.
<!-- layouts/default.vue -->
<template>
<header>My Site</header>
<slot />
</template>Wybór layoutu
Strona wybiera layout za pomocą definePageMeta. Slot w layoucie renderuje treść strony.
<script setup>
definePageMeta({ layout: 'admin' })
</script>Komponenty importowane automatycznie
Wszystko w katalogu components/ jest importowane automatycznie — instrukcja importu nie jest potrzebna. Zagnieżdżone foldery dodają prefiks do nazwy: components/base/Button.vue staje się <BaseButton />.
components/
TheHeader.vue -> <TheHeader />
base/Button.vue -> <BaseButton />Composable importowane automatycznie
Katalog composables/ również jest importowany automatycznie. Eksportowane w nim funkcje — a także wbudowane funkcje Nuxt, takie jak useFetch — są dostępne wszędzie bez importów.
// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importingInne ważne katalogi
Nuxt definiuje również plugins/ (uruchamiane podczas startu), middleware/ (strażnicy tras), server/ (logika API i serwera) oraz public/ (zasoby statyczne udostępniane bez zmian).
Szybki test
Sprawdźmy wiedzę na temat struktury Nuxt i routingu.
Podsumowanie
Opanowano strukturę Nuxt:
- pages/ zapewnia routing oparty na plikach; foldery tworzą zagnieżdżone trasy.
- [id] to dynamiczny segment, a [...slug] to catch-all.
- layouts/ opakowuje strony; layout wybiera się za pomocą definePageMeta.
- components/ i composables/ są importowane automatycznie.
Ucz się HTML dzięki korepetycjom AI — za darmo
Pisz i uruchamiaj kod w przeglądarce, otrzymuj natychmiastową pomoc od korepetytora AI dostępnego 24/7 i kontynuuj naukę w sieci lub w aplikacji.
- Kursy
- 42
- Lekcje
- 156
Często zadawane pytania
Czy lekcja „Struktura projektu Nuxt 3 i routing oparty na plikach” jest bezpłatna?
Tak — pełny tekst „Struktura projektu Nuxt 3 i routing oparty na plikach” jest dostępny za darmo tutaj w sieci. Aby ćwiczyć ją interaktywnie (wbudowany edytor kodu i tutor AI dostępny 24/7) i odblokować resztę kursu Vue Academy, przejdź na CoddyKit PRO. Kurs Vue Academy zawiera 4 lekcji w sumie.
Co nauczysz się w „Struktura projektu Nuxt 3 i routing oparty na plikach”?
Automatyczny import z pages/, layouts/ i components/, nazewnictwo plików dla zagnieżdżonych tras oraz trasy catch-all. Ćwiczysz Vue Academy z praktycznym kodem, który uruchamiasz bezpośrednio w przeglądarce, a tutor AI dostępny 24/7 odpowiada na Twoje pytania podczas pracy nad lekcją.
Czy potrzebuję doświadczenia, aby zacząć Vue Academy?
Nie wymagamy żadnego doświadczenia. Vue Academy w CoddyKit jest strukturyzowany dla początkujących i zaawansowanych użytkowników, więc możesz zacząć tutaj lub od początku i uczyć się w swoim tempie. To lekcja 1 z 4.
Ile czasu zajmuje lekcja „Struktura projektu Nuxt 3 i routing oparty na plikach”?
Większość lekcji CoddyKit trwa około 5–10 minut. Każda lekcja to mały, interaktywny krok, dzięki czemu robisz systematyczne postępy i zawsze wracasz dokładnie do tego samego miejsca — na webie i w aplikacji.
Czy mogę pisać i uruchamiać kod w tej lekcji Vue Academy?
Tak. Każda lekcja Vue Academy zawiera wbudowany edytor kodu, więc piszesz i uruchamiasz prawdziwy kod bezpośrednio w przeglądarce i od razu otrzymujesz sprzężenie zwrotne od AI — bez konfiguracji na komputerze.
Wszystkie lekcje w tym kursie
- Struktura projektu Nuxt 3 i routing oparty na plikach
- Pobieranie danych: useFetch i useAsyncData
- Trasy serwerowe i endpointy API w Nuxt
- Tryby SSR, SSG i SPA