Vue Academy · Ders

Ölçeklenebilir Klasör Yapısı

Büyük Vue projelerini sürdürülebilirlik için düzenleyin.

Ölçeklenebilir Klasör Yapısı, CoddyKit'te ücretsiz bir Vue Academy dersidir. Bu, 3 dersinin 3. 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 3 dersten oluşur.

Yapı Önemlidir

Bir Vue uygulaması birkaç dosyayı aştığında, uygulamayı nasıl düzenlediğinizde gezinmenin, bakım yapmanın ve yeni geliştiricileri ekibe dahil etmenin ne kadar kolay olacağını belirler. İyi bir yapı ölçeklenir; karmaşık bir yapı ise herkesi yavaşlatır.

Türe Göre Organizasyon

Türe göre yaklaşım, dosyaları ne olduklarına göre gruplandırır: tüm component'ler bir arada, tüm görünümler bir arada, tüm durum depoları bir arada. Bu yaklaşım basittir ve küçük ile orta büyüklükteki uygulamalarda iyi çalışır.

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

Özelliğe Göre Organizasyon

Özelliğe göre yaklaşım, dosyaları ait oldukları özelliğe göre gruplandırır. Kimlik doğrulama özelliğiyle ilgili her şey tek bir klasörde bulunur; bu da büyük uygulamaları anlamayı kolaylaştırır.

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

Bir Yaklaşım Seçme

Küçük uygulamalar için türe göre yaklaşım harikadır. Uygulama büyüyüp özelliklerin sayısı arttıkça, özelliğe göre yaklaşım ilişkili kodları bir arada tutar ve klasörler arasında gidip gelmeyi azaltır. Birçok ekip türe göre yaklaşımla başlar ve ölçek büyüdükçe geçiş yapar.

Görünümleri ve Component'leri Ayırma

Görünümleri (sayfa düzeyindeki, yönlendirmeyle açılan component'ler) component'lerden (yeniden kullanılabilir yapı taşlarından) ayırın. Bu ayrım, hangi parçaların yönlendirilebilir, hangilerinin ortak kullanılabilir olduğunu netleştirir.

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

Bileştirilebilir İşlevleri Düzenleme

Yeniden kullanılabilir Bileşim API'si mantığını bir composables klasöründe tutun. Bunları use ön ekiyle adlandırmak, amaçlarını bir bakışta belli eder.

composables/
  useAuth.js
  useFetch.js
  useLocalStorage.js

Durum Depolarını Düzenleme

Global durum depolarını bir stores klasörüne yerleştirin ve her alan için bir dosya kullanın. Bu, durum yönetimini keşfedilebilir ve modüler tutar.

stores/
  user.js
  cart.js
  settings.js

Adlandırma Kuralları

Tutarlılık, gereksiz uğraşı azaltır. Component dosyaları için PascalCase kullanın, temel component'lerin önüne Base ekleyin ve HTML öğeleriyle çakışmayı önlemek için birden fazla sözcükten oluşan adlar kullanın.

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

// composables
useAuth.js

Merkez Dışa Aktarımları

Merkez dosyası, bir klasörün içeriğini yeniden dışa aktaran bir index.js dosyasıdır; böylece kullanıcılar birçok yol yerine tek bir yoldan içe aktarım yapar.

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

Merkez Dosyasından İçe Aktarma

Merkez dosyası sayesinde birden çok içe aktarım tek ve düzenli bir satırda birleştirilir; bu da okunabilirliği artırır.

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

Tutarlılığı Korumak

Hangi yapıyı seçerseniz seçin, onu tutarlı biçimde uygulayın ve proje README dosyasında belgeleyin. En iyi yapı, tüm ekibin anladığı ve uyguladığı yapıdır. Uygulama büyüdükçe özelliklere göre bir yapıya doğru yeniden düzenleyin.

Hızlı Kontrol

Klasör yapısı hakkındaki bilginizi sınayın.

Özet

Daha küçük uygulamalarda türe, ölçeği büyüttükçe özelliğe göre düzenleyin. Yönlendirilen görünümleri yeniden kullanılabilir component'lerden ayırın; bileştirilebilir işlevleri ve durum depolarını kendi klasörlerinde tutun, tutarlı adlandırma kurallarını izleyin ve düzenli içe aktarımlar için merkez dosyası dışa aktarımlarını kullanın. Ekibin kullanımına sunulan tutarlılık, bir yapıyı gerçekten ölçeklenebilir kılan şeydir.

Sıkça Sorulan Sorular

“Ölçeklenebilir Klasör Yapısı” dersi ücretsiz mi?

Evet — “Ölçeklenebilir Klasör Yapısı” 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 3 dersten oluşur.

“Ölçeklenebilir Klasör Yapısı” dersinde ne öğreneceğim?

Büyük Vue projelerini sürdürülebilirlik için düzenleyin. 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, 3 dersinin 3. dersidir.

“Ölçeklenebilir Klasör Yapısı” 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

← Vue Academy Sayfasına Dön