Si të strukturojmë një projekt Vue.js

Struktura e përsosur e dosjeve dhe arkitektura e përbërësve të Vue.js me përbërës inteligjentë dhe budallenj

Më shumë sesa hype, Vue.js është një kornizë e shkëlqyeshme e përparme. Easyshtë e lehtë të fillosh dhe të krijosh një aplikacion në internet. Vue.js shpesh përshkruhet si një kornizë për aplikacione të vogla dhe nganjëherë edhe si një alternativë ndaj jQuery pasi është shumë e vogël! Personalisht, mendoj se është i përshtatshëm edhe për projekte më të mëdha. Në këtë rast, është e rëndësishme që të strukturohet mirë sa i përket arkitekturës përbërëse.

Para se të filloja projektin tim të parë të madh Vue.js, unë bëra disa hulumtime për të gjetur strukturën e përsosur të dosjeve, arkitekturën e përbërësve dhe konventën e emrave. Kam shikuar dokumentacionin e Vue.js, disa artikuj dhe shumë projekte me burim të hapur të GitHub.

Unë kisha për të gjetur përgjigje për disa nga pyetjet e mia. Ju mund ta gjeni në këtë postim:

  • Si i strukturoni skedarët dhe dosjet në projektin Vue.js?
  • Si i shkruani përbërësit e zgjuar dhe memecë dhe ku i vendosni ato? Shtë një koncept nga React.
  • Cili është stili i kodimit dhe praktikat më të mira të Vue.j?

Unë gjithashtu do të dokumentoj me burimin nga i cili isha frymëzuar dhe lidhje të tjera për një kuptim më të mirë.

Struktura e dosjes Vue.js

Këtu janë përmbajtjet e dosjes src. Unë ju rekomandoj që të filloni projektin me Vue CLI. Personalisht, unë përdora modelin standard të faqeve të internetit.

. ├── app.css ├── App.vue ├── Asete │ │ ... Komponentët │ │ ... ├── main.js ├── mixins │ │ ... Router │ └── index.js ├── kurseni ├── indeks.js │ ules modulet │ │ └── ... │ │ mutation-types.js ├── përkthime │ └── index.js ─ Enë kuzhine │ │ ... Pamje └── ...

Disa detaje rreth secilës prej këtyre dosjeve:

  • Pasuritë - këtu vendosni të gjitha pasuritë që do të importohen në përbërësit tuaj
  • Komponentët - Të gjithë përbërësit e projekteve që nuk janë pikëpamjet kryesore
  • mixins - Mixins janë pjesët e kodit Javascript që ripërdoren në përbërës të ndryshëm. Në një mixin mund të futni metodat e secilit komponent nga Vue.js. Ato bashkohen me ato të përbërësit që i përdor ato.
  • router - Të gjitha rrugët e projekteve tuaja (në rastin tim i kam ato në index.js). Në thelb gjithçka në Vue.js është një përbërës. Por jo të gjitha janë njëra palë. Një faqe ka një itinerar si "/ pult", "/ settings" ose "/ search". Nëse një përbërës ka një itinerar, ai përcillet.
  • depo (opsionale) - Konstantat Vuex në tipin mutacion.js, modulet Vuex në modulet e nën-dosjeve (të cilat më pas ngarkohen në index.js).
  • Përkthime (opsionale) - Skedarët e lokalizimit, po përdor Vue-i18n dhe funksionon mjaft mirë.
  • utils (opsionale) - funksionet që përdor në disa përbërës, p.sh. B. Testet, konstante ose filtra të vlerës Regex.
  • Pamjet - Për ta bërë projektin më të lehtë për të lexuar, unë do të veçoj përbërësit e kursyer dhe do t'i vendos në këtë dosje. Komponentët që janë përcjellë për mua janë më shumë sesa thjesht një përbërës pasi përfaqësojnë faqe dhe kanë itinerare. Më pas i vendosa në "Views", kur rishikoni një faqe, kaloni në atë dosje.

Mund të shtoni dosje të tjera sipas nevojës, p.sh. B. Filtrat ose konstantat, API.

Disa burime që më frymëzuan

  • 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

Komponentë inteligjentë kundrejt memec me Vue.js

Komponentët e zgjuar dhe memecë janë një koncept që mësova nga React. Komponentët inteligjentë quhen edhe kontejnerë. Ata janë ata që merren me ndryshimet e shtetit. Ju jeni përgjegjës për mënyrën se si funksionojnë gjërat. Përkundrazi, përbërësit budallenj, të quajtur edhe përbërës të prezantimit, marrin vetëm pamjen.

Pasi të njiheni me modelet MVC, mund të krahasoni komponentët rezervë me pamjen dhe komponentët inteligjentë me kontrolluesin!

Në React, përbërësit e zgjuar dhe memec zakonisht vendosen në dosje të ndryshme, ndërsa në Vue.js i vendosni të gjithë në të njëjtën dosje: komponentët. Përdorni një konventë emërtimi për të bërë diferencën në Vue.js. Le të themi se keni një përbërës budalla të kartës. Atëherë duhet të përdorni një nga emrat e mëposhtëm:

  • Karta Base
  • Karta e aplikacionit
  • Karta VC

Nëse keni një komponent inteligjent që përdor BaseCard dhe shton disa metoda në të, mund ta emëroni në varësi të projektit tuaj, për shembull:

  • Karta e Profilit
  • Karta e artikullit
  • Karta e lajmeve

Nëse përbërësi juaj inteligjent nuk është thjesht një BaseCard "më i zgjuar" me metoda, thjesht përdorni çdo emër që i përshtatet komponentit tuaj pa filluar me Base (ose Aplikacionin ose V). Shembull:

  • Statistikat e panelit të kontrollit
  • Rezultatet e kërkimit
  • Profili i perdoruesit

Kjo konventë emërtimesh vjen nga udhëzuesi zyrtar i stilit nga Vue.j, i cili gjithashtu përmban konventa emërtimi!

Rregullat e emërtimit

Këtu janë disa konventa nga udhëzuesi zyrtar i stilit Vue.j që ju nevojiten për të organizuar mirë projektin tuaj:

  • Emrat e përbërësve gjithmonë duhet të përbëhen nga shumë fjalë, me përjashtim të përbërësve të aplikacionit rrënjë. Për shembull, përdorni "UserCard" ose "ProfileCard" në vend të "Card".
  • Secili komponent duhet të jetë në skedarin e vet.
  • Emrat e skedarëve të përbërësve me një skedar të vetëm duhet të jenë gjithmonë PascalCase ose gjithmonë me shkronja qebap. Përdorni "UserCard.vue" ose "user-card.vue".
  • Komponentët që përdoren vetëm një herë për çdo anë duhet të fillojnë me parashtesën "The" për të treguar se mund të ketë vetëm një. Për shembull, për një shirit navigimi ose fund të faqes, përdorni TheNavbar.vue ose TheFooter.vue.
  • Komponentët e fëmijëve duhet të parashtesojnë emrin e tyre prind. Për shembull, nëse doni të përdorni një përbërës "Photo" në "UserCard", vendoseni emrin "UserCardPhoto". Kjo është për një lexueshmëri më të mirë, pasi skedarët në një dosje zakonisht renditen alfabetikisht.
  • Gjithmonë përdorni emrin e plotë në vend të shkurtesës në emrin e përbërësve tuaj. Për shembull, mos përdorni "UDSettings" por "UserDashboardSettings".

Udhëzuesi zyrtar i stilit Vue.js

Pavarësisht nëse jeni të avancuar me Vue.js ose fillestar, ky udhëzues i stilit Vue.js duhet të lexohet. Ai përmban shumë këshilla dhe gjithashtu konventa emërtimi. Ai përmban shumë shembuj të gjërave që duhen bërë dhe që nuk duhen bërë.

Nëse e keni shijuar këtë postim, ju lutemi klikoni butonin thashetheme më poshtë disa herë për të treguar mbështetjen tuaj! Gjithashtu, mos ngurroni të komentoni dhe të jepni çdo lloj reagimi. Mos harroni të më ndiqni!

Dëshironi të shihni më shumë artikuj si ky? Më ndihmoni në Patreon