The components of this column are classified

preface

This article will be the final warm-up article for developing components from 0 to 1 for Vue3.

Here, I’m mainly laying out the broad categories of components THAT I’ve defined in this series.

By the way, this series is not just about learning and sharing how to develop a component from 0 to 1, but also about how I use these components in my personal projects.

Because I expected the component library to be open source as a separate project, I will redo the components based on the generic component library I developed.

This, then, creates several conflicting points in my thinking about component libraries and projects.

Yes, the component library is not finished yet, so I can’t advertise myself, but it doesn’t matter, sharing articles and participating in events is the most important thing.

The development of this component library is mainly aimed at learning, so I will open source as soon as possible in the following article, and then improve it slowly. (Yes, I still want to trick Star)

I. Style conflict:

My expected component library is more of a simple, fresh look, and my personal project is more of a gold digger theme, so style-wise the two are not radically different, but there are some stylistic changes to be made.

However, since the component library is developed because of the project, the style and tone of the library itself is similar to the project. There are nuggets and gems in the first place, and the code of the open source component library is learned as a reference. So all that needs to be changed is some of the styles that are not common in the component library, which will be re-encapsulated and fine-tuned in the project.

Second, functional conflict

The functional conflict here is actually not accurate, should use the opposite will be better, but mainly to express the meaning.

The functions of some components are open source because they want to be perfected in the future, so they will refer to some popular component libraries in the market and try to be more general.

The use of the project will be more inclined to combine the project requirements to achieve some of their own ideas.

Similar to the actual work, the components will be combined with some functional features of the project, to make the components more suitable for their own projects.

Category 1: Basic components

The word based component is the summary of myself to this kind of components, of course it is not my first, but I rarely pay attention to this aspect, so there is no too much reference is known on the market, only a summary of my own, basic component is similar to the mask, libraries, and form components such as these particles smaller components.

My understanding of base components is that they are used as building blocks for other components. For example, there is a black Mask in loading component, which is also used in several other components. It is not necessary to write each component once, so you can use the Mask developed in the base component. Enter loading animation when leaving a slot slot in the Mask component for developing loading component.

Here is my general term for this type of component, “base component,” which is used to reduce duplication of effort when developing a particular component.

Classification 2. Layout components

The basic components are small components such as system messages and forms, while the layout components are large components such as tables, rotographs, and progress bars, which call themselves sections in the interface.

And this kind of component is usually in my actual development, the second encapsulation and adjustment function of a category of components. Because of its obvious, the user feedback is the most direct, so according to the development needs to adjust the function is more and important.

Category 3. Interface Components

This type of component is more of a personal concept for me. This type of component doesn’t appear in the component library, at least not in the one I expect.

A component that is encapsulated for the purpose of project development. For example, the list of articles on the front page of the mining project is similar to the list of articles on the personal center, but it is not necessary to repeat writing because of the two interfaces.

After all, there is a principle in development :Don’t repeat yourself. Don’t repeat yourself, so here you can wrap the list as a component, and if this component goes through the render article, the layout will definitely use the layout component Card.

Such a combination of interfaces, similar layout packaging, passing properties to control the operation of details, can greatly improve our development efficiency. Of course, this is an important prerequisite, that is, we need to distinguish between two visually similar components and whether the packaging is necessary, sometimes there are similar, but the actual implementation of a different design, this needs to be carefully selected.

Interface components, because they are very project-dependent components, do not appear in the open source component library, and are more like a developer’s experience.

In this column, I’m going to share how I encapsulate similar layouts in interfaces during project development.

Of course, I am such a new workplace is in any case also dare not to explain such a word, so just share my experience, hope to give some of the entry-level colleagues a little experience, but also hope that the hands can point out the shortcomings, to help the younger brother to improve.

Category four: System components

That sounds great, but I’m going to throw some cold water on it. It’s not about the underlying system components, it’s about the components that replace the system functionality in the project. For example, the browser has its own alert pop-up, Prompt dialog box and other system pop-ups, but because of its “simple” style, it is often incompatible with our project, and will block the process of the program.

So system components are my summary of this type of components, they replace some of the default browser functions, such as Modal box Modal component instead of the Alert popover, Modal box Modal+input input box instead of prompt dialog, In addition, Message component and Notice component are also indispensable in interactive functions.

The last

Although I have divided the components into four categories here, if I can open source and write a project address as a demo, I will definitely deal with the categories in the market, such as form components, feedback components, etc.

Therefore, the current classification is a summary of my own components, while the components on the market are more detailed. Of course, I can’t write my articles according to open source categories.

The first is as my component development order, because they are inclusive, layout components will definitely use the base components, and interface components will use the layout components. In addition, independent of the layout components, interface components outside the system components will also need to use a part of the basic components, so, the basic components write well, the development speed is not slow.

Ok, that’s the groundwork for my four major categories of components. Starting with the next article, I’ll get into the development of components, starting with the base components, as the other three categories will need the base components to set the tone. Then, the sharing order is not good the other way around.

Hope to seduce the interest of the reader master.