0Pricing
Vue Academy · Pelajaran

Struktur Proyek Nuxt 3 dan Perutean Berbasis File

Impor otomatis pages/, layouts/, components/, penamaan file untuk rute bertingkat, serta rute tangkap-semua.

Struktur Proyek Nuxt 3 dan Perutean Berbasis File adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 1 dari 4. Kamu bisa membaca pelajaran lengkapnya di bawah secara gratis — lalu praktikkan langsung di browser dengan editor kode bawaan dan tutor AI 24/7. Ini adalah bagian dari jalur belajar Vue Academy, dan progresmu tersinkronisasi di web dan aplikasi CoddyKit. Kursus Vue Academy mencakup 4 pelajaran total.

Apa Itu Nuxt 3

Nuxt 3 adalah metakerangka yang dibangun di atas Vue 3. Nuxt menambahkan render sisi server, perutean berbasis berkas, impor otomatis, dan mesin server sehingga Anda dapat membangun aplikasi Vue tumpukan penuh dengan hampir tanpa konfigurasi.

Direktori pages

Direktori pages/ mengatur perutean. Setiap berkas .vue otomatis menjadi rute—tanpa konfigurasi perute manual. pages/about.vue dipetakan ke /about.

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

Mengaktifkan Perute

Perute aktif segera setelah direktori pages/ tersedia. Tambahkan <NuxtPage /> di app.vue untuk merender halaman yang cocok.

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

Rute Bersarang

Folder membuat jalur bertingkat. pages/blog/index.vue menyajikan /blog, sedangkan pages/blog/archive.vue menyajikan /blog/archive.

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

Segmen Dinamis dengan [id]

Bungkus nama berkas dengan tanda kurung siku untuk membuat segmen dinamis. pages/users/[id].vue cocok dengan /users/42 dan menyediakan id sebagai parameter rute.

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

Pencocokan Semua dengan [...slug]

Bentuk sebar [...slug].vue adalah pencocokan semua. Bentuk ini cocok dengan jalur pada kedalaman apa pun dan ideal untuk konten CMS atau penanganan 404 khusus.

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

Direktori Tata Letak

Folder layouts/ menyimpan komponen pembungkus yang digunakan bersama di berbagai halaman—tajuk, bilah sisi, dan kaki halaman. layouts/default.vue membungkus setiap halaman kecuali ditimpa.

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

Memilih Tata Letak

Sebuah halaman memilih tata letak dengan definePageMeta. Slot di dalam tata letak merender konten halaman.

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

Komponen yang Diimpor Otomatis

Apa pun yang berada di dalam components/ akan diimpor otomatis—tidak diperlukan pernyataan impor. Folder bertingkat menambahkan awalan pada nama: components/base/Button.vue menjadi <BaseButton />.

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

Fungsi Komposabel yang Diimpor Otomatis

Direktori composables/ juga diimpor otomatis. Fungsi yang diekspor di sana—serta bawaan Nuxt seperti useFetch—dapat digunakan di mana saja tanpa impor.

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

Direktori Kunci Lainnya

Nuxt juga mendefinisikan plugins/ (dijalankan saat mulai), middleware/ (penjaga rute), server/ (API dan logika server), serta public/ (aset statis yang disajikan apa adanya).

Pemeriksaan Singkat

Uji pengetahuan Anda tentang struktur dan perutean Nuxt.

Ringkasan

Anda telah mempelajari struktur Nuxt:

  • pages/ menyediakan perutean berbasis berkas; folder membuat rute bersarang.
  • [id] adalah segmen dinamis, sedangkan [...slug] mencocokkan semua.
  • layouts/ membungkus halaman; tata letaknya dipilih melalui definePageMeta.
  • components/ dan composables/ diimpor otomatis.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Struktur Proyek Nuxt 3 dan Perutean Berbasis File” gratis?

Ya — teks lengkap “Struktur Proyek Nuxt 3 dan Perutean Berbasis File” gratis dibaca di sini di web. Untuk praktiknya secara interaktif (editor kode bawaan dan tutor AI 24/7) dan buka sisa kursus Vue Academy, upgrade ke CoddyKit PRO. Kursus Vue Academy mencakup 4 pelajaran total.

Apa yang akan aku pelajari di “Struktur Proyek Nuxt 3 dan Perutean Berbasis File”?

Impor otomatis pages/, layouts/, components/, penamaan file untuk rute bertingkat, serta rute tangkap-semua. Kamu berlatih Vue Academy dengan kode praktik yang langsung kamu jalankan di browser, dan tutor AI 24/7 menjawab pertanyaanmu saat kamu mengerjakan pelajaran ini.

Apakah aku perlu pengalaman untuk memulai Vue Academy?

Tidak diperlukan pengalaman sebelumnya. Vue Academy di CoddyKit dirancang untuk pemula hingga pelajar tingkat lanjut, jadi kamu bisa memulai di sini atau dari awal dan belajar sesuai kecepatan kamu sendiri. Ini adalah pelajaran 1 dari 4.

Berapa lama pelajaran “Struktur Proyek Nuxt 3 dan Perutean Berbasis File” memakan waktu?

Sebagian besar pelajaran CoddyKit memakan waktu sekitar 5–10 menit. Setiap pelajaran ringkas dan interaktif, jadi kamu membuat kemajuan stabil dan melanjutkan dari tempat kamu tinggalkan di web dan aplikasi.

Bisakah aku menulis dan menjalankan kode dalam pelajaran Vue Academy ini?

Ya. Setiap pelajaran Vue Academy menyertakan editor kode bawaan, jadi kamu menulis dan menjalankan kode nyata langsung di browser dan mendapatkan umpan balik AI instan — tidak diperlukan penyiapan lokal.

Semua pelajaran dalam kursus ini

  1. Struktur Proyek Nuxt 3 dan Perutean Berbasis File
  2. Pengambilan Data: useFetch dan useAsyncData
  3. Rute Server dan Endpoint API Nuxt
  4. Mode SSR vs SSG vs SPA
← Kembali ke Vue Academy