javascript - Having some doubts on how to name my Vue.js components and some more

Question

I'm gonna try to not make this too long and just shoot some questions which have been bothering me for some time:

1. If a view is displaying 2 different children components based on the URL via a router, should those components be in the components or views directory?
2. Should components names be capitalized like this - Participant.vue or participant.vue?
3. Are single word components like Participant.vue okay to use? If not, how should I name a component that renders information about a participant of a match.
4. If I want the component to use multiple words, what naming convention am I meant to use? ParticipantMatches.vue, participantMatches.vue, participant-matches.vue or Participant-Matches.vue?
5. If my components have some sort of hierarchy, would it be stupid to append the parent component name to the start of the child component so that related components stay grouped up in the IDE file tree?

For example:

Participant.vue - Parent component
ParticipantMatches.vue - Child component of Participant.vue
ParticipantMatchesStats.vue - Child component of ParticipantMatches.vue

The only problem I see is that component names might potentially become too big.

标签： javascriptvue.js

Answer 1

If a view is displaying 2 different children components based on the URL via a router, should those components be in the components or views directory?

There is not a real definition for this so it's up to you, certainly in a SPA, as it is only one page. For me personally I use place the the "views" that can be accessed via a route under views everything rendered on that view I place in components

Should components names be capitalized like this - Participant.vue or participant.vue?

Vue recommends (as suggested early) https://vuejs.org/v2/style-guide/#Base-component-names-strongly-recommended

Are single word components like Participant.vue okay to use? If not, how should I name a component that renders information about a participant of a match.

Participant.vue is basically OK, but again it's all up to you. When you have multiple component handling data of participants you could think of adding more information in the name of the component

If I want the component to use multiple words, what naming convention am I meant to use? ParticipantMatches.vue, participantMatches.vue, participant-matches.vue or Participant-Matches.vue?

When using a component directly in the DOM (as opposed to in a string template or single-file component), we strongly recommend following the W3C rules for custom tag names (all-lowercase, must contain a hyphen). This helps you avoid conflicts with current and future HTML elements.

If my components have some sort of hierarchy, would it be stupid to append the parent component name to the start of the child component so that related components stay grouped up in the IDE file tree?

Place the components that belong to each other in a directory, I should not use the parent name in the component itself, If you want to reuse the component somewhere else in the future, the name doesn't make sense anymore.