Hvernig á að skipuleggja Vue.js verkefni

Hin fullkomna uppbygging möppu og hluti arkitektúr Vue.js með greindum og heimskulegum íhlutum

Meira en efla, Vue.js er frábær framhliðarramma. Það er auðvelt að byrja og búa til vefforrit. Vue.js er oft lýst sem ramma fyrir lítil forrit og stundum jafnvel sem valkost við jQuery vegna þess að það er mjög lítið! Persónulega held ég að það henti líka fyrir stærri verkefni. Í þessu tilfelli er mikilvægt að skipuleggja það vel með tilliti til byggingar íhluta.

Áður en ég byrjaði á fyrsta stóra Vue.js verkefninu mínu, gerði ég nokkrar rannsóknir til að finna fullkomna uppbyggingu möppu, arkitektúr íhluta og nafngiftir. Ég hef skoðað Vue.js skjölin, nokkrar greinar og mörg GitHub open source verkefni.

Ég varð að finna svör við nokkrum spurningum mínum. Þú getur fundið það í þessari færslu:

  • Hvernig skipuleggur þú skrár og möppur í Vue.js verkefninu?
  • Hvernig skrifar þú snjalla og mállausa hluti og hvar seturðu þá? Það er hugmynd frá React.
  • Hver er kóðunarstíll Vue.j og bestu starfshættir?

Ég mun einnig skjalfesta með heimildinni sem ég fékk innblástur frá og öðrum tenglum til að skilja betur.

Uppbygging Vue.js möppunnar

Hér eru innihald src möppunnar. Ég mæli með því að hefja verkefnið með Vue CLI. Persónulega notaði ég venjulega vefpakkasniðmátið.

. ├── app.css ├── App.vue ├── Eignir │ │ ... ├── Íhlutir │ │ ... ├── main.js ├── mixins │ │ ... ├── Leið │ └── index.js ├── vista │ ├── index.js │ ├── mát │ │ └── ... │ │ stökkbreytingategundir.js ├── þýðingar │ └── index.js ├─ ─ áhöld │ │ ... └── skoðanir └── ...

Nokkur smáatriði um allar þessar möppur:

  • Eignir - Þetta er þar sem þú setur allar eignir sem fluttar verða inn í íhlutina þína
  • Hlutar - Allir þættir verkefnanna sem eru ekki aðalskoðanirnar
  • mixins - Mixins eru stykki af Javascript kóða sem eru endurnýttir í ýmsum hlutum. Í mixin er hægt að setja inn aðferðir hvers þáttar frá Vue.js. Þau eru sameinuð þeim íhlutnum sem notar þau.
  • router - Allar leiðir verkefna þinna (í mínu tilfelli er ég með þær í index.js). Í grundvallaratriðum er allt í Vue.js hluti. En ekki eru allir ein hliðin. Síða hefur leið eins og „/ mælaborð“, „/ stillingar“ eða „/ leit“. Ef hluti hefur leið er það áframsent.
  • geyma (valfrjálst) - Vuex fastarnir í stökkbreytingartýpinu.js, Vuex einingarnar í undirmöppu einingunum (sem síðan eru hlaðnar í index.js).
  • Þýðingar (valfrjálst) - Staðbundnar skrár, ég nota Vue-i18n og það virkar nokkuð vel.
  • áhöld (valfrjálst) - aðgerðir sem ég nota í sumum íhlutum, t.d. B. Regex gildi próf, fastar eða síur.
  • Skoðanir - Til að gera verkefnið auðveldara að lesa mun ég aðskilja íhlutina sem eru fluttir og setja þá í þessa möppu. Þættirnir sem eru sendir fyrir mig eru meira en bara hluti þar sem þeir tákna síður og hafa leiðir. Ég setti þá í „Views“, þegar þú rifjar upp síðu, skiptu yfir í þá möppu.

Þú getur bætt við öðrum möppum eftir þörfum, t.d. B. Síur eða fastar, API.

Nokkur úrræði sem veittu mér innblástur

  • 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

Snjallir á móti mállausir íhlutir með Vue.js

Snjallir og mállausir íhlutir eru hugtak sem ég lærði af React. Greindir íhlutir eru einnig kallaðir ílát. Það eru þeir sem takast á við ríkisbreytingar. Þú ert ábyrgur fyrir því hvernig hlutirnir virka. Þvert á móti taka heimskulegir þættir, einnig kallaðir kynningarþættir, aðeins yfirbragðið.

Þegar þú hefur kynnt þér MVC mynstur geturðu borið saman varabúnað við útsýnið og snjalla hluti við stjórnandann!

Í React eru snjallir og mállausir íhlutir venjulega settir í mismunandi möppur en í Vue.js seturðu þá alla í sömu möppuna: hluti. Notaðu nafngift til aðgreiningar í Vue.js. Segjum að þú hafir heimskan kortahluta. Þá ættir þú að nota eitt af eftirfarandi nöfnum:

  • BaseCard
  • AppCard
  • VCard

Ef þú ert með snjallan íhlut sem notar BaseCard og bætir við nokkrar aðferðir við það, geturðu nefnt það eftir verkefnum til dæmis:

  • ProfileCard
  • ItemCard
  • NewsCard

Ef snjalli hluti þinn er ekki bara „gáfulegra“ BaseCard með aðferðum, notaðu bara hvaða heiti sem hentar íhlutnum þínum án þess að byrja á Base (eða App eða V). Dæmi:

  • StjórnborðStatistics
  • Leitarniðurstöður
  • Notendaprófíll

Þessi nafngiftir koma frá opinberu stílaleiðbeiningunum frá Vue.j, sem einnig inniheldur nafngjafir!

Reglur um nafngiftir

Hér eru nokkrar samkomur úr opinberu Vue.j stílaleiðbeiningunni sem þú þarft til að skipuleggja verkefnið þitt vel:

  • Íhlutaheiti ættu alltaf að samanstanda af mörgum orðum, að undanskildum íhlutum rótarforritsins. Notaðu til dæmis „UserCard“ eða „ProfileCard“ í stað „Card“.
  • Hver hluti ætti að vera í sinni eigin skrá.
  • Skráarheiti eins skjalhluta ætti annað hvort alltaf að vera PascalCase eða alltaf Kebab-mál. Notaðu „UserCard.vue“ eða „user-card.vue“.
  • Hlutar sem aðeins eru notaðir einu sinni á hverja hlið ættu að byrja á forskeytinu „The“ til að gefa til kynna að það geti aðeins verið einn. Til dæmis, fyrir siglingastika eða fót, notaðu TheNavbar.vue eða TheFooter.vue.
  • Íhlutir barna ættu að fara á undan foreldraheiti sínu. Til dæmis, ef þú vilt nota „Photo“ íhlut í „UserCard“ skaltu nefna það „UserCardPhoto“. Þetta er til að bæta læsileika þar sem skrárnar í möppu eru venjulega raðaðar í stafrófsröð.
  • Notaðu alltaf fullt nafn í stað styttingarinnar í nafni íhlutanna þinna. Notaðu til dæmis ekki „UDSettings“ heldur „UserDashboardSettings“.

Opinber stílhandbók fyrir Vue.js

Hvort sem þú ert lengra kominn með Vue.js eða byrjandi, þá ætti að lesa þessa Vue.js stílhandbók. Það inniheldur mörg ráð og einnig nafngiftir. Það hefur að geyma mörg dæmi um hluti sem þarf að gera og gera ekki.

Ef þér líkar vel við þessa færslu, vinsamlegast smelltu á slúðurhnappinn hér að neðan nokkrum sinnum til að sýna stuðning þinn! Ekki hika við að gera athugasemdir og gefa hvers konar álit. Ekki gleyma að fylgja mér!

Viltu sjá fleiri hluti eins og þennan? Styð mig á Patreon