There is an index.vue file in the project that has 1000 + lines of code and is still separate from CSS, which exposes a lot of problems.

Naming problem

The contents of an index-named file should be “mean”, indicating how the resources in the current folder are made available to the outside world. In other words, they are not used to write business logic, such as Element’s index.js

import ElAutocomplete from './src/autocomplete';

/* istanbul ignore next */
ElAutocomplete.install = function(Vue) {
  Vue.component(ElAutocomplete.name, ElAutocomplete);
};

export default ElAutocomplete;
Copy the code

So, if you need to have a file named index, it should be index.js

Some developers prefer to have a page-level route in the form of “named folder /index.vue”, although in Visual Studio Code,” named folder “can be quickly associated with the corresponding routeindex.vue.

I opened multiple files for reference writing, interaction between several pages, and so onI want to debug developer tools The most important thing about naming is differentiationAnd theindex.vueThe only benefit may be the ability to write one less layer of paths when importing components, which is not much of a difference for automatic imports

Code segmentation problem

It is necessary to separate components for code segmentation, which can be suffixed to distinguish Page, Dialog, Tabpane, Panel, Block, etc. It is natural to combine function points, and cutting too many is also a headache.

The structure is clear to ensure the code is clear, and it is convenient to locate problems and cooperate with others.

What usually makes some developers hate this approach is the “hassle”, as with TS. In fact, traditional props and emit can be discarded for interaction between components. They are more suitable for common components. In current scenarios, provide and inject are more appropriate, which eliminates a lot of template code.

Element’s Form and FormItem components operate like this.

conclusion

Although some open source projects on the web use index.vue to measure the suitability of a naming strategy in conjunction with the project itself

  1. Volume of files
  2. Relationships between files
  3. Purpose of the project.

In addition, component names are capitalized, and one of the elements is to separate them from some of the pure JS east and west.

There is no example of component initials in lower case on vue’s official website. I wonder how this method became popular

This might sound like vue

Vue (pronounced /vju /, similar to view)

Although the website clearly points out that there are still a lot of people who like to pronounce each letter one by one. When I first realized this problem, I thought it was okay if both parties knew what it meant.

How do you say Vue? In my opinion, it is very difficult for people to change what they already know.