Conas tionscadal Vue.js a struchtúrú

Struchtúr fillteán foirfe agus ailtireacht chomhpháirteacha Vue.js le comhpháirteanna cliste agus dúr

Níos mó ná hype, is creatlach tosaigh tosaigh iontach é Vue.js. Is furasta tús a chur leis agus aip gréasáin a chruthú. Is minic a dhéantar cur síos ar Vue.js mar chreat le haghaidh aipeanna beaga agus uaireanta fiú mar mhalairt ar jQuery toisc go bhfuil sé an-bheag! Go pearsanta, sílim go bhfuil sé oiriúnach do thionscadail níos mó freisin. Sa chás seo, tá sé tábhachtach é a struchtúrú go maith i dtéarmaí ailtireachta comhpháirteanna.

Sular thosaigh mé ar mo chéad tionscadal mór Vue.js, rinne mé roinnt taighde chun an struchtúr fillteán foirfe, ailtireacht chomhpháirt, agus coinbhinsiún ainmniúcháin a fháil. D'fhéach mé trí dhoiciméadú Vue.js, roinnt alt, agus go leor tionscadal foinse oscailte GitHub.

Bhí orm freagraí a fháil ar chuid de mo chuid ceisteanna. Is féidir leat é sin a fháil sa phost seo:

  • Conas a dhéanann tú na comhaid agus na fillteáin sa tionscadal Vue.js a struchtúrú?
  • Conas a scríobhann tú comhpháirteanna cliste agus balbh agus cá gcuireann tú iad? Is coincheap é ó React.
  • Cad iad stíl chódaithe agus dea-chleachtais Vue.j?

Déanfaidh mé doiciméadú freisin leis an bhfoinse a spreag mé agus naisc eile chun tuiscint níos fearr a fháil.

Struchtúr fillteán Vue.js.

Seo ábhar an fhillteáin src. Molaim an tionscadal a thosú leis an Vue CLI. Go pearsanta, d’úsáid mé an teimpléad caighdeánach mála gréasáin.

. ├── app.css ├── App.vue ├── Sócmhainní │ │ ... ├── Comhpháirteanna │ │ ... ├── main.js ├── meascáin │ │ ... ├── Ródaire │ └── index.js ├── sábháil │ ├── index.js modules ├── modúil │ │ └── ... │ │ mutation-types.js ├── aistriúcháin │ └── index.js ├─ ─ Uirlisí │ │ ... └── Radhairc └── ...

Roinnt sonraí faoi gach ceann de na fillteáin seo:

  • Sócmhainní - Seo nuair a chuireann tú na sócmhainní go léir a allmhairítear isteach i do chomhpháirteanna
  • Comhpháirteanna - Comhpháirteanna uile na dtionscadal nach iad na príomh-radharcanna iad
  • meascáin - Is iad na meascáin na píosaí de chód Javascript a athúsáidtear i gcomhpháirteanna éagsúla. I mixin is féidir leat modhanna gach comhpháirte a chur isteach ó Vue.js. Déantar iad a chumasc le gnéithe na comhpháirte a úsáideann iad.
  • ródaire - Gach bealach de do thionscadail (i mo chás tá siad agam san innéacs.js). Go bunúsach is comhpháirt é gach rud i Vue.js. Ach níl taobh amháin ar fad. Tá bealach cosúil le "/ painéal", "/ socruithe" nó "/ cuardach" ar leathanach. Má tá bealach ag comhpháirt, cuirtear ar aghaidh é.
  • stór (roghnach) - Tairgeann an Vuex i mutation-type.js, na modúil Vuex sna modúil fo-fhillteáin (a dhéantar a luchtú ansin i index.js).
  • Aistriúcháin (roghnach) - Comhaid Locales, tá Vue-i18n á úsáid agam, agus oibríonn sé go maith.
  • fóntais (roghnach) - feidhmeanna a úsáidim i roinnt comhpháirteanna, i.e. B. Tástálacha luacha regex, tairisigh nó scagairí.
  • Radhairc - Chun an tionscadal a dhéanamh níos éasca le léamh, scarfaidh mé na comhpháirteanna ródaithe agus cuirfidh mé san fhillteán seo iad. Tá na comhpháirteanna a chuirtear i bhfeidhm orm níos mó ná comhpháirt amháin sa mhéid is go léiríonn siad leathanaigh agus go bhfuil bealaí acu. Ansin chuir mé iad i "Views", nuair a dhéanann tú athbhreithniú ar leathanach, aistrigh go dtí an fillteán sin.

Is féidir leat fillteáin eile a chur leis de réir mar is gá, i.e. B. Scagairí nó tairisigh, API.

Roinnt acmhainní a spreag mé

  • 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

Comhpháirteanna cliste i gcoinne balbh le Vue.js.

Is coincheap iad comhpháirteanna cliste agus balbh a d’fhoghlaim mé ó React. Tugtar coimeádáin ar chomhpháirteanna Chliste freisin. Is iadsan a dhéileálann le hathruithe stáit. Tá tú freagrach as an gcaoi a n-oibríonn rudaí. A mhalairt ar fad, ní ghlacann na comhpháirteanna dúr, ar a dtugtar comhpháirteanna cur i láthair ach an chuma.

Nuair atá tú eolach ar phatrúin MVC, is féidir leat comhpháirteanna cúltaca leis an amharc agus comhpháirteanna cliste a chur i gcomparáid leis an rialtóir!

In React, is gnách go gcuirtear comhpháirteanna cliste agus balbh i bhfillteáin éagsúla, agus i Vue.js cuireann tú iad go léir san fhillteán céanna: comhpháirteanna. Úsáid coinbhinsiún ainmniúcháin chun idirdhealú a dhéanamh i Vue.js. Ligean le rá go bhfuil comhpháirt cárta dúr agat. Ansin ba chóir duit ceann de na hainmneacha seo a leanas a úsáid:

  • BaseCard
  • AppCard
  • VCard

Má tá comhpháirt chliste agat a úsáideann BaseCard agus a chuireann roinnt modhanna leis, is féidir leat é a ainmniú ag brath ar do thionscadal mar shampla:

  • ProfileCard
  • Cárta Mír
  • NewsCard

Mura bhfuil do chomhpháirt chliste ach BaseCard “níos cliste” le modhanna, ná húsáid ach ainm a oireann do do chomhpháirt gan tosú le Base (nó App nó V). Sampla:

  • DashboardStatistics
  • Torthaí cuardaigh
  • Próifíl úsáideora

Tagann an coinbhinsiún ainmniúcháin seo ón treoir stíl oifigiúil ó Vue.j, ina bhfuil coinbhinsiúin ainmniúcháin freisin!

Rialacha ainmniúcháin

Seo roinnt coinbhinsiúin ón treoir oifigiúil stíl Vue.j a theastaíonn uait chun do thionscadal a eagrú go maith:

  • Ba cheart go mbeadh focail iolracha i gcónaí in ainmneacha comhpháirteanna, cé is moite de chomhpháirteanna an aip fhréamh. Mar shampla, bain úsáid as "UserCard" nó "ProfileCard" in ionad "Card".
  • Ba chóir go mbeadh gach comhpháirt ina chomhad féin.
  • Ba cheart go mbeadh ainmneacha comhaid comhpháirteanna aonchomhad i gcónaí PascalCase nó i gcónaí cás Kebab. Úsáid "UserCard.vue" nó "user-card.vue".
  • Ba chóir go dtosódh comhpháirteanna nach n-úsáidtear ach uair amháin in aghaidh an taobh leis an réimír "The" chun a léiriú nach féidir ach ceann amháin a bheith ann. Mar shampla, le haghaidh barra nascleanúna nó buntásc, úsáid TheNavbar.vue nó TheFooter.vue.
  • Ba chóir do chomhpháirteanna leanaí a n-ainm tuismitheora a réimír. Mar shampla, más mian leat comhpháirt "Grianghraf" a úsáid sa "UserCard", ainmnigh "UserCardPhoto" air. Déantar é seo ar mhaithe le hinléiteacht níos fearr, mar is gnách go ndéantar na comhaid i bhfillteán a shórtáil in ord aibítre.
  • Úsáid an t-ainm iomlán i gcónaí in ionad an ghiorrúcháin in ainm do chomhpháirteanna. Mar shampla, ná bain úsáid as "UDSettings" ach "UserDashboardSettings".

Treoir stíl oifigiúil Vue.js.

Cibé an bhfuil tú chun cinn le Vue.js nó le tosaitheoir, ba chóir an treoir stíl Vue.js seo a léamh. Tá go leor leideanna ann agus coinbhinsiúin ainmniúcháin freisin. Tá go leor samplaí ann de rudaí le déanamh agus gan a bheith le déanamh.

Má bhain tú taitneamh as an bpost seo, cliceáil le do thoil an cnaipe gossip thíos cúpla uair chun do thacaíocht a thaispeáint! Chomh maith leis sin, bíodh drogall ort trácht a dhéanamh agus aiseolas de chineál ar bith a thabhairt. Ná déan dearmad mé a leanúint!

Ar mhaith leat níos mó míreanna mar an gceann seo a fheiceáil? Tacaigh liom ar Patreon