Cum să structurați un proiect Vue.js

Structura folderului Vue.js și arhitectura componentelor perfecte cu componente inteligente și mut

Vue.js este mai mult decât un hype, este un cadru excelent. Este destul de ușor să începeți cu el și să creați o aplicație web. Vue.js este adesea descris ca un cadru pentru aplicații mici și chiar uneori ca o alternativă la jQuery din cauza dimensiunilor mici! Personal consider că se poate potrivi și pentru proiecte mai mari și, în acest caz, este important să o structurați bine, în ceea ce privește arhitectura componentelor.

Înainte de a începe primul meu mare proiect Vue.js, am făcut câteva cercetări pentru a găsi structura perfectă a folderului, arhitectura componentelor și convenția de denumire. Am trecut prin documentația Vue.js, câteva articole și multe proiecte GitHub open source.

Aveam nevoie să găsesc răspunsurile la câteva întrebări pe care le-am avut. Asta veți găsi în această postare:

  • Cum structurați fișierele și folderele din cadrul proiectului Vue.js?
  • Cum scrieți componentele Smart and Dumb și unde le puneți? Este un concept provenit de la React.
  • Care sunt stilul de codare Vue.js și cele mai bune practici?

De asemenea, mă voi documenta cu sursa din care m-am inspirat și alte link-uri pentru a înțelege mai bine.

Structura folderului Vue.js

Iată conținutul folderului src. Vă recomand să începeți proiectul cu Vue CLI. Eu personal am folosit șablonul implicit Webpack.

.
├── app.css
├── App.vue
├── active
│ └── ...
├── componente
│ └── ...
├── main.js
├── mixine
│ └── ...
├── router
│ └── index.js
├── magazin
│ ├── index.js
│ ├── module
│ │ └── ...
│ └── mutații-tipuri.js
├── traduceri
│ └── index.js
├── Utile
│ └── ...
└── vizualizări
    └── ...

Câteva detalii despre fiecare din aceste dosare:

  • active - În cazul în care puneți orice active care sunt importate în componentele dvs.
  • componente - Toate componentele proiectelor care nu sunt punctele de vedere principale
  • mixinuri - Mixinurile sunt părțile codului javascript care sunt reutilizate în diferite componente. Într-un mixin puteți pune metodele oricărei componente din Vue.js, acestea vor fi îmbinate cu cele ale componentei care o folosește.
  • router - Toate rutele proiectelor dvs. (în cazul meu le am în index.js). Practic în Vue.js totul este o componentă. Dar nu totul este o pagină. O pagină are un traseu precum „/ tabloul de bord”, „/ setări” sau „/ căutare”. Dacă o componentă are o rută, aceasta este dirijată.
  • store (opțional) - Constanțele Vuex în mutație-tip.js, modulele Vuex din modulele subfolder (care sunt apoi încărcate în index.js).
  • traduceri (opțional) - Fișiere locale, folosesc Vue-i18n și funcționează destul de bine.
  • utils (opțional) - Funcții pe care le folosesc în unele componente, cum ar fi testarea valorilor regex, constante sau filtre.
  • vizualizări - Pentru a face proiectul mai rapid de citit, separă componentele care sunt dirijate și le introduc în acest folder. Componentele care sunt rutate pentru mine sunt mai mult decât o componentă, deoarece acestea reprezintă pagini și au rute, le pun în „vizualizări”, atunci când verificați o pagină, accesați acest folder.

Puteți adăuga în cele din urmă alte foldere în funcție de nevoia dvs., cum ar fi filtre, sau constante, API.

Câteva resurse de care m-am inspirat

  • 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

Componentele inteligente față de mutare cu Vue.js

Componentele inteligente și mut sunt un concept pe care l-am învățat de la React. Componentele inteligente sunt, de asemenea, numite containere, sunt cei care se ocupă de schimbările de stare, sunt responsabili de modul în care funcționează lucrurile. Dimpotrivă, componentele mut, numite și prezentative, se ocupă doar cu aspectul și senzația.

Dacă sunteți familiarizat cu modelul MVC, puteți compara componentele de basculare cu View și componente inteligente cu controlerul!

În React, componentele inteligente și mut sunt de obicei puse în foldere diferite, în timp ce în Vue.js le puneți pe toate în același folder: componente. Pentru a diferenția în Vue.js veți utiliza o convenție de denumire. Să presupunem că aveți o componentă a cardului mut, atunci ar trebui să folosiți unul dintre aceste nume:

  • BaseCard
  • AppCard
  • VCard

Dacă aveți o componentă inteligentă care utilizează BaseCard și adaugă unele metode, puteți, de exemplu, să o numiți, în funcție de proiectul dvs.:

  • ProfileCard
  • ItemCard
  • NewsCard

Dacă componenta inteligentă nu este doar o bază mai inteligentă cu o metodă, folosiți orice nume care se potrivește componentei dvs. și fără a începe cu Base (sau App, sau V), de exemplu:

  • DashboardStatistics
  • Rezultatele cautarii
  • USERPROFILE

Această convenție de denumire provine de la ghidul oficial de stil Vue.js care conține și convenții de denumire!

Convențiile de denumire

Iată câteva convenții care vin de la ghidul oficial de stil Vue.js de care trebuie să vă structurați bine proiectul:

  • Numele componentelor trebuie să fie întotdeauna cu mai multe cuvinte, cu excepția componentelor rădăcinoase „App”. Utilizați, de exemplu, „UserCard” sau „ProfileCard” în loc de „Card”.
  • Fiecare componentă ar trebui să fie în propriul fișier.
  • Numele de fișiere ale componentelor cu un singur fișier ar trebui să fie întotdeauna PascalCase sau mereu kebab-case. Folosiți „UserCard.vue” sau „user-card.vue”.
  • Componentele care sunt utilizate doar o dată pe pagină trebuie să înceapă cu prefixul „The”, pentru a indica faptul că poate exista doar una. De exemplu, pentru o navbar sau un subsol, ar trebui să folosiți „TheNavbar.vue” sau „TheFooter.vue”.
  • Componentele copilului ar trebui să includă numele părintelui lor ca prefix. De exemplu, dacă doriți o componentă „Photo” folosită în „UserCard”, o veți numi „UserCardPhoto”. Este pentru o mai bună lizibilitate, deoarece fișierele dintr-un dosar sunt de obicei comandate alfabetic.
  • Utilizați întotdeauna numele complet în locul abrevierii în numele componentelor dvs. De exemplu, nu folosiți „Setări UDS”, folosiți în loc de „UserDashboardSettings”.

Ghid oficial de stil Vue.js

Indiferent dacă sunteți avansat sau începător cu Vue.js, ar trebui să citiți această ghid de stil Vue.js, conține o mulțime de sfaturi și, de asemenea, convenții de denumire. Conține o mulțime de exemple de lucruri de făcut și de făcut.

Dacă v-a plăcut această postare, vă rugăm să faceți clic pe butonul clap de mai jos de câteva ori pentru a vă prezenta sprijinul! De asemenea, nu ezitați să comentați și să dați orice fel de feedback. Nu uitați să mă urmați!

Vrei să vezi mai multe articole ca acesta? Sprijină-mă pe Patreon