Kako zgraditi projekt Vue.js

Popolna struktura mape Vue.js in arhitektura komponent s pametnimi in neumnimi komponentami

Vue.js je več kot hype, je odličen okvir sprednjega dela. Z njim je preprosto začeti in izdelati spletno aplikacijo. Vue.js je zaradi majhnosti pogosto opisan kot okvir za majhne aplikacije in celo včasih kot alternativa jQueryju! Osebno menim, da se lahko prilega tudi za večje projekte in v tem primeru je pomembno, da se dobro strukturira, kar zadeva arhitekturo komponent.

Pred začetkom prvega velikega projekta Vue.js sem opravil nekaj raziskav, da bi našel popolno strukturo map, arhitekturo komponent in konvencijo o poimenovanju. Pregledala sem dokumentacijo Vue.js, nekaj člankov in številne GitHub odprte kode.

Moral sem najti odgovore na nekaj vprašanj, ki sem jih imel. To boste našli v tej objavi:

  • Kako strukturirate datoteke in mape znotraj projekta Vue.js?
  • Kako pišete pametne in neumne komponente in kam jih postavite? To je koncept, ki prihaja iz Reacta.
  • Kakšen je slog kodiranja Vue.js in najboljše prakse?

Za boljše razumevanje bom dokumentiral tudi vir, ki sem ga navdihnil, in druge povezave.

Struktura mape Vue.js

Tu je vsebina mape src. Priporočam vam, da začnete projekt z Vue CLI. Osebno sem uporabil privzeto predlogo Webpack.

.
├── app.css
├── App.vue
├── sredstva
│ └── ...
├── sestavni deli
│ └── ...
├── main.js
├── mixins
│ └── ...
├── usmerjevalnik
│ └── index.js
├── trgovina
│ ├── index.js
│ ├── moduli
│ │ └── ...
│ └── mutacije-vrste.js
├── prevodi
│ └── index.js
├── pripomočki
│ └── ...
└── pogledi
    └── ...

Nekaj ​​podrobnosti o vsaki od teh map:

  • sredstva - kamor vstavite vsa sredstva, ki se uvažajo v vaše komponente
  • komponente - vse komponente projektov, ki niso glavna stališča
  • mixins - Mixins so deli kode JavaScript, ki se ponovno uporabijo v različnih komponentah. V mixin lahko vstavite metode katere koli komponente iz Vue.js, ki bodo združene s tistimi v komponenti, ki jo uporablja.
  • usmerjevalnik - Vse poti vaših projektov (v mojem primeru jih imam v indeksu.js). V osnovi v Vue.js je vse sestavni del. Vendar ni vse stran. Na strani so poti, kot so "/ nadzorna plošča", "/ nastavitve" ali "/ iskanje". Če ima komponenta pot, jo usmeri.
  • trgovina (neobvezno) - konstante Vuex v mutaciji-type.js, moduli Vuex v modulih podmape (ki se nato naložijo v index.js).
  • prevodi (neobvezno) - Locales datoteke, uporabljam Vue-i18n, in deluje precej dobro.
  • utils (neobvezno) - funkcije, ki jih uporabljam v nekaterih komponentah, kot so preskušanje vrednosti regex vrednosti, konstante ali filtri.
  • pogledi - Da bi projekt hitreje prebral, ločim sestavne dele, ki so usmerjeni, in jih shranim v to mapo. Komponente, ki so usmerjene zame, so več kot sestavni del, saj predstavljajo strani in imajo poti, postavim jih v »poglede«, potem ko preverite stran, greste v to mapo.

Sčasoma lahko dodate druge mape, odvisno od svojih potreb, na primer filtre ali konstante, API.

Nekateri viri so me navdihnili

  • 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

Smart v primerjavi z neumnimi komponentami z Vue.js

Pametne in neumne komponente je koncept, ki sem se ga naučil v podjetju React. Pametne komponente se imenujejo tudi zabojniki, oni so tisti, ki upravljajo s spremembami stanja, odgovorni so za to, kako stvari delujejo. Nasprotno pa neumni sestavni deli, imenovani tudi predstavitveni, upravljajo samo z videzom in občutkom.

Če poznate vzorec MVC, lahko komponente smetišča primerjate s funkcijo View, pametne komponente pa s krmilnikom!

Pametne in neumne komponente so v React običajno v različnih mapah, medtem ko jih v Vue.js vse postavite v isto mapo: komponente. Za razlikovanje v Vue.js uporabite konvencijo o poimenovanju. Recimo, da imate neumno komponento kartice, uporabite eno od teh imen:

  • BaseCard
  • AppCard
  • VCard

Če imate pametno komponento, ki uporablja BaseCard in ji doda nekaj metod, jo lahko na primer poimenujete, odvisno od projekta:

  • Profilna kartica
  • ItemCard
  • NewsCard

Če vaša pametna komponenta ni samo pametnejša BaseCard z metodami, uporabite katero koli ime, ki ustreza vaši komponenti in ne da začnete z Base (ali App ali V), na primer:

  • Nadzorna ploščaStatistika
  • Rezultati iskanja
  • Uporabniški profil

Ta konvencija o poimenovanju izvira iz uradnega stilskega vodnika Vue.js, ki vsebuje tudi konvencije o poimenovanju!

Imenovanje konvencij

Tukaj je nekaj konvencij, ki prihajajo iz uradnega stila Vue.js, ki ga morate dobro strukturirati:

  • Imena komponent morajo biti vedno večbesedna, razen koreninskih komponent aplikacije. Uporabite na primer „UserCard“ ali „ProfileCard“ namesto „Card“.
  • Vsaka komponenta mora biti v svoji datoteki.
  • Imena komponent z enim datotekam morajo biti vedno PascalCase ali vedno v primeru kebaba. Uporabite »UserCard.vue« ali »user-card.vue«.
  • Komponente, ki se uporabljajo samo enkrat na strani, se morajo začeti s predpono "The", da se označi, da je lahko le ena. Na primer za navbar ali nogo, uporabite "TheNavbar.vue" ali "TheFooter.vue".
  • Otroški sestavni deli morajo kot predpono vključiti ime svojega starša. Na primer, če želite, da se komponenta »Fotografija«, ki se uporablja na »Uporabniški kartici«, poimenujete »Uporabniška kartica«. Boljša berljivost je, ker so datoteke v mapi običajno urejene po abecedi.
  • V imenu komponent vedno uporabite polno ime namesto kratice. Na primer, ne uporabljajte »UDSettings«, temveč uporabite »UserDashboardSettings«.

Uradni stilski vodnik Vue.js

Ne glede na to, ali ste napredni ali začetnik pri Vue.js, bi morali prebrati ta Vue.js slogan vodnik, vsebuje veliko nasvetov in tudi poimenovanja konvencij. Vsebuje veliko primerov stvari, ki jih je treba storiti in česa ne početi.

Če vam je bila ta objava všeč, kliknite nekaj gumba spodaj nekajkrat, da pokažete svojo podporo! Prav tako vas prosimo, da komentirate in daste kakršne koli povratne informacije. Ne pozabi me slediti!

Želite videti več takšnih člankov? Podprite me na Patreonu