Kā strukturēt Vue.js projektu

Ideāla Vue.js mapes struktūra un komponentu arhitektūra ar viedajiem un mēmajiem komponentiem

Vue.js ir kas vairāk nekā hype, tas ir lielisks frontend ietvars. Ir diezgan viegli to sākt un izveidot tīmekļa lietotni. Vue.js tā mazā izmēra dēļ bieži tiek aprakstīts kā ietvars mazām lietotnēm un pat dažreiz kā alternatīva jQuery! Es personīgi domāju, ka tas var būt piemērots arī lielākiem projektiem, un šajā gadījumā ir svarīgi to labi strukturēt, ņemot vērā komponentu arhitektūru.

Pirms mana lielā Vue.js projekta uzsākšanas es veica dažus pētījumus, lai atrastu perfektu mapju struktūru, komponentu arhitektūru un nosaukšanas kārtību. Es apmeklēju Vue.js dokumentāciju, dažus rakstus un daudzus GitHub atvērtā koda projektus.

Man vajadzēja atrast atbildes uz dažiem man uzdotajiem jautājumiem. To jūs atradīsit šajā rakstā:

  • Kā strukturēt failus un mapes projektā Vue.js?
  • Kā jūs rakstāt Smart un Dumb komponentus un kur tos ievietojat? Tā ir koncepcija, kas nāk no React.
  • Kāds ir Vue.js kodēšanas stils un labākā prakse?

Es dokumentēšu arī avotu, no kura iedvesmojos, un citas saites, lai labāk saprastu.

Vue.js mapes struktūra

Šeit ir src mapes saturs. Es iesaku jums sākt projektu ar Vue CLI. Es personīgi izmantoju noklusējuma Webpack veidni.

.
├── app.css
├── App.vue
├── aktīvi
│ └── ...
├── sastāvdaļas
│ └── ...
├── main.js
├── maisījumi
│ └── ...
├── maršrutētājs
│ └── indekss.js
├── veikals
│ ├── indekss.js
│ ├── moduļi
│ │ └── ...
│ └── mutācijas-tips.js
├── tulkojumi
│ └── indekss.js
├── utils
│ └── ...
└── skati
    └── ...

Dažas ziņas par katru no šīm mapēm:

  • aktīvi - kur jūs ievietojat komponentus, kas tiek importēti
  • komponenti - visas projektu sastāvdaļas, kuras nav galvenie skatījumi
  • mixins - mixins ir javascript koda daļas, kas tiek atkārtoti izmantotas dažādos komponentos. Sajaukumā jūs varat ievietot jebkura komponenta metodes no Vue.js, un tās tiks apvienotas ar tām komponentēm, kuras to izmanto.
  • maršrutētājs - visi jūsu projektu maršruti (manā gadījumā tie ir indeksā.js). Būtībā vietnē Vue.js viss ir sastāvdaļa. Bet ne viss ir lapa. Lapai ir maršruts, piemēram, “/ informācijas panelis”, “/ iestatījumi” vai “/ meklēšana”. Ja sastāvdaļai ir maršruts, tā tiek maršrutēta.
  • veikals (neobligāti) - Vuex konstantes mutācijas type.js formātā, Vuex moduļi apakšmapes moduļos (kas pēc tam tiek ielādēti index.js).
  • tulkojumi (pēc izvēles) - lokalizē failus, es izmantoju Vue-i18n, un tas darbojas diezgan labi.
  • utils (pēc izvēles) - funkcijas, kuras izmantoju dažos komponentos, piemēram, regex vērtības testēšana, konstantes vai filtri.
  • skati - lai padarītu projektu ātrāku lasīšanu, es nodalīju maršrutētos komponentus un ievietoju tos šajā mapē. Komponenti, kas man ir novirzīti, ir vairāk nekā komponenti, jo tie attēlo lapas un tiem ir maršruti, es tos ievietoju “skatos”, tad, kad jūs pārbaudāt lapu, uz kuru dodaties šajā mapē.

Jūs varat pievienot citas mapes atkarībā no jūsu vajadzības, piemēram, filtrus vai konstantes, API.

Daži resursi, no kuriem iedvesmojos

  • 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

Gudri vai mēmi komponenti ar Vue.js

Gudri un mēmi komponenti ir jēdziens, ko apguvu no React. Viedās sastāvdaļas sauc arī par konteineriem. Viņi ir tie, kas apstrādā stāvokļa izmaiņas, viņi ir atbildīgi par to, kā lietas darbojas. Tieši pretēji, mēmās sastāvdaļas, ko sauc arī par prezentācijas, apstrādā tikai izskatu un sajūtu.

Ja jūs esat iepazinušies ar MVC modeli, jūs varat salīdzināt izmestus komponentus skatā un viedos komponentus kontrolierim!

React viedie un mēmie komponenti parasti tiek ievietoti dažādās mapēs, savukārt vietnē Vue.js jūs tos visus ievietojat vienā mapē: komponenti. Lai diferencētu vietni Vue.js, izmantojat nosaukumu piešķiršanas kārtību. Pieņemsim, ka jums ir mēms kartes elements, jums vajadzētu izmantot vienu no šiem nosaukumiem:

  • BaseCard
  • AppCard
  • VCard

Ja jums ir viedais komponents, kas izmanto BaseCard un tam pievieno dažas metodes, varat to, piemēram, nosaukt atkarībā no jūsu projekta:

  • Profila karte
  • ItemCard
  • NewsCard

Ja jūsu viedais komponents ir ne tikai “gudrāka” bāzes karte ar metodēm, izmantojiet tikai jebkuru nosaukumu, kas piemērots jūsu komponentam, un, piemēram, nesācot ar bāzi (vai lietotni, vai V):

  • Informācijas panelisStatistika
  • Meklēšanas rezultāti
  • Lietotāja profils

Šī nosaukšanas kārtība nāk no Vue.js oficiālā stila rokasgrāmatas, kurā ir arī nosaukšanas konvencijas!

Nosaukšanas konvencijas

Šeit ir dažas konvencijas, kas nāk no Vue.js oficiālā stila rokasgrāmatas, kuras jums ir nepieciešams, lai labi strukturētu savu projektu:

  • Komponentu nosaukumiem vienmēr vajadzētu būt vairākiem vārdiem, izņemot saknes “App” komponentus. Piemēram, izmantojiet “UserCard” vai “ProfileCard”, nevis “Card”.
  • Katrai sastāvdaļai jābūt savā failā.
  • Atsevišķu failu komponentu nosaukumiem vienmēr jābūt PascalCase vai vienmēr kebab-case. Izmantojiet “UserCard.vue” vai “user-card.vue”.
  • Komponenti, kas tiek izmantoti tikai vienu reizi lappusē, jāsāk ar priedēkli “The”, lai apzīmētu, ka to var būt tikai viens. Piemēram, navigācijas joslai vai kājenei jums jāizmanto “TheNavbar.vue” vai “TheFooter.vue”.
  • Bērnu komponentos kā priedēkli jāiekļauj vecāku vārds. Piemēram, ja vēlaties, lai “UserCard” tiktu izmantots komponents “Photo”, jūs to nosauksit par “UserCardPhoto”. Tā ir labāka lasāmība, jo mapē esošie faili parasti tiek sakārtoti alfabēta secībā.
  • Savu sastāvdaļu nosaukumos saīsinājumu vietā vienmēr izmantojiet pilnu vārdu. Piemēram, nelietojiet “UDSettings”, tā vietā izmantojiet “UserDashboardSettings”.

Vue.js oficiālais stila ceļvedis

Neatkarīgi no tā, vai esat pieredzējis vai iesācējs ar Vue.js, jums vajadzētu izlasīt šo Vue.js stila rokasgrāmatu, tajā ir daudz padomu un arī nosaukšanas konvencijas. Tajā ir daudz piemēru, kas jādara un kas nav jādara.

Ja jums patika šī ziņa, lūdzu, pāris reizes noklikšķiniet uz zemāk esošās pogas , lai parādītu savu atbalstu! Nekautrējieties arī komentēt un sniegt jebkāda veida atsauksmes. Neaizmirsti man sekot!

Vai vēlaties redzēt vairāk rakstu, piemēram, šo? Atbalstiet mani vietnē Patreon