Vue Academy · Ders

Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme

pages/, layouts/, components/ otomatik içe aktarma, iç içe route'lar için dosya adlandırma ve tümünü yakalayan route'lar.

1. ders / 413 adım

Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Vue Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Vue Academy kursu toplamda 4 dersten oluşur.

Nuxt 3 Nedir

Nuxt 3, Vue 3 üzerine kurulmuş bir üst çerçevedir. Sunucu taraflı görüntüleme, dosya tabanlı yönlendirme, otomatik içe aktarmalar ve neredeyse hiç yapılandırma gerektirmeden tam yığın Vue uygulamaları oluşturmanızı sağlayan bir sunucu altyapısı ekler.

pages Dizini

pages/ dizini yönlendirmeyi belirler. Her .vue dosyası otomatik olarak bir rota olur; elle yönlendirici yapılandırması gerekmez. pages/about.vue, /about yoluna karşılık gelir.

pages/
  index.vue      ->  /
  about.vue      ->  /about
  contact.vue    ->  /contact

Yönlendiriciyi Etkinleştirme

pages/ dizini var olur olmaz yönlendirici etkinleşir. Eşleşen sayfayı görüntülemek için app.vue içine <NuxtPage /> ekleyin.

<!-- app.vue -->
<template>
  <NuxtPage />
</template>

İç İçe Rotalar

Klasörler iç içe yollar oluşturur. pages/blog/index.vue, /blog yolunu; pages/blog/archive.vue ise /blog/archive yolunu sunar.

pages/
  blog/
    index.vue    ->  /blog
    archive.vue  ->  /blog/archive

[id] ile Dinamik Segmentler

Dinamik bir segment oluşturmak için dosya adını köşeli parantez içine alın. pages/users/[id].vue, /users/42 ile eşleşir ve id değerini bir rota parametresi olarak sunar.

// pages/users/[id].vue
const route = useRoute()
const id = route.params.id // "42"

[...slug] ile Tümünü Yakalayan Rota

[...slug].vue yayılım biçimi tümünü yakalayan bir rotadır. Yolun her derinliğiyle eşleşir ve CMS içeriği veya özel 404 işlemesi için idealdir.

pages/
  [...slug].vue  ->  /a, /a/b, /a/b/c ...

layouts Dizini

layouts/ klasörü sayfalar arasında paylaşılan sarmalayıcı bileşenleri barındırır; başlıklar, kenar çubukları ve alt bilgiler gibi. layouts/default.vue, geçersiz kılınmadığı sürece her sayfayı sarar.

<!-- layouts/default.vue -->
<template>
  <header>My Site</header>
  <slot />
</template>

Düzen Seçme

Bir sayfa, düzeni definePageMeta ile seçer. Düzen içindeki slot, sayfa içeriğini görüntüler.

<script setup>
definePageMeta({ layout: 'admin' })
</script>

Otomatik İçe Aktarılan Bileşenler

components/ içindeki her şey otomatik olarak içe aktarılır; içe aktarma ifadesi yazmanız gerekmez. İç içe klasörler ada ön ek ekler: components/base/Button.vue, <BaseButton /> olur.

components/
  TheHeader.vue   ->  <TheHeader />
  base/Button.vue ->  <BaseButton />

Otomatik İçe Aktarılan Composable'lar

composables/ dizini de otomatik olarak içe aktarılır. Burada dışa aktarılan işlevler ve useFetch gibi Nuxt yerleşik işlevleri, içe aktarma yapmadan her yerde kullanılabilir.

// composables/useCounter.ts
export const useCounter = () => useState("c", () => 0)
// usable in any component without importing

Diğer Önemli Dizinler

Nuxt ayrıca plugins/ (başlangıçta çalışır), middleware/ (rota korumaları), server/ (API ve sunucu mantığı) ve public/ (olduğu gibi sunulan statik varlıklar) dizinlerini tanımlar.

Hızlı Sınama

Nuxt yapısı ve yönlendirme hakkındaki bilginizi sınayın.

İnteraktif derste cevapla

Özet

Nuxt yapısını öğrendiniz:

pages/, dosya tabanlı yönlendirme sağlar; klasörler rotaları iç içe yerleştirir.
[id] dinamik bir segmenttir, [...slug] ise tümünü yakalayan bir rotadır.
layouts/, sayfaları sarar; düzen definePageMeta ile seçilir.
components/ ve composables/ otomatik olarak içe aktarılır.

Başlamak ücretsiz

Yapay zeka eğitmeniyle HTML öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 42
Dersler: 156

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme” dersi ücretsiz mi?

Evet — “Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Vue Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Vue Academy kursu toplamda 4 dersten oluşur.

“Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme” dersinde ne öğreneceğim?

pages/, layouts/, components/ otomatik içe aktarma, iç içe route'lar için dosya adlandırma ve tümünü yakalayan route'lar. Vue Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Vue Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Vue Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Vue Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Vue Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

Nuxt 3 Proje Yapısı ve Dosya Tabanlı Yönlendirme
Veri Çekme: useFetch ve useAsyncData
Nuxt Sunucu Route'ları ve API Uç Noktaları
SSR ve SSG ile SPA Modu

← Vue Academy Sayfasına Dön