Ako štruktúrovať projekt Vue.js

Dokonalá štruktúra priečinkov a architektúra komponentov Vue.js s inteligentnými a nemými komponentmi

Vue.js je viac ako humbuk, je to skvelý frontendový rámec. Začať s tým a vytvárať webovú aplikáciu je celkom ľahké. Vue.js je často popisovaný ako rámec pre malé aplikácie a niekedy aj ako alternatíva k jQuery kvôli jeho malej veľkosti! Osobne si myslím, že sa tiež zmestí na väčšie projekty, a v tomto prípade je dôležité, aby bola dobre štruktúrovaná, pokiaľ ide o architektúru komponentov.

Predtým, ako som začal svoj prvý veľký projekt Vue.js, som urobil nejaký výskum s cieľom nájsť dokonalú štruktúru priečinkov, architektúru komponentov a konvenciu pomenovávania. Prešiel som dokumentáciou Vue.js, niekoľkými článkami a mnohými otvorenými zdrojovými projektmi GitHub.

Potreboval som nájsť odpovede na pár otázok, ktoré som mal. To je to, čo nájdete v tomto príspevku:

  • Ako štruktúrujete súbory a priečinky v projekte Vue.js?
  • Ako píšete komponenty Smart a Dumb a kam ich umiestnite? Je to koncept pochádzajúci z React.
  • Čo je štýl a osvedčené postupy kódovania Vue.js?

Budem tiež dokumentovať zdroj, ktorý ma inšpiroval, a ďalšie odkazy, aby som lepšie porozumel.

Štruktúra priečinkov Vue.js

Tu je obsah priečinka src. Odporúčam vám naštartovať projekt pomocou Vue CLI. Osobne som použil predvolenú webovú šablónu.

,
├── app.css
├── App.vue
├── aktíva
│ └── ...
├── komponenty
│ └── ...
├── main.js
├── mixíny
│ └── ...
├── smerovač
│ └── index.js
├── uložiť
│ ├── index.js
├── ├── moduly
│ │ └── ...
│ └── mutation-types.js
├── preklady
│ └── index.js
├── utils
│ └── ...
└── zobrazenia
    └── ...

Niekoľko podrobností o každom z týchto priečinkov:

  • diela - kam umiestnite diela, ktoré sa importujú do vašich komponentov
  • komponenty - všetky komponenty projektov, ktoré nie sú hlavnými názormi
  • mixins - Mixins sú časti kódu javascript, ktorý sa opakovane používa v rôznych komponentoch. Do mixu môžete vložiť ľubovoľné komponenty z Vue.js, ktoré sa zlúčia s tými, ktoré používajú komponent.
  • router - všetky trasy vašich projektov (v mojom prípade ich mám v index.js). V podstate vo Vue.js je všetko súčasťou. Ale nie všetko je stránka. Stránka má trasu ako „/ dashboard“, „/ settings“ alebo „/ search“. Ak komponent má trasu, smeruje sa.
  • store (voliteľné) - Vuex konštanty v mutation-type.js, moduly Vuex v podpriečinkových moduloch (ktoré sa potom načítajú do index.js).
  • preklady (voliteľné) - Lokalizuje súbory, používam Vue-i18n a funguje to celkom dobre.
  • utils (voliteľné) - funkcie, ktoré používam v niektorých komponentoch, ako napríklad testovanie hodnoty regulárnych hodnôt, konštanty alebo filtre.
  • zobrazenia —Ak chcete zrýchliť čítanie projektu, oddelím komponenty, ktoré sú smerované, a umiestnim ich do tejto zložky. Komponenty, ktoré sú smerované pre mňa, sú viac ako len komponenty, pretože predstavujú stránky a majú trasy, vložím ich do „zobrazení“, potom keď skontrolujete stránku, do ktorej prejdete do tohto priečinka.

Nakoniec môžete pridať ďalšie priečinky podľa potreby, ako sú filtre alebo konštanty API.

Niektoré zdroje ma inšpirovali

  • 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

Smart vs nemý komponenty s Vue.js

Inteligentné a nemé komponenty sú konceptom, ktorý som sa naučil od spoločnosti React. Inteligentné komponenty sa tiež nazývajú kontajnery, sú to tie, ktoré zvládajú zmeny stavu, sú zodpovedné za to, ako veci fungujú. Naopak, nemé komponenty, tiež nazývané prezentačné, zvládajú iba vzhľad a dojem.

Ak ste oboznámení so vzorom MVC, môžete porovnať komponenty výpisu s pohľadom a inteligentné komponenty s ovládačom!

V Reacte sú inteligentné a nemé komponenty zvyčajne umiestnené v rôznych priečinkoch, zatiaľ čo vo Vue.js sú všetky umiestnené v rovnakom priečinku: components. Na rozlíšenie vo Vue.js použijete konvenciu pomenovávania. Povedzme, že máte komponent hlúpej karty, mali by ste použiť jedno z týchto mien:

  • BaseCard
  • Appcard
  • VCard

Ak máte inteligentnú súčasť, ktorá používa kartu BaseCard a pridáva k nej niektoré metódy, môžete ju napríklad pomenovať v závislosti od vášho projektu:

  • ProfileCard
  • ItemCard
  • NewsCard

Ak váš inteligentný komponent nie je iba „inteligentnejšou“ kartou BaseCard s metódami, použite ľubovoľný názov, ktorý vyhovuje vášmu komponentu a bez toho, aby ste začínali na základni (alebo aplikácii alebo V), napríklad:

  • DashboardStatistics
  • Výsledky vyhľadávania
  • Užívateľský profil

Táto konvencia pomenovávania vychádza z oficiálneho sprievodcu štýlom Vue.js, ktorý obsahuje aj konvencie pomenovávania!

Konvencie pomenovávania

Uvádzame niekoľko konvencií pochádzajúcich z oficiálneho sprievodcu štýlom Vue.js, ktoré potrebujete, aby ste svoj projekt dobre usporiadali:

  • Názvy komponentov by mali byť vždy viacslovné, s výnimkou koreňových komponentov aplikácie. Použite napríklad „UserCard“ alebo „ProfileCard“ namiesto „Card“.
  • Každá súčasť by mala byť vo vlastnom súbore.
  • Názvy súčastí jedného súboru by mali byť vždy PascalCase alebo vždy kebab-case. Použite „UserCard.vue“ alebo „user-card.vue“.
  • Komponenty, ktoré sa na stránku používajú iba raz, by mali začínať predponou „The“, čo znamená, že môže existovať iba jedna. Napríklad pre navbar alebo pätu by ste mali použiť „TheNavbar.vue“ alebo „TheFooter.vue“.
  • Podradené komponenty by mali obsahovať predponu svoje rodičovské meno. Napríklad, ak by ste chceli použiť „Photo“ komponent použitý v „UserCard“, pomenujete ho „UserCardPhoto“. Je to pre lepšiu čitateľnosť, pretože súbory v priečinku sú zvyčajne usporiadané podľa abecedy.
  • V názvoch komponentov vždy používajte namiesto skratky celé meno. Nepoužívajte napríklad „UDSettings“, ale namiesto toho použite „UserDashboardSettings“.

Oficiálny sprievodca štýlom Vue.js

Či už ste pokročilým alebo začiatočníkom s programom Vue.js, mali by ste si prečítať tento sprievodca štýlom Vue.js, obsahuje veľa tipov a tiež pomenovanie konvencií. Obsahuje veľa príkladov vecí, ktoré treba robiť a nerobiť.

Ak sa vám tento príspevok páčil, niekoľkokrát kliknite na tlačidlo p p p to to to to to, aby ste prejavili svoju podporu! Neváhajte tiež komentovať a poskytovať spätnú väzbu. Nezabudnite ma nasledovať!

Chcete vidieť viac podobných článkov? Podporte ma na Patreone