Kuidas struktureerida projekti Vue.js

Ideaalne Vue.js kaustade struktuur ja komponentide arhitektuur nutikate ja rumalate komponentidega

Vue.js on midagi enamat kui hüpe, see on suurepärane kasutajaliidese raamistik. Sellega alustamiseks ja veebirakenduse loomiseks on üsna lihtne. Vue.js-d kirjeldatakse sageli väikeste rakenduste raamistikuna ja mõnikord isegi jQuery alternatiivina selle väiksuse tõttu! Ma isiklikult arvan, et see sobib ka suuremate projektide jaoks ja sel juhul on oluline see komponentide arhitektuuri osas hästi struktureerida.

Enne oma esimese suure Vue.js projekti alustamist tegin mõned uuringud, et leida täiuslik kaustade struktuur, komponentide arhitektuur ja nimetamise tava. Käisin läbi Vue.js dokumentatsiooni, mõned artiklid ja palju avatud lähtekoodiga GitHubi projekte.

Mul oli vaja leida vastused mõnele küsimusele, mis mul tekkisid. Seda leiate sellest postitusest:

  • Kuidas struktureerida faile ja kaustu projekti Vue.js sees?
  • Kuidas kirjutate nutikaid ja lolli komponente ning kuhu need panna? See on idee, mis pärineb Reaktalt.
  • Millised on Vue.js-i kodeerimisstiil ja parimad tavad?

Dokumenteerin ka allikatest, millest sain inspiratsiooni, ja muude linkide abil, et neid paremini mõista.

Vue.js kausta struktuur

Siin on src-kausta sisu. Soovitan teil projekti käivitada Vue CLI-ga. Kasutasin isiklikult Webpacki vaikemalli.

.
├── app.css
├── App.vue
├── varad
│ └── ...
├── komponendid
│ └── ...
├── main.js
├── mixins
│ └── ...
├── ruuter
│ └── register.js
├── pood
│ ├── register.js
├── ├── moodulid
│ │ └── ...
│ └── mutatsioonitüübid.js
├── tõlked
│ └── register.js
├── utils
│ └── ...
└── vaated
    └── ...

Mõned üksikasjad nende kaustade kohta:

  • varad - kuhu paned oma komponentidesse imporditud varad
  • komponendid - projekti kõik komponendid, mis pole peamised vaated
  • miksiinid - miksiinid on javascripti koodi osad, mida kasutatakse erinevates komponentides. Segamisse saate lisada mis tahes komponendi meetodid saidilt Vue.js. Need liidetakse komponendi meetoditega, mis seda kasutavad.
  • ruuter - kõik teie projektide marsruudid (minu puhul on mul need kataloogis index.js). Põhimõtteliselt saidil Vue.js on kõik komponent. Kuid mitte kõik pole leht. Lehel on marsruut nagu “/ armatuurlaud”, “/ seaded” või “/ otsing”. Kui komponendil on marsruut, suunatakse see teele.
  • salvestama (valikuline) - Vuexi konstandid mutatsioonitüübis.js, alamkausta moodulite Vuexi konstandid (mis seejärel laaditakse indeksi.js).
  • tõlked (valikuline) - lokaliseerib faile, ma kasutan Vue-i18n ja see töötab päris hästi.
  • utils (valikuline) - funktsioonid, mida kasutan mõnes komponendis, näiteks regexi väärtuse testimine, konstandid või filtrid.
  • vaated - projekti kiiremaks lugemiseks eraldan marsruuditud komponendid ja panen sellesse kausta. Minu jaoks suunatavad komponendid on rohkem kui komponent, kuna need tähistavad lehti ja neil on marsruudid, panen nad “vaadetesse” siis, kui kontrollite seda kausta külastavat lehte.

Lõpuks saate vajadusel muid kaustu lisada, näiteks filtrid või konstandid, API.

Mõned ressursid, millest sain inspiratsiooni

  • 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

Nutikad vs lollid komponendid saidiga Vue.js

Nutikad ja lollid komponendid on mõiste, mille õppisin Reaktalt. Nutikaid komponente nimetatakse ka konteineriteks, nemad tegelevad olekumuutustega, nad vastutavad selle eest, kuidas asjad toimivad. Vastupidi, tuimad komponendid, mida nimetatakse ka esitusviisiks, käsitlevad ainult välimust.

Kui olete MVC mustriga tuttav, saate võrrelda prügikomponente View ja nutikaid komponente kontrolleriga!

Reaktoris paigutatakse nutikad ja lollid komponendid tavaliselt erinevatesse kaustadesse, samas kui Vue.js-s paned nad kõik ühte ja samasse kausta: komponendid. Vue.jsis eristamiseks kasutate nimetamismeetodit. Oletame, et teil on loll kaardi komponent, siis peaksite kasutama ühte järgmistest nimedest:

  • Aluskaart
  • AppCard
  • VCard

Kui teil on nutikomponent, mis kasutab BaseCardit ja lisab sellele mõnda meetodit, saate seda näiteks projektile vastavalt nimetada:

  • Profiilikaart
  • Üksusekaart
  • Uudistekaart

Kui teie nutikas komponent pole mitte ainult meetoditega nutikam aluskaart, kasutage lihtsalt mõnda nime, mis sobib teie komponendiga, alustamata näiteks baasist (või rakendusest või V-st):

  • ArmatuurlaudStatistika
  • Otsingu tulemused
  • Kasutajaprofiil

See nimekonventsioon pärineb ametlikust stiilijuhendist Vue.js, mis sisaldab ka nimetamistava!

Nimekonventsioonid

Siin on mõned tavapärasest juhendist Vue.js pärit tavamõisted, mida peate oma projekti hästi struktureerima:

  • Komponentide nimed peaksid alati olema mitmesõnalised, välja arvatud juurkomponendid. Kasutage näiteks „kaardi” asemel „UserCard” või „ProfileCard”.
  • Iga komponent peaks olema oma fail.
  • Ühe faili komponentide failinimed peaksid olema alati PascalCase või alati kebab-case. Kasutage „UserCard.vue” või „user-card.vue”.
  • Komponendid, mida kasutatakse ainult üks kord ühel lehel, peaksid algama eesliitega “The”, märkimaks, et neid võib olla ainult üks. Näiteks navigeerimisriba või jaluse jaoks peaksite kasutama „TheNavbar.vue” või „TheFooter.vue”.
  • Lapsekomponendid peaksid eesliitena sisaldama oma vanema nime. Näiteks kui soovite rakenduses „UserCard” kasutatavat komponenti „Foto”, pange sellele nimi „UserCardPhoto”. See on parema loetavuse huvides, kuna kausta failid on tavaliselt järjestatud tähestiku järjekorras.
  • Kasutage komponentide nimedes lühendi asemel alati täisnime. Näiteks ärge kasutage “UDSettings”, kasutage selle asemel “UserDashboardSettings”.

Vue.js ametlik stiilijuhend

Ükskõik, kas olete Vue.js edasijõudnud või alustaja, peaksite lugema seda Vue.js stiilijuhendit, see sisaldab palju näpunäiteid ja ka nimetamistava. See sisaldab palju näiteid asjadest, mida teha ja mida mitte teha.

Kui teile see postitus meeldis, klõpsake oma toetuse näitamiseks mõni kord alloleval plaksutusnupul . Samuti kommenteerige ja andke igasugust tagasisidet. Ära unusta mind jälgida!

Kas soovite näha rohkem selliseid artikleid? Toeta mind Patreonil