We use the most mainstream of the front frame vue in the development process, the component is a very important part, so to speak, all of vue applications, are assembled by a panel of members one by one made of.
It is because of vue components so important ecological vue's also a lot of UI component library, most notably non-Element-UI must go, there are a lot of well-package assembly available to us, greatly enhanced our development efficiency.
So, these components UI framework, whether it is how to package it? How to package your own components from scratch hands of it? Next, we start with the most simple of a Button component package. Below, is Element-UI buttons in the assembly, then, we will step by step to achieve them.
First, the definition of a component index.vue, configure routing rendered
Secondly, their definition of a component my-butotn, written basic styles, the middle button, use the slot <slot /> placeholder.
Written basic style button, as follows
Results are as follows:
Then, let's realize the type attribute, depending on the type of rendering different default color effects, mainly through the passing of different type, which render different classes, different styles to achieve the effect, the core code is as follows
The effect is achieved as shown below:
Next, we come to realize the size attribute, passing through different size, to achieve the control buttons of different sizes.
The core code is as follows:
}
Achieve results is as follows:
So, we can also control whether buttons are rounded buttons, designed by a property round, if at the time of using the buttons, passing the property round, then the button is rounded button. code show as below
The effect achieved is as follows:
Finally, we come to realize the effect of the application of the following buttons, as long as the use of custom components when the incoming diabled property, then disable the effect is active. Otherwise, the effect is not effective. Code is as follows 
:
And ultimately the effect is as follows:
To sum up, we step by step, hands-on, from zero to achieve a common Button component to achieve the performance results of the control buttons type, size, size control buttons, round buttons control whether the attribute is rounded, and disable property controls button is disabled, the other components of the package are in fact very much the same, please continue to focus on follow-up article.