Hoe een Vue.js-project te structureren

De perfecte mappenstructuur en componentarchitectuur van Vue.js met slimme en domme componenten

Vue.js is meer dan een hype, het is een geweldig frontend-framework. Het is vrij eenvoudig om ermee aan de slag te gaan en een web-app te bouwen. Vue.js wordt vaak beschreven als een raamwerk voor kleine apps en soms zelfs als een alternatief voor jQuery vanwege het kleine formaat! Ik denk persoonlijk dat het ook geschikt is voor grotere projecten en in dit geval is het belangrijk om het goed te structureren, wat betreft de componentarchitectuur.

Voordat ik aan mijn eerste grote Vue.js-project begon, heb ik wat onderzoek gedaan om de perfecte mapstructuur, componentarchitectuur en naamgevingsconventie te vinden. Ik ging door de documentatie van Vue.js, een paar artikelen en veel GitHub open source-projecten.

Ik moest de antwoorden vinden op een paar vragen die ik had. Dat is wat je in dit bericht zult vinden:

  • Hoe structureer je de bestanden en mappen binnen het Vue.js-project?
  • Hoe schrijf je Smart en Dumb componenten en waar plaats je ze? Het is een concept afkomstig van React.
  • Wat zijn de codeerstijl en best practices van Vue.js?

Ik zal ook documenteren met de bron waar ik door geïnspireerd ben en andere links om een ​​beter begrip te krijgen.

Vue.js mapstructuur

Hier is de inhoud van de map src. Ik raad je aan om het project te starten met Vue CLI. Ik heb persoonlijk de standaard Webpack-sjabloon gebruikt.

.
├── app.css
├── App.vue
├── activa
│ └── ...
├── componenten
│ └── ...
├── main.js
├── mixins
│ └── ...
├── router
│ └── index.js
├── winkel
│ ├── index.js
│ ├── modules
│ │ └── ...
│ └── mutation-types.js
├── vertalingen
│ └── index.js
├── gebruikt
│ └── ...
└── weergaven
    └── ...

Een paar details over elk van deze mappen:

  • activa - waar u activa plaatst die in uw componenten worden geïmporteerd
  • componenten - Alle componenten van de projecten die niet de hoofdweergaven zijn
  • mixins - De mixins zijn de delen van de JavaScript-code die in verschillende componenten worden hergebruikt. In een mixin kunt u de methoden van elk onderdeel van Vue.js plaatsen, deze worden samengevoegd met die van het onderdeel dat het gebruikt.
  • router - Alle routes van uw projecten (in mijn geval heb ik ze in de index.js). In principe is alles in Vue.js een component. Maar niet alles is een pagina. Een pagina heeft een route zoals "/ dashboard", "/ instellingen" of "/ search". Als een component een route heeft, wordt deze gerouteerd.
  • store (optioneel) - De Vuex-constanten in mutation-type.js, de Vuex-modules in de submapmodules (die vervolgens worden geladen in de index.js).
  • vertalingen (optioneel) - Bestanden lokaliseren, ik gebruik Vue-i18n, en het werkt redelijk goed.
  • utils (optioneel) - Functies die ik in sommige componenten gebruik, zoals regexwaardetests, constanten of filters.
  • weergaven - Om het project sneller leesbaar te maken, scheid ik de componenten die worden gerouteerd en plaats ik ze in deze map. De componenten die voor mij worden gerouteerd zijn meer dan een component omdat ze pagina's vertegenwoordigen en ze hebben routes, ik zet ze in "views" en wanneer je een pagina aanvinkt, ga je naar deze map.

U kunt uiteindelijk andere mappen toevoegen, afhankelijk van uw behoefte, zoals filters of constanten, API.

Sommige bronnen waar ik door geïnspireerd ben geraakt

  • 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

Slimme versus domme componenten met Vue.js

Slimme en domme componenten is een concept dat ik van React heb geleerd. Slimme componenten worden ook containers genoemd, zij zijn degenen die de statusveranderingen afhandelen, ze zijn verantwoordelijk voor hoe dingen werken. Integendeel, de domme componenten, ook wel presentatie genoemd, behandelen alleen het uiterlijk.

Als u bekend bent met het MVC-patroon, kunt u dumpcomponenten vergelijken met de View en slimme componenten met de controller!

In React worden slimme en domme componenten meestal in verschillende mappen geplaatst, terwijl je in Vue.js ze allemaal in dezelfde map plaatst: componenten. Om te differentiëren in Vue.js gebruikt u een naamgevingsconventie. Stel dat u een domme kaartcomponent hebt, dan moet u een van deze namen gebruiken:

  • Basecard
  • AppCard
  • VCard

Als u een slimme component hebt die BaseCard gebruikt en er enkele methoden aan toevoegt, kunt u deze bijvoorbeeld een naam geven, afhankelijk van uw project:

  • profilecard
  • ItemCard
  • NewsCard

Als uw slimme component niet alleen een 'slimmere' BaseCard met methoden is, gebruikt u gewoon een naam die bij uw component past en zonder te beginnen met Base (of App of V), bijvoorbeeld:

  • DashboardStatistics
  • Zoekresultaten
  • Gebruikersprofiel

Deze naamgevingsconventie komt uit de officiële styleguide van Vue.js die ook naamgevingsconventies bevat!

Naamgevingsconventies

Hier zijn een paar conventies uit de officiële styleguide van Vue.js die je nodig hebt om je project goed te structureren:

  • Componentnamen moeten altijd uit meerdere woorden bestaan, behalve voor root-app-componenten. Gebruik bijvoorbeeld 'UserCard' of 'ProfileCard' in plaats van 'Card'.
  • Elke component moet zich in een eigen bestand bevinden.
  • Bestandsnamen van componenten met één bestand moeten altijd PascalCase zijn of altijd kebab-case. Gebruik "UserCard.vue" of "user-card.vue".
  • Componenten die slechts eenmaal per pagina worden gebruikt, moeten beginnen met het voorvoegsel 'De', om aan te geven dat er maar één kan zijn. Voor een navigatiebalk of voettekst moet u bijvoorbeeld "TheNavbar.vue" of "TheFooter.vue" gebruiken.
  • Onderliggende componenten moeten hun oudernaam als voorvoegsel opnemen. Als u bijvoorbeeld een component "Photo" wilt gebruiken in de "UserCard", noemt u deze "UserCardPhoto". Het is voor een betere leesbaarheid omdat bestanden in een map meestal alfabetisch geordend zijn.
  • Gebruik altijd de volledige naam in plaats van de afkorting in de naam van uw componenten. Gebruik bijvoorbeeld geen "UDSettings", maar in plaats daarvan "UserDashboardSettings".

Vue.js officiële stylegids

Of je nu een gevorderde of een beginner bent met Vue.js, je moet deze Vue.js styleguide lezen, het bevat veel tips en ook naamgevingsconventies. Het bevat veel voorbeelden van dingen die u wel en niet moet doen.

Als je dit bericht leuk vond, klik dan een paar keer op de klap knop hieronder om je steun te tonen! Geef ook commentaar en geef feedback. Vergeet me niet te volgen!

Wilt u meer artikelen zoals deze zien? Steun me op Patreon