Now this applies, I think, to all the component libraries as well, just on a little bit looser level, but the same idea.
Alright, that next standard is the structure provided by the Vue CLI, and I really don't have a whole lot to say about this, other than it's something we're all familiar with, so let's not mess with it, unless we have a really good reason to.
Alright, if we drill down now into the components directory and if we look in the Vue.js Style Guide, you'll see that we have some component standards described for us in the Style Guide that will really go a long way to making our code more predictable.
So let's take a look at a few of those standards today. The first one mentioned in the Style Guide is that we really should be using dedicated single file components. There's really no good reason, unless you're not using a build tool, to not just put all your components in a dedicated Vue file.
Also, your single file components should be named in Pascal case. Your base components should be prefixed with either app or base. And this just kind of groups them all together in the file structure and provides that standard where other people can look at the app... or excuse me, look at the component and say, oh, that's kind of an app-wide reusable component. I know exactly when and where I can use that. And I actually prefer to use app all the time because it starts with an A and is typically going to group all of those and put all of those at the very top of my components directory.
Alright, another thing in the Vue.js style guide is to use multi-worded names for your components. And this is really more than just a stylistic thing. This is in order to prevent clashing with future or existing HTML elements as they are by definition always a single word.
Another standard in the Vue.js style guide is to prefix all your single instance components with the word the. That is components that will only ever be used once per page. Things like the header or the sidebar. Once again, that predictability makes a new developer or someone brand new to the project know instantly what these components are about.
It also suggests to prefix tightly coupled child components with the component name that they're tightly coupled to. For instance, you could have a to do list and then items within that to do list. And so you would have a to do list component and a to do list item component. Likewise, you could have a job form and then a special location map field on that form. And therefore that component would be called job form location map field.
All right, sometimes, yes, this can get a little bit wordy, but it really groups them together and helps people know that they are coupled and they cannot be used one without the other. And then lastly, begin with the most general term within your component and end with the most specific. This just groups things together once again. And when you're searching for them in your IDEs, quick find or whatever, you can kind of see everything grouped together in one fail search. So, for instance, you've got the search widget, you've got the search widget input, and lastly the search widget results list.
All right, the Vue.js Style Guide actually has a whole lot of other really valuable things in it.
Comments