Kaip susisteminti „Vue.js“ projektą

Puiki „Vue.js“ aplanko struktūra ir komponentų architektūra, naudojant intelektualiuosius ir kvailus komponentus

„Vue.js“ yra daugiau nei hype, tai puikus fasado rėmas. Tai gana lengva pradėti nuo jo ir kurti žiniatinklio programą. Vue.js dažnai apibūdinamas kaip mažų programų sistema ir kartais net kaip „jQuery“ alternatyva dėl savo mažo dydžio! Aš asmeniškai manau, kad jis tinka ir didesniems projektams, todėl šiuo atveju svarbu gerai jį susisteminti, atsižvelgiant į komponentų architektūrą.

Prieš pradėdamas savo pirmąjį didelį „Vue.js“ projektą, aš atlikiau keletą tyrimų, norėdamas rasti geriausią aplanko struktūrą, komponentų architektūrą ir pavadinimų sudarymo tvarką. Peržiūrėjau „Vue.js“ dokumentaciją, keletą straipsnių ir daug „GitHub“ atvirojo kodo projektų.

Man reikėjo rasti atsakymus į keletą klausimų, kuriuos turėjau. Štai ką rasite šiame įraše:

  • Kaip struktūrizuojate failus ir aplankus projekto „Vue.js“ viduje?
  • Kaip rašote „Smart“ ir „Dumb“ komponentus ir kur juos dedate? Tai sąvoka, kurią pateikia „React“.
  • Koks yra „Vue.js“ kodavimo stilius ir geriausia praktika?

Taip pat dokumentuosiu su šaltiniu, kurį įkvėpiau, ir kitomis nuorodomis, kad galėčiau geriau suprasti.

„Vue.js“ aplanko struktūra

Čia yra src aplanko turinys. Aš rekomenduoju jums pradėti projektą su „Vue CLI“. Aš asmeniškai naudojau numatytąjį „Webpack“ šabloną.

,
├── app.css
├── „App.vue“
├── turtas
│ └── ...
├── komponentai
│ └── ...
├── main.js
├── mišiniai
│ └── ...
├── maršrutizatorius
│ └── indeksas.js
├── parduotuvė
│ ├── indeksas.js
│ ├── moduliai
│ │ └── ...
│ └── mutacijos tipai.js
├── vertimai
│ └── indeksas.js
├── utils
│ └── ...
└── peržiūros
    └── ...

Keletas detalių apie kiekvieną iš šių aplankų:

  • turtas - kur jūs įdedate bet kokį turtą, kuris yra importuotas į jūsų komponentus
  • komponentai - visi projekto komponentai, kurie nėra pagrindiniai vaizdai
  • mixins - mixins yra „javascript“ kodo dalys, kurios pakartotinai naudojamos skirtinguose komponentuose. Į miksą galite įdėti bet kurio komponento metodus iš „Vue.js“. Jie bus sujungti su komponentu, kuris jį naudoja.
  • maršrutizatorius - visi jūsų projektų maršrutai (mano atveju aš juos turiu indekse.js). Iš esmės „Vue.js“ viskas yra komponentas. Bet ne viskas yra puslapis. Puslapis turi tokį maršrutą kaip „/ prietaisų skydelis“, „/ nustatymai“ arba „/ ieškoti“. Jei komponentas turi maršrutą, jis nukreipiamas.
  • parduotuvė (pasirenkama) - „Vuex“ konstantos, esančios mutacijos type.js, „Vuex“ moduliai pakatalogių moduliuose (kurie po to įkeliami į index.js).
  • vertimai (pasirinktinai) - lokalės failai, aš naudoju „Vue-i18n“, ir jis veikia gana gerai.
  • „utils“ (pasirinktinai) - funkcijos, kurias naudoju kai kuriuose komponentuose, pavyzdžiui, regex vertės testavimas, konstantos ar filtrai.
  • peržiūros - kad projektas būtų greitesnis skaitant, atskyriau nukreiptus komponentus ir dedu juos į šį aplanką. Komponentai, kurie yra nukreipti man, yra ne tik komponentai, nes jie žymi puslapius ir turi maršrutus, aš juos dedu į „rodinius“, tada, kai tikrini puslapį, kurį eini į šį aplanką.

Galiausiai galite pridėti kitų aplankų, atsižvelgiant į jūsų poreikį, pvz., Filtrų ar konstantų API.

Kai kurie ištekliai, kuriuos įkvėpiau

  • 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 vs dumble“ komponentai naudojant „Vue.js“

Išmanieji ir nemandagieji komponentai yra sąvoka, kurios išmokau iš „React“. Išmanieji komponentai taip pat vadinami konteineriais. Jie yra tie, kurie tvarko būsenos pokyčius, yra atsakingi už tai, kaip viskas veikia. Priešingai, nemandagūs komponentai, dar vadinami prezentaciniais, valdo tik išvaizdą.

Jei esate susipažinęs su MVC modeliu, galite palyginti komponentus su „View“ ir intelektualiuosius komponentus su „Controller“!

„React“ išmanieji ir nemandagūs komponentai paprastai dedami į skirtingus aplankus, o „Vue.js“ juos visus dedate į tą patį aplanką: komponentai. Norėdami atskirti Vue.js, turėsite naudoti vardų sudarymo tvarką. Tarkime, kad turite nemandagų kortelės komponentą, turėtumėte naudoti vieną iš šių vardų:

  • „BaseCard“
  • „AppCard“
  • „VCard“

Jei turite intelektualųjį komponentą, kuris naudoja „BaseCard“ ir prideda tam keletą metodų, galite jį pavadinti, pavyzdžiui, atsižvelgiant į projektą:

  • „ProfileCard“
  • „ItemCard“
  • „NewsCard“

Jei jūsų išmanusis komponentas yra ne tik „protingesnė“ pagrindinė kortelė su metodais, tiesiog naudokite bet kurį pavadinimą, kuris tinka jūsų komponentui, ir nepradėkite „Base“ (arba „App“, arba V), pvz .:

  • Informacijos suvestinėStatistika
  • Paieškos rezultatai
  • Vartotojo profilis

Ši vardų suteikimo tvarka yra kilusi iš „Vue.js“ oficialaus stiliaus vadovo, kuriame taip pat yra pavadinimų suteikimo tvarkos!

Pavadinimo konvencijos

Čia pateikiamos kelios konvencijos, pateiktos iš „Vue.js“ oficialaus stiliaus vadovo, kuriuos reikia gerai susisteminti savo projektą:

  • Komponentų pavadinimai visada turėtų būti kelių žodžių, išskyrus šakninius „App“ komponentus. Pavyzdžiui, vietoj „kortelės“ naudokite „UserCard“ arba „ProfileCard“.
  • Kiekvienas komponentas turėtų būti savo faile.
  • Vieno failo komponentų pavadinimai turėtų būti visada „PascalCase“ arba visada „kebab“. Naudokite „UserCard.vue“ arba „user-card.vue“.
  • Komponentai, naudojami tik vieną kartą puslapyje, turėtų prasidėti priešdėliu „The“, kad būtų pažymėta, kad jų gali būti tik vienas. Pavyzdžiui, jei naudojate naršymo juostą ar poraštę, turėtumėte naudoti „TheNavbar.vue“ arba „TheFooter.vue“.
  • Vaikų komponentai kaip priešdėlis turėtų būti jų tėvo vardas. Pvz., Jei norėtumėte, kad „Photo“ komponentas būtų naudojamas „UserCard“, pavadinsite jį „UserCardPhoto“. Tai yra geresnis skaitomumas, nes aplanko failai paprastai išdėstomi abėcėlės tvarka.
  • Savo komponentų pavadinimuose visada naudokite vardą, pavardę, o ne santrumpą. Pvz., Nenaudokite „UDSettings“, naudokite „UserDashboardSettings“.

„Vue.js“ oficialus stiliaus vadovas

Nesvarbu, ar esate „Vue.js“ pažengęs, ar pradedantysis, turėtumėte perskaityti šį „Vue.js“ stiliaus vadovą, kuriame yra daugybė patarimų ir pavadinimų suteikimo tvarka. Joje yra daugybė pavyzdžių, ką reikia padaryti ir ko nedaryti.

Jei jums patiko šis įrašas, keletą kartų spustelėkite apačioje esantį klavišą , norėdami parodyti savo palaikymą! Taip pat nedvejodami komentuokite ir pateikite bet kokių atsiliepimų. Nepamiršk manęs sekti!

Ar norite pamatyti daugiau panašių straipsnių? Palaikyk mane Patreon