Vue.js layihəsi necə qurulur

Vue.js-in ağıllı və axmaq komponentləri ilə mükəmməl qovluq quruluşu və komponent arxitekturası

Vue.js hay-küydən daha yaxşı bir ön tərəf çərçivəsidir. Başlamaq və veb tətbiqetmə yaratmaq asandır. Vue.js tez-tez kiçik tətbiqetmələr üçün bir çərçivə və bəzən çox kiçik olduğundan jQuery-ə alternativ kimi təsvir olunur! Şəxsən mən bunun daha böyük layihələr üçün də uyğun olduğunu düşünürəm. Bu vəziyyətdə, komponent memarlığı baxımından yaxşı bir şəkildə qurulması vacibdir.

İlk böyük Vue.js layihəmə başlamazdan əvvəl mükəmməl qovluq quruluşunu, komponent memarlığını və adlandırma konvensiyasını tapmaq üçün araşdırma apardım. Vue.js sənədlərini, bəzi məqalələri və bir çox GitHub açıq mənbəli layihələrini nəzərdən keçirdim.

Bəzi suallara cavab tapmaq məcburiyyətində qaldım. Bunu bu yazıda tapa bilərsiniz:

  • Vue.js layihəsindəki faylları və qovluqları necə qurursunuz?
  • Ağıllı və lal komponentləri necə yazırsınız və onları harada yerləşdirirsiniz? Bu React-dan gələn bir anlayışdır.
  • Vue.j-nin kodlaşdırma tərzi və ən yaxşı təcrübələri nədir?

Daha yaxşı başa düşmək üçün ilham aldığım mənbəyi və digər bağlantıları da sənədləşdirəcəyəm.

Vue.js qovluq quruluşu

Budur src qovluğunun məzmunu. Layihəyə Vue CLI ilə başlamağınızı məsləhət görürəm. Şəxsən mən standart veb paket şablonundan istifadə etdim.

. ├── app.css ├── App.vue ├── Varlıqlar │ │ ... ├── Komponentlər │ │ ... ├── main.js ├── mixins │ │ ... ├── Router │ └── index.js ├── saxla ├── ├── index.js │ ├── modulları │ │ └── ... │ │ mutation-types.js ├── tərcümə │ └── index.js ├─ ─ qablar │ │ ... └── baxışlar └── ...

Bu qovluqların hər biri haqqında bəzi detallar:

  • Aktivlər - Bu, komponentlərinizə idxal ediləcək bütün varlıqları yerləşdirdiyiniz yerdir
  • Komponentlər - Layihələrin əsas baxışları olmayan bütün komponentləri
  • mixins - qarışıqlar müxtəlif komponentlərdə yenidən istifadə olunan Javascript kodunun parçalarıdır. Bir qarışıqda hər komponentin metodlarını Vue.js.-dan daxil edə bilərsiniz. Onları istifadə edən komponentlə birləşdirilir.
  • router - Layihələrinizin bütün marşrutları (mənim vəziyyətimdə index.js-də var). Vue.js-də əsasən hər şey bir komponentdir. Ancaq hamısı bir tərəf deyil. Bir səhifədə "/ panel", "/ settings" və ya "/ search" kimi bir marşrut var. Komponentin marşrutu varsa, o yönləndirilir.
  • mağaza (isteğe bağlı) - Mutasiya tipli.js-dəki Vuex sabitləri, alt qovluq modullarındakı Vuex modulları (daha sonra index.js-ə yüklənir).
  • Tərcümələr (isteğe bağlı) - Yerli sənədləri, Vue-i18n istifadə edirəm və olduqca yaxşı işləyir.
  • utils (isteğe bağlı) - bəzi komponentlərdə istifadə etdiyim funksiyalar, məs. B. Regex dəyər testləri, sabitlər və ya filtrlər.
  • Baxışlar - Layihənin oxunmasını asanlaşdırmaq üçün yönləndirilmiş komponentləri ayırıb bu qovluğa qoyacağam. Mənim üçün yönləndirilən komponentlər sadəcə səhifələri təmsil etdikləri və marşrutları olduqları bir komponentdən daha çoxdur. Sonra onları "Baxışlar" a yerləşdirdim, bir səhifəni nəzərdən keçirəndə həmin qovluğa keçin.

Lazım olduqda digər qovluqları əlavə edə bilərsiniz, məsələn. B. Filtrlər və ya sabitlər, API.

Mənə ilham verən bəzi mənbələr

  • 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 ilə lal komponentlərə qarşı ağıllı

Ağıllı və lal komponentlər React-dən öyrəndiyim bir anlayışdır. Ağıllı komponentlərə qablar da deyilir. Dövlət dəyişikliyi ilə məşğul olanlardır. İşlərin necə işlədiyinə görə siz cavabdehsiniz. Əksinə, təqdimat komponentləri də deyilən axmaq komponentlər yalnız görünüşü alır.

MVC nümunələri ilə tanış olduqdan sonra qoruyucu komponentləri görünüşlə, ağıllı komponentləri nəzarətçi ilə müqayisə edə bilərsiniz!

React-da ağıllı və lal komponentlər ümumiyyətlə fərqli qovluqlara, Vue.js-də isə hamısını eyni qovluğa qoyursunuz: komponentlər. Vue.js.-də fərqləndirmək üçün adlandırma konvensiyasından istifadə edin. Deyək ki, axmaq bir kart komponentiniz var. Sonra aşağıdakı adlardan birini istifadə etməlisiniz:

  • BaseCard
  • AppCard
  • VCard

BaseCard istifadə edən və ona bəzi metodlar əlavə edən ağıllı bir komponentiniz varsa, məsələn layihənizə uyğun olaraq adlandıra bilərsiniz:

  • Profil kartı
  • ItemCard
  • NewsCard

Ağıllı komponentiniz yalnız metodlarla "daha ağıllı" bir BaseCard deyilsə, Base (və ya App və ya V) ilə başlamadan yalnız komponentinizə uyğun hər hansı bir ad istifadə edin. Misal:

  • DashboardStatistics
  • Axtarış nəticələri
  • İstifadəçi profili

Bu adlandırma konvensiyası, həmçinin adlandırma konvensiyalarını ehtiva edən Vue.j rəsmi stil təlimatından gəlir!

Adlandırma qaydaları

Rəsmi Vue.j stil bələdçisindən layihənizi yaxşı qurmaq üçün lazım olan bəzi konvensiyalar:

  • Komponent adları, kök tətbiqetmə komponentləri istisna olmaqla, hər zaman birdən çox sözdən ibarət olmalıdır. Məsələn, "Card" yerinə "UserCard" və ya "ProfileCard" istifadə edin.
  • Hər bir komponent öz sənədində olmalıdır.
  • Tək sənədli komponentlərin fayl adları ya həmişə PascalCase, ya da həmişə Kebab halında olmalıdır. "UserCard.vue" və ya "user-card.vue" istifadə edin.
  • Hər tərəfdə yalnız bir dəfə istifadə olunan komponentlər yalnız birinin ola biləcəyini göstərmək üçün "The" prefiksi ilə başlamalıdır. Məsələn, bir naviqasiya çubuğu və ya altbilgi üçün TheNavbar.vue və ya TheFooter.vue istifadə edin.
  • Uşaq komponentləri ana adlarının əvvəlini əlavə etməlidir. Məsələn, "UserCard" da bir "Photo" komponentindən istifadə etmək istəyirsinizsə, adını "UserCardPhoto" qoyun. Bu daha yaxşı oxunaq üçündür, çünki qovluqdakı fayllar ümumiyyətlə əlifba sırası ilə sıralanır.
  • Komponentlərinizin adındakı qısaltma əvəzinə həmişə tam addan istifadə edin. Məsələn, "UDSettings" deyil, "UserDashboardSettings" istifadə edin.

Vue.js rəsmi stil bələdçisi

Vue.js və ya yeni başlayanlarla inkişaf etmiş olsanız da, bu Vue.js stil təlimatı oxunmalıdır. Burada bir çox tövsiyələr və adlandırma qaydaları var. Yapılmalı və edilməyəcək bir çox nümunədən ibarətdir.

Bu yazını bəyəndinizsə, dəstəyinizi göstərmək üçün xahiş edirəm aşağıdakı qeybət düyməsini vurun! Ayrıca, şərh verməkdən və hər cür rəy bildirməkdən çəkinməyin. Məni izləməyi unutmayın!

Buna oxşar daha çox məhsul görmək istərdinizmi? Patreon'da mənə dəstək olun