Bir Vue.js Projesini Yapılandırma

Akıllı ve dilsiz bileşenlerle mükemmel Vue.js klasör yapısı ve bileşen mimarisi

Vue.js bir yutturmacadan daha fazlası, harika bir ön uç çerçevesi. Buna başlamak ve bir web uygulaması oluşturmak oldukça kolaydır. Vue.js genellikle küçük uygulamalar için bir çerçeve olarak ve bazen de küçük boyutundan dolayı jQuery'ye alternatif olarak tanımlanmaktadır! Şahsen daha büyük projeler için de uygun olabileceğini düşünüyorum ve bu durumda, bileşen mimarisi açısından iyi yapılandırılması önemlidir.

İlk büyük Vue.js projeme başlamadan önce mükemmel klasör yapısını, bileşen mimarisini ve adlandırma kurallarını bulmak için biraz araştırma yaptım. Vue.js belgelerine, birkaç makaleye ve GitHub açık kaynaklı projelerine baktım.

Sahip olduğum birkaç sorunun cevabını bulmalıydım. Bu yayında bulacağınız şey bu:

  • Vue.js projesindeki dosya ve klasörleri nasıl yapılandırırsınız?
  • Smart ve Dumb bileşenlerini nasıl yazarsınız ve bunları nereye koyarsınız? React'ten gelen bir konsept.
  • Vue.js kodlama stili ve en iyi uygulamaları nelerdir?

Daha iyi bir anlayış elde etmek için ilham aldığım kaynak ve diğer bağlantılar ile de belgelerim.

Vue.js klasör yapısı

İşte src klasörünün içeriği. Projeye Vue CLI ile başlamanızı tavsiye ederim. Şahsen varsayılan Webpack şablonunu kullandım.

.
├── app.css
. App.vue
├── varlıklar
│ └── ...
├── bileşenler
│ └── ...
.Js main.js
├── karışımlar
│ └── ...
├── yönlendirici
İndex.js
├── mağaza
İndex.js
├── ├── modüller
│ │ └── ...
Tation └── mutation-types.js
├── çeviriler
İndex.js
İls utils
│ └── ...
└── görüntüleme
    └── ...

Bu klasörlerin her biri hakkında birkaç ayrıntı:

  • varlıklar - Bileşenlerinize aktarılan varlıkları koyduğunuz yer
  • bileşenler - Projelerin ana görünümleri olmayan tüm bileşenleri
  • karışımlar - Karışımlar, javascript kodunun farklı bileşenlerde yeniden kullanılan parçalarıdır. Bir karışımda, Vue.js'den herhangi bir bileşenin yöntemini, onu kullanan bileşenin yöntemleriyle birleştirileceklerini belirleyebilirsiniz.
  • yönlendirici - Projelerinizin tüm rotaları (benim durumumda onları index.js'de bulabilirsiniz). Temel olarak Vue.js'de her şey bir bileşendir. Ancak her şey bir sayfa değildir. Bir sayfada “/ dashboard”, “/ settings” veya “/ search” gibi bir yol var. Bir bileşen bir rotaya sahipse yönlendirilir.
  • store (isteğe bağlı) - Vuex mutation-type.js sabitleri, alt klasör modüllerinde bulunan Vuex modülleri (daha sonra index.js'e yüklenir).
  • çeviriler (isteğe bağlı) - Dosyaları bulur, Vue-i18n kullanıyorum ve çok iyi çalışıyor.
  • utils (isteğe bağlı) - Regex değer testi, sabitler veya filtreler gibi bazı bileşenlerde kullandığım işlevler.
  • views - Projeyi okumayı hızlandırmak için, yönlendirilen bileşenleri ayırıp bu klasöre koyarım. Benim için yönlendirilen bileşenler, sayfaları temsil ettiği ve rotaları olduğu için bir bileşenden daha fazlasıdır, onları “görünümlere” koyarım, sonra bir sayfayı kontrol ettiğinizde bu klasöre gidersiniz.

Sonunda, filtreler veya sabitler gibi API gereksinimlerinize bağlı olarak başka klasörler ekleyebilirsiniz.

İlham aldığım bazı kaynaklar

  • https://vuex.vuejs.org/en/structure.html
  • https://github.com/vuejs/vue-hackernews-2.0/tree/master/src
  • https://github.com/mchandleraz/realworld-vue/tree/master/src

Vue.js ile akıllı vs aptal bileşenleri

Akıllı ve dilsiz bileşenler React'ten öğrendiğim bir kavram. Akıllı bileşenlere ayrıca kap denir, durum değişikliklerini yapanlar onlar işlerin nasıl yürüdüğünden sorumludur. Buna karşılık, aynı zamanda sunum olarak da adlandırılan dilsiz bileşenler, yalnızca görünüm ve hissi idare ediyor.

MVC modelini biliyorsanız, döküm bileşenlerini Görünüm ile ve akıllı bileşenleri Denetleyici ile karşılaştırabilirsiniz!

React smart ve dumb bileşenleri genellikle farklı klasörlere yerleştirilir, oysa Vue.js'de hepsini aynı klasöre koyarsınız: components. Vue.js'de ayırt etmek için bir adlandırma kuralı kullanacaksınız. Diyelim ki aptal bir kart bileşeniniz var, o zaman bu isimlerden birini kullanmalısınız:

  • BaseCard
  • AppCard
  • VCard

BaseCard kullanan akıllı bir bileşeniniz varsa ve ona bazı yöntemler eklerse, örneğin projenize bağlı olarak adını belirleyebilirsiniz:

  • ProfileCard
  • ItemCard
  • NewsCard

Akıllı bileşeniniz yalnızca "Akıllı" bir BaseCard yöntemi değilse, bileşeninize uyan ve Base (veya App veya V) ile başlamadan yalnızca herhangi bir ad kullanın, örneğin:

  • DashboardStatistics
  • Arama sonuçları
  • Kullanıcı profili

Bu adlandırma kuralı, aynı zamanda adlandırma kuralları da içeren Vue.js resmi stil kılavuzundan gelir!

Adlandırma kuralları

İşte Vue.js resmi stil kılavuzundan gelen ve projenizi iyi yapılandırmanız gereken bazı sözleşmeler:

  • Kök “App” bileşenleri dışındaki bileşen adları her zaman çok kelimeli olmalıdır. Örneğin, “Kart” yerine “Kullanıcı Kartı” veya “Profil Kartı” kullanın.
  • Her bileşen kendi dosyasında olmalıdır.
  • Tek dosya bileşenlerinin dosya adları her zaman PascalCase veya her zaman kebab-case olmalıdır. “UserCard.vue” veya “user-card.vue” kullanın.
  • Sayfa başına yalnızca bir kez kullanılan bileşenler, yalnızca birinin olabileceğini belirtmek için “The” ön ekiyle başlamalıdır. Örneğin bir navbar veya altbilgi için “TheNavbar.vue” veya “TheFooter.vue” kullanmalısınız.
  • Alt bileşenler ana adlarını önek olarak içermelidir. Örneğin, “UserCard” içinde kullanılan bir “Fotoğraf” bileşeni istiyorsanız, “UserCardPhoto” olarak adlandırın. Bir klasördeki dosyalar genellikle alfabetik olarak sıralandığı için daha iyi okunabilirlik sağlar.
  • Bileşenlerin adında kısaltma yerine her zaman tam adı kullan. Örneğin, “UDSettings” kullanmayın, yerine “UserDashboardSettings” kullanın.

Vue.js resmi stil rehberi

Vue.js konusunda ileri düzeyde ya da acemi olsanız da, bu Vue.js stil kılavuzunu okumanız gerekir, birçok ipucu ve adlandırma kuralları da içerir. Yapılacak ve yapılmayacak birçok şey içerir.

Bu yayını beğendiyseniz, lütfen desteğinizi göstermek için birkaç kez altındaki pdüğmesine tıklayın! Ayrıca, yorum yapmaktan ve herhangi bir geri bildirimde bulunmaktan çekinmeyin. Beni takip etmeyi unutma!

Bunun gibi daha fazla makale görmek ister misiniz? Beni Patreon'da destekle