Vue.js loyihasini qanday tuzish kerak

Vue.js mukammal papka tuzilishi va aqlli va soqov tarkibiy qismlarga ega komponentlar arxitekturasi

Vue.js bu hiyla-nayrang emas, bu juda yaxshi jabhaning ramkasi. Buni boshlash va veb-ilovani yaratish juda oson. Vue.js ko'pincha kichik ilovalar uchun asos sifatida va ba'zan kichik o'lchamlari tufayli jQuery-ga alternativa sifatida tavsiflanadi! Shaxsan men u katta loyihalarga ham mos kelishi mumkin deb o'ylayman va bu holda uni tarkibiy arxitektura nuqtai nazaridan yaxshi tuzish muhimdir.

Mening birinchi katta Vue.js loyihamni boshlashdan oldin men papkaning mukammal tuzilishini, tarkibiy tuzilish arxitekturasini va nomlash konvensiyasini topish uchun bir oz tadqiq qildim. Men Vue.js hujjatlari, bir nechta maqolalar va ko'plab GitHub ochiq manbali loyihalarini ko'rib chiqdim.

Bir nechta savollarga javob topishim kerak edi. Ushbu postdan topasiz:

  • Vue.js loyihasidagi fayllar va papkalarni qanday tuzasiz?
  • Smart va Dumb komponentlarini qanday yozasiz va ularni qaerga qo'yasiz? Bu React-dan kelib chiqadigan tushuncha.
  • Vue.js kodlash uslubi va eng yaxshi amaliyot nima?

Men ilhomlangan manbani va yaxshiroq tushunish uchun boshqa havolalarni ham hujjatlashtiraman.

Vue.js papkaning tuzilishi

Bu erda src papkasining tarkibi. Men sizga loyihani Vue CLI bilan boshlashni maslahat beraman. Men shaxsan standart Webpack shablonidan foydalandim.

.
├── App.css
├── App.vue
├── aktivlar
│ └── ...
├── tarkibiy qismlar
│ └── ...
├── asosiy.js
├── aralashmalar
│ └── ...
├── yo'riqnoma
│ └── indeks.js
├── do'kon
│ ├── indeks.js
│ ├── modullari
│ │ └── ...
│ └── mutatsion-turlari.js
├── tarjimalar
│ └── indeks.js
├── buyumlar
│ └── ...
└── ko'rib chiqildi
    └── ...

Ushbu jildlarning har biri haqida bir nechta tafsilotlar:

  • aktivlar - Sizning tarkibiy qismlarga import qilingan har qanday aktivlarni qaerga joylashtirasiz
  • komponentlar - Asosiy ko'rinishga ega bo'lmagan loyihalarning barcha tarkibiy qismlari
  • mixins - aralashmalar javascript kodining turli qismlarida qayta ishlatiladigan qismidir. Mixinga siz Vue.js-dan biron bir komponent usulini qo'yishingiz mumkin, ular uni ishlatadigan komponent bilan birlashtiriladi.
  • yo'riqnoma - Sizning loyihalaringizning barcha yo'nalishlari (mening holda men ularni index.js-da). Asosan Vue.js-da hamma narsa komponent hisoblanadi. Ammo hamma narsa sahifa emas. Sahifada "/ boshqaruv paneli", "/ sozlamalar" yoki "/ qidirish" kabi yo'nalish mavjud. Agar tarkibiy qism marshrutga ega bo'lsa.
  • do'kon (ixtiyoriy) - Mutatsiya tipidagi.jsda Vuex doimiylari, pastki papka modullaridagi Vuex modullari (keyinchalik index.js-ga yuklanadi).
  • tarjimalari (ixtiyoriy) - Mahalliy fayllar, men Vue-i18n-dan foydalanaman va juda yaxshi ishlaydi.
  • yordamchi vositalar (ixtiyoriy) - Men ba'zi tarkibiy qismlarda ishlatadigan funktsiyalar, masalan, regex qiymatini tekshirish, konstantalar yoki filtrlar.
  • Ko'rishlar - o'qishni tezlashtirish uchun men yo'naltirilgan tarkibiy qismlarni ajratib, ularni ushbu jildga qo'yaman. Menga yo'naltirilgan tarkibiy qismlar shunchaki tarkibiy qismlardan ko'proq, chunki ular sahifalarni ifodalaydi va ularda marshrutlar mavjud, men ularni "ko'rinishlar" ga qo'yaman, keyin sahifani ko'rgandan so'ng siz ushbu jildga o'tasiz.

Oxir-oqibat, sizning ehtiyojingizga qarab boshqa papkalarni qo'shishingiz mumkin, masalan filtrlar yoki konstantalar, API.

Men ilhomlantirgan ba'zi manbalar

  • 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 bilan aqlli va soqov komponentlar

Aqlli va soqov tarkibiy qismlar - bu React-dan o'rgangan tushuncha. Aqlli tarkibiy qismlar konteynerlar deb ham ataladi, ular davlat o'zgarishlarini boshqaradiganlar, narsalar qanday ishlashiga javob berishadi. Aksincha, soqov tarkibiy qismlari, shuningdek, taqdimot deb ataladi, ular faqat tashqi ko'rinish va hissiyotlarni boshqaradi.

Agar siz MVC modeli bilan tanish bo'lsangiz, siz axlat tarkibiy qismlarini View va aqlli tarkibiy qismlarni Controller bilan solishtirishingiz mumkin!

In React-da aqlli va soqov tarkibiy qismlar odatda turli xil papkalarga joylashtiriladi, Vue.js-da esa ularni bitta papkaga joylashtirasiz: komponentlar. Vue.js-da farqlash uchun siz nomlash konvensiyasidan foydalanasiz. Aytaylik, sizda soqov karta komponentasi bor, shunda siz ushbu ismlardan birini ishlatishingiz kerak:

  • BaseCard
  • AppCard
  • VCard

Agar sizda BaseCard-dan foydalanadigan va unga ba'zi usullarni qo'shadigan aqlli komponentangiz bo'lsa, masalan, loyihangizga qarab uni nomlashingiz mumkin:

  • Profil kartasi
  • ItemCard
  • NewsCard

Agar sizning aqlli tarkibiy qismingiz nafaqat "Smarter" BaseCard, balki usullarga ega bo'lsa, komponentangizga mos keladigan va Base (yoki App yoki V) dan boshlamagan har qanday ismdan foydalaning, masalan:

  • DashboardStatistikasi
  • Qidiruv natijalari
  • UserProfile

Ushbu nomlash bo'yicha konventsiya Vue.js rasmiy uslublar qo'llanmasidan olingan bo'lib, unda nomlash konvensiyalari ham mavjud!

Anjumanlarni nomlash

Vue.js rasmiy uslubiy qo'llanmasidan bir nechta anjumanlar bo'lib, ular sizning loyihangizni yaxshi tashkil qilishi kerak:

  • Komponent nomlari har doim ko'p so'zlardan iborat bo'lishi kerak, faqat "App" ildiz komponentlaridan tashqari. Masalan, "Card" o'rniga "UserCard" yoki "ProfileCard" dan foydalaning.
  • Har bir tarkibiy qism o'z faylida bo'lishi kerak.
  • Bir faylli tarkibiy qismlarning fayl nomlari har doim PascalCase yoki har doim kabob-case bo'lishi kerak. "UserCard.vue" yoki "user-card.vue" dan foydalaning.
  • Bitta sahifada bir marta ishlatiladigan komponentlar faqat bitta bo'lishi mumkinligini anglatuvchi "The" prefiksidan boshlanishi kerak. Masalan, navbar yoki pastki хөл uchun "TheNavbar.vue" yoki "TheFooter.vue" dan foydalanish kerak.
  • Bola tarkibiy qismlariga ularning ota-onalari ismlari qo'shimchalar sifatida kiritilishi kerak. Masalan, agar siz "UserCard" da ishlatiladigan "Photo" komponentasini xohlasangiz, uni "UserCardPhoto" deb nomlaysiz. Bu yaxshiroq o'qish uchun, chunki papkadagi fayllar odatda alifbo tartibida buyurtma qilinadi.
  • Komponentlaringiz nomidagi qisqartmalar o'rniga har doim to'liq ismdan foydalaning. Masalan, "UDSettings" dan foydalanmang, "UserDashboardSettings" o'rniga foydalaning.

Vue.js rasmiy uslubi

Siz Vue.js-ning ilg'or yoki boshlang'ich bo'lishidan qat'i nazar, ushbu Vue.js uslubini o'qib chiqishingiz kerak, unda ko'plab maslahatlar va shuningdek, nomlash konvensiyalari mavjud. Unda bajarilishi kerak bo'lgan va qilmaslik kerak bo'lgan narsalar haqida ko'plab misollar mavjud.

Agar sizga ushbu xabar yoqqan bo'lsa, iltimos, qo'llab-quvvatlashingizni ko'rsatish uchun pastdagi tugmani bir necha marta bosing! Shuningdek, o'z fikringizni bildiring va har qanday fikr bildiring. Menga ergashishni unutmang!

Shunga o'xshash boshqa maqolalarni ko'rishni xohlaysizmi? Meni Patreonda qo'llab-quvvatlang