Vue Academy · Pelajaran

Struktur Folder yang Dapat Diskalakan

Atur proyek Vue besar agar mudah dipelihara.

Struktur Folder yang Dapat Diskalakan adalah pelajaran Vue Academy gratis di CoddyKit. Ini adalah pelajaran 3 dari 3. 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 3 pelajaran total.

Struktur Itu Penting

Saat aplikasi Vue berkembang hingga memiliki lebih dari beberapa berkas, cara Anda mengaturnya menentukan seberapa mudah aplikasi tersebut dijelajahi, dipelihara, dan dipahami oleh pengembang baru. Struktur yang baik dapat berkembang; struktur yang kacau memperlambat semua orang.

Organisasi Berdasarkan Tipe

Pendekatan berdasarkan tipe mengelompokkan berkas berdasarkan jenisnya: semua komponen bersama-sama, semua tampilan bersama-sama, dan semua penyimpan status bersama-sama. Pendekatan ini sederhana dan cocok untuk aplikasi kecil hingga menengah.

src/
  components/
  views/
  stores/
  composables/
  router/

Organisasi Berdasarkan Fitur

Pendekatan berdasarkan fitur mengelompokkan berkas berdasarkan fitur yang menaunginya. Semua hal untuk fitur autentikasi berada dalam satu direktori, sehingga aplikasi besar lebih mudah dipahami.

src/
  features/
    auth/
      LoginView.vue
      useAuth.js
      authStore.js
    cart/
      CartView.vue
      cartStore.js

Memilih Pendekatan

Pendekatan berdasarkan tipe sangat cocok untuk aplikasi yang lebih kecil. Saat aplikasi berkembang dan fiturnya bertambah, pendekatan berdasarkan fitur menjaga kode yang saling terkait tetap bersama dan mengurangi perpindahan antar-direktori. Banyak tim memulai dengan pendekatan berdasarkan tipe, lalu bermigrasi seiring skala aplikasi bertambah.

Memisahkan Tampilan dan Komponen

Bedakan tampilan (component tingkat halaman yang dirutekan) dari komponen (blok penyusun yang dapat digunakan kembali). Pemisahan ini memperjelas bagian mana yang dapat dirutekan dan mana yang digunakan bersama.

views/      // routed pages: HomeView.vue, AboutView.vue
components/ // reusable: BaseButton.vue, UserCard.vue

Mengatur Fungsi Komposabel

Simpan logika API Komposisi yang dapat digunakan kembali dalam direktori composables. Penamaan dengan awalan use menunjukkan tujuannya secara sekilas.

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

Mengatur Penyimpan Status

Tempatkan penyimpan status global dalam direktori stores, satu berkas untuk setiap ranah. Dengan begitu, pengelolaan status mudah ditemukan dan bersifat modular.

stores/
  user.js
  cart.js
  settings.js

Konvensi Penamaan

Konsistensi mengurangi hambatan. Gunakan PascalCase untuk berkas component, beri awalan Base pada component dasar, dan gunakan nama yang terdiri dari beberapa kata agar tidak bertabrakan dengan elemen HTML.

// components
BaseButton.vue
BaseInput.vue
UserProfileCard.vue

// composables
useAuth.js

Ekspor Terpusat

Modul ekspor terpusat adalah index.js yang mengekspor ulang isi suatu direktori, sehingga pengguna dapat mengimpor dari satu jalur, bukan dari banyak jalur.

// composables/index.js
export { useAuth } from "./useAuth"
export { useFetch } from "./useFetch"

Mengimpor dari Modul Ekspor Terpusat

Dengan modul ekspor terpusat, beberapa impor diringkas menjadi satu baris yang rapi sehingga keterbacaan meningkat.

import { useAuth, useFetch } from "@/composables"

Menjaga Konsistensi

Apa pun struktur yang Anda pilih, terapkan secara konsisten dan dokumentasikan dalam README proyek. Struktur terbaik adalah struktur yang dipahami dan diikuti seluruh tim. Lakukan pemfaktoran ulang menuju pengelompokan berdasarkan fitur seiring aplikasi berkembang.

Uji Cepat

Uji pengetahuan Anda tentang struktur direktori.

Ringkasan

Atur berdasarkan tipe untuk aplikasi yang lebih kecil dan berdasarkan fitur seiring skala aplikasi bertambah. Pisahkan tampilan yang dirutekan dari komponen yang dapat digunakan kembali, simpan fungsi komposabel dan penyimpan status dalam direktori masing-masing, gunakan penamaan yang konsisten, dan manfaatkan ekspor terpusat untuk impor yang rapi. Konsistensi yang didokumentasikan untuk timlah yang benar-benar membuat struktur dapat diskalakan.

Pertanyaan yang Sering Diajukan

Apakah pelajaran “Struktur Folder yang Dapat Diskalakan” gratis?

Ya — teks lengkap “Struktur Folder yang Dapat Diskalakan” 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 3 pelajaran total.

Apa yang akan aku pelajari di “Struktur Folder yang Dapat Diskalakan”?

Atur proyek Vue besar agar mudah dipelihara. 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 3 dari 3.

Berapa lama pelajaran “Struktur Folder yang Dapat Diskalakan” 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

Mixin dan Direktif Khusus
Pengembangan Plugin
Struktur Folder yang Dapat Diskalakan

← Kembali ke Vue Academy