Jak strukturovat projekt Vue.js

Perfektní struktura složek Vue.js a architektura komponent s inteligentními a hloupými komponenty

Vue.js je více než humbuk, je to skvělý frontendový rámec. Začít s tím a vytvořit webovou aplikaci je celkem snadné. Vue.js je často popisován jako rámec pro malé aplikace a někdy i jako alternativa k jQuery kvůli jeho malé velikosti! Osobně si myslím, že se hodí i pro větší projekty, a v tomto případě je důležité jej strukturovat dobře, pokud jde o architekturu komponent.

Před zahájením prvního velkého projektu Vue.js jsem provedl výzkum, abych našel perfektní strukturu složek, architekturu komponent a konvenci pojmenování. Prošel jsem dokumentací Vue.js, několika články a mnoha otevřenými zdrojovými projekty GitHub.

Potřeboval jsem najít odpovědi na několik otázek, které jsem měl. To je to, co najdete v tomto příspěvku:

  • Jak strukturujete soubory a složky uvnitř projektu Vue.js?
  • Jak píšete komponenty Smart a Dumb a kam je ukládáte? Je to koncept pocházející z React.
  • Co je styl kódování a doporučené postupy Vue.js?

Budu také dokumentovat zdroj, který jsem se inspiroval, a další odkazy, abych lépe porozuměl.

Struktura složek Vue.js

Zde je obsah složky src. Doporučuji zahájit projekt pomocí Vue CLI. Osobně jsem použil výchozí šablonu Webpack.

.
├── app.css
├── App.vue
├── aktiva
│ └── ...
├── komponenty
│ └── ...
├── main.js
├── mixiny
│ └── ...
├── router
└── └── index.js
├── obchod
├── ├── index.js
├── ├── moduly
│ │ └── ...
│ └── mutation-types.js
├── překlady
└── └── index.js
├── utils
│ └── ...
└── názory
    └── ...

Několik podrobností o každé z těchto složek:

  • aktiva - kam umístíte veškerá aktiva importovaná do vašich komponent
  • components - Všechny komponenty projektů, které nejsou hlavním pohledem
  • mixins - Mixiny jsou části kódu javascript, který je znovu použit v různých komponentách. Do mixu můžete vložit metody libovolné komponenty z Vue.js, které budou sloučeny s metodami komponenty, která ji používá.
  • router - Všechny trasy vašich projektů (v mém případě je mám v index.js). V podstatě ve Vue.js je vše součástí. Ale ne všechno je stránka. Stránka má trasu jako „/ dashboard“, „/ settings“ nebo „/ search“. Pokud součást obsahuje trasu, je směrována.
  • store (volitelné) - Vuex konstanty v mutation-type.js, moduly Vuex v podsložkových modulech (které jsou poté načteny do index.js).
  • překlady (volitelné) - Lokalizuje soubory, používám Vue-i18n a funguje to docela dobře.
  • utils (volitelné) - Funkce, které používám v některých komponentách, jako je testování hodnot regexu, konstanty nebo filtry.
  • zobrazení - Pro urychlení čtení projektu odděluji komponenty, které jsou směrovány, a umístím je do této složky. Komponenty, které jsou směrovány pro mě, jsou více než komponentou, protože představují stránky a mají trasy, vložím je do „pohledů“ a poté, když zkontrolujete stránku, kterou přejdete do této složky.

Nakonec můžete přidat další složky podle vašich potřeb, jako jsou filtry nebo konstanty API.

Některé zdroje jsem se inspiroval

  • 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

Chytré vs hloupé komponenty s Vue.js

Inteligentní a němé komponenty jsou konceptem, který jsem se naučil od React. Inteligentní komponenty se také nazývají kontejnery, jsou to ty, kdo zvládají změny stavu, jsou zodpovědné za to, jak věci fungují. Naopak němé komponenty, nazývané také prezentace, zvládají pouze vzhled a dojem.

Pokud znáte vzor MVC, můžete porovnat komponenty výpisu s pohledem a inteligentní komponenty s řadičem!

V Reactu jsou inteligentní a němí komponenty obvykle umístěny do různých složek, zatímco ve Vue.js je všechny umístíte do stejné složky: components. Pro rozlišení ve Vue.js použijete konvenci pojmenování. Řekněme, že máte hloupou kartu, měli byste použít jedno z těchto jmen:

  • Základní karta
  • AppCard
  • VCard

Pokud máte inteligentní komponentu, která používá kartu BaseCard a přidává k ní některé metody, můžete ji například pojmenovat v závislosti na vašem projektu:

  • Profilová karta
  • ItemCard
  • NewsCard

Pokud vaše inteligentní komponenta není pouze chytřejší kartou BaseCard s metodami, použijte libovolný název, který se hodí k vaší komponentě a aniž byste museli začínat základnou (nebo aplikací nebo V), například:

  • DashboardStatistics
  • Výsledky vyhledávání
  • Uživatelský profil

Tato konvence pojmenování pochází z oficiálního průvodce stylem Vue.js, který obsahuje také konvence pojmenování!

Konvence pojmenování

Zde je několik konvencí, které vycházejí z oficiálního průvodce stylem Vue.js, který potřebujete, abyste svůj projekt dobře strukturovali:

  • Názvy součástí by měly být vždy víceslovné, s výjimkou kořenových komponent aplikace. Používejte například „UserCard“ nebo „ProfileCard“ místo „Card“.
  • Každá součást by měla být ve vlastním souboru.
  • Názvy součástí jednotlivých souborů by měly být vždy PascalCase nebo vždy kebab-case. Použijte „UserCard.vue“ nebo „user-card.vue“.
  • Komponenty, které se na stránku používají pouze jednou, by měly začínat předponou „The“, což znamená, že může existovat pouze jedna. Například pro navbar nebo zápatí byste měli použít „TheNavbar.vue“ nebo „TheFooter.vue“.
  • Podřízené komponenty by měly obsahovat předponu své nadřazené jméno. Pokud byste například chtěli použít komponentu „Photo“ v „UserCard“, pojmenujte ji „UserCardPhoto“. Je to pro lepší čitelnost, protože soubory ve složce jsou obvykle řazeny abecedně.
  • V názvu svých součástí vždy používejte místo zkratky celé jméno. Nepoužívejte například „UDSettings“, místo toho použijte „UserDashboardSettings“.

Oficiální průvodce stylem Vue.js

Ať už jste pokročilý nebo začátečník s Vue.js, měli byste si přečíst tento Vue.js styl průvodce, obsahuje mnoho tipů a také pojmenování konvence. Obsahuje mnoho příkladů věcí, které je třeba dělat a co dělat.

Pokud se vám tento příspěvek líbil, klikněte několikrát na tlačítko „Tleskat“, abyste ukázali svou podporu! Nebojte se komentovat a poskytnout zpětnou vazbu. Nezapomeňte mě následovat!

Chcete vidět více podobných článků? Podpořte mě na Patreonu