Kako strukturirati Vue.js projekt

Savršena struktura mape Vue.js i arhitektura komponenata s pametnim i glupim komponentama

Vue.js je više od hype-a, to je sjajan okvir sučelja. Lako je započeti s tim i izgraditi web aplikaciju. Vue.js se često opisuje kao okvir za male aplikacije, a čak ponekad i kao alternativa jQuery-u zbog male veličine! Osobno mislim da se može uklopiti i u veće projekte te je u ovom slučaju važno dobro je strukturirati, u smislu arhitekture komponenata.

Prije pokretanja mog prvog velikog Vue.js projekta, obavio sam neka istraživanja kako bih pronašao savršenu strukturu mape, arhitekturu komponenata i konvenciju imenovanja. Prošao sam dokumentaciju Vue.js, nekoliko članaka i mnoge GitHub projekte otvorenog koda.

Morao sam pronaći odgovore na nekoliko pitanja koja sam imao. To je ono što ćete pronaći u ovom postu:

  • Kako strukturirate datoteke i mape unutar projekta Vue.js?
  • Kako pišete pametne i glupe komponente i gdje ih stavljate? To je koncept koji dolazi iz Reacta.
  • Koji su Vue.js stil kodiranja i najbolje prakse?

Dokumentirat ću i s izvorom na koji sam inspiriran i drugim vezama kako bih bolje razumio.

Struktura mape Vue.js

Evo sadržaja mape src. Preporučujem vam početak projekta s Vue CLI. Osobno sam koristio zadani predložak Webpack.

,
├── app.css
├── App.vue
├── imovina
│ └── ...
├── komponente
│ └── ...
├── main.js
├── mixins
│ └── ...
├── usmjerivač
│ └── index.js
├── trgovina
│ ├── index.js
│ ├── moduli
│ │ └── ...
│ └── mutacije-vrste.js
├── prijevodi
│ └── index.js
├── korisni programi
│ └── ...
└── prikazi
    └── ...

Nekoliko pojedinosti o svakoj od tih mapa:

  • imovina - Gdje stavite bilo koju imovinu koja se uvozi u vaše komponente
  • komponente - sve sastavne dijelove projekata koji nisu glavni stavovi
  • mixins - Miksini su dijelovi javascript koda koji se ponovno koriste u različitim komponentama. U mixin možete staviti metode bilo koje komponente iz Vue.js, one će se spojiti s onim u komponenti koja ga koristi.
  • usmjerivač - Sve rute vaših projekata (u mom slučaju ih imam u indeksu.js). U osnovi u Vue.js sve je komponenta. Ali nije sve stranica. Stranica ima rutu poput "/ nadzorna ploča", "/ postavke" ili "/ traži". Ako komponenta ima rutu, ona se usmjerava.
  • pohranjivanje (izborno) - Vuex konstante u mutation-type.js, Vuex moduli u modulima podmape (koji se zatim učitavaju u index.js).
  • prijevodi (izborno) - Locales datoteke, koristim Vue-i18n, i djeluje prilično dobro.
  • utils (izborno) - funkcije koje koristim u nekim komponentama, kao što su testiranje vrijednosti regularnih izraza, konstante ili filtri.
  • prikazi - Da bi projekt brže pročitao, odvajam komponente koje su usmjerene i stavljam ih u ovu mapu. Komponente koje su usmjerene za mene su više od komponente, jer predstavljaju stranice i imaju rute, stavljam ih u „prikaze“, a zatim kad provjerite stranicu idete u ovu mapu.

Na kraju možete dodati i druge mape, ovisno o vašim potrebama, poput filtera ili konstanti, API-ja.

Neki resursi su me inspirirali

  • 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

Pametne protiv glupe komponente s Vue.js

Pametne i glupe komponente koncept sam naučio iz Reacta. Pametne komponente nazivaju se i kontejneri, oni su ti koji upravljaju promjenama stanja, oni su odgovorni za to kako stvari funkcioniraju. Suprotno tome, glupe komponente, koje se nazivaju i prezentacijska, samo upravljaju izgledom i dojmom.

Ako vam je poznat MVC uzorak, možete usporediti deump komponente s Viewom, a pametne komponente na Controller!

Pametne i glupe komponente obično se stavljaju u različite mape, dok ih u Vue.js sve stavljate u istu mapu: komponente. Za razlikovanje u Vue.js upotrijebit ćete konvenciju o imenovanju. Recimo da imate glupu komponentu kartice, upotrijebite jedno od sljedećih naziva:

  • BaseCard
  • AppCard
  • VCard

Ako imate pametnu komponentu koja koristi BaseCard i dodaje joj neke metode, na primjer, možete je imenovati, ovisno o vašem projektu:

  • ProfileCard
  • ItemCard
  • NewsCard

Ako vaša pametna komponenta nije samo pametnija BaseCard kartica s metodama, koristite bilo koje ime koje odgovara vašoj komponenti i bez započinjanja s Base (ili App ili V), na primjer:

  • DashboardStatistics
  • Rezultati pretraživanja
  • Korisnički profil

Ovaj način imenovanja dolazi iz Vue.js službenog vodiča stilova koji također sadrži konvencije o imenovanju!

Imenovanje konvencija

Evo nekoliko konvencija koje dolaze iz službenog vodiča stila Vue.js koje morate dobro strukturirati svoj projekt:

  • Nazivi komponenti uvijek bi trebali biti više riječi, osim korijenskih "App" komponenti. Koristite, na primjer, "UserCard" ili "ProfileCard" umjesto "Card".
  • Svaka komponenta treba biti u svojoj datoteci.
  • Nazivi komponenti s jednom datotekom trebaju biti uvijek PascalCase ili uvijek u obliku kebaba. Koristite "UserCard.vue" ili "user-card.vue".
  • Komponente koje se koriste samo jednom po stranici trebaju početi s prefiksom "The", da označi da može biti samo jedan. Na primjer za navbar ili podnožje trebali biste upotrijebiti "TheNavbar.vue" ili "TheFooter.vue".
  • Podređene komponente trebaju sadržavati ime svog roditelja kao prefiks. Na primjer, ako želite komponentu "Photo" koja se koristi u "UserCard" imenućete je "UserCardPhoto". Bolja je čitljivost jer su datoteke u mapi obično redoslijed po abecednom redu.
  • U nazivu komponenata uvijek koristite puno ime umjesto kratice. Na primjer, ne upotrebljavajte "UDSettings", umjesto toga upotrijebite "UserDashboardSettings".

Vue.js službeni stilski vodič

Bez obzira jeste li napredni ili početnik s Vue.js, trebali biste pročitati ovaj Vue.js stilski vodič, sadrži puno savjeta i imenovanja konvencija. Sadrži puno primjera stvari koje treba raditi, a što ne raditi.

Ako vam se svidio ovaj post, kliknite nekoliko puta pljeskajući gumb da biste pokazali svoju podršku! Također, slobodno komentirajte i dajte bilo kakve povratne informacije. Ne zaboravite da me pratite!

Želite vidjeti više ovakvih članaka? Podrži me na Patreonu