Encapsulate your own component library – VUE

“For the crowd: Talk about components together“

“Viewing time: 30 minutes“

“Description: Some experience to share, welcome to discuss“

preface

The vUE community now has more and more component libraries, both large and small, and more and more excellent open source components, such as

PC: View UI,Element UI, BootstrapVue,Ant Design Vue, MS Design, Map: Vue-bidu-map,vue-amap, vue-echarts of charts,vue-easetable, and many more

Mobild: Vux,Vant, Futter

Then, how to choose a suitable component library before the framework is built, how to select excellent open source components in the development process, how to encapsulate the public part into business components, and how to accumulate and maintain the functional components accumulated by the project, is what we should think about

How to choose an appropriate component library (Selection)

Whether it is a fast food project or a continuous improvement of the architecture, it is very important to choose a reliable and appropriate UI component library when building the architecture, which is related to the later maintenance of the system architecture, the accumulation of components and the precipitation of the project. Once an immature component library is chosen, the entire architecture is riddled with pitfalls. So how to choose an appropriate component library

contrast

1.1 Comparing the number of Github-star, it can reflect the popularity of open source projects

1.2 Comparing component aesthetics and interactive experience, a fast-food architecture can choose a framework with similar specific business relationships

1.3 Compare the community, a relatively complete and active community will be more and more perfect for the maintenance of components

1.4 Comparison of API stability, perfection, for developers, reliable API is more important than anything else
Practice + Implementation

2.1 Whether it is a component library or a functional component, practice is the truest way to check whether a component works, and to experience the components you choose to get the truest feedback
In line with the business

According to their own business to choose the corresponding technical solutions, will reduce some unnecessary trouble to the development process, business and display business to choose the corresponding UI framework will get twice the result with half the effort
consulting

Consulting industry leaders is also a shortcut

Example: When choosing UI component library for architecture transformation, Wang Ergou compared github star of iView Element Bootstrap, number of components and API of components. Finally, he consulted colleagues who had been struggling in front end for many years, and finally chose IView (View UI). We have been optimizing and improving the architecture based on View UI and accumulating components, among which a large number of business components rely on View UI. If Wang Ergu wants to transform the architecture into Element UI, it is necessary to discard the business components based on View UI. If both component libraries are used more than once, it may cause huge project and difficult maintenance. So in the SELECTION of UI component library, carefully consider, it is very likely to be always with your partner ~

How to select good open source components

In addition to choose the right component library, the development process encountered some component library components, you need to our own ideas to make such components, then one approach is to look for good open source components, how to find, baidu first, go to dead simple search, you can also go to Denver/zhihu community find, find can meet our functional components, To achieve, there is no component we need to code our own implementation, as we accumulate functional components

So how to select the components that meet our requirements from the numerous components:

Start by selecting a list of components that meet the functional requirements
Secondly, compared with expansibility and aesthetics, good expansibility is preferred, and more friendly experience is preferred
Finally, practice practice practice, components are not good, others do not count, put in our project to achieve

🤔 How to accumulate and maintain functional components

In addition to choose the right component library, in the process of project development, project manager there will always be some puzzling idea, some wonderful work interaction component, this kind of circumstance, there are two solutions, one is to find a replacement with your three inches golden tongue to persuade project experiences, the second is the darling obedient to achieve them. If you’ve been working for 1-2 years and you’re still stuck in the second option, you might want to rethink that

🤺 then how do we accumulate and maintain our own developed components:

What components are worth maintaining

Components that meet the following conditions are worth maintaining:

Better interactive experience
The community doesn’t have what we need
Often used, but not for our specific business to produce high coupling

The idea of component encapsulation

If we take a component from coding to presentation and divide it into presentation, data processing and API

So, all we need to do to encapsulate the component is to define the display layer and the data to be processed, and the fixed data format corresponds to our component template

If we put a component in the MVVM model (here is the VM view template, which I use as a kind of abstract controller Control for our parent component

So, all we need to do to wrap the component is view and template, and the parent component’s controller controls our component presentation

Creating documentation

A good component can make their memory longer way is to create a document, the document can also be given to other members of the team to use, like the common UI component library has its own document, so how do we build our own document

The document should be simple. Component example /props parameter Description/Events Description of listening events/Slot slot description. If any internal event is exposed, add other event descriptions
Document template, first, we can build our own document maintenance instructions; Second, we can use the documentation of open source projects; Vue officially launched a VuePress (I used the first one, because I didn’t know there was VuePress as an open source project at that time), interested to know by yourself

Common proTypes used for VUE component development

Model, bind value(non-default must be included in props), bind event (if custom requires emit to create event)
Prop types and default values should be defined for props. Validation rules are not used in the actual application
Emit, custom event
$refs, get internal leak events
Slots, slots, a good way for us to customize display content, data passing, $slots are all parts we need to know. There are two ways to write data passing, new and old, examples

/ / the old way<div slot="tags" slot-scope="{item, formData}">;
// Virtual node instance    <InputNumber v-model="formData[item.config.fieldId]"></InputNumber>;
</div>
// The new slot node must be called template, not div... The actual used<template #tags="{item, formData}">; // Virtual node instance <InputNumber v-model="formData[item.config.fieldId]"></InputNumber>; </template>; Copy the code

Developing business components

Business components, what kind of components called business components, we in the process of project development, the details of a certain interface, can be called in various places in the system, such components need to be encapsulated as a common business components for the system to use, if someone asks why not copy, then why use VUE?

👀 How do you determine which components are public?

Habit, usually develop the habit of component separation, regardless of whether the component is public, will not be wrong!
In development, understand the business first, and get used to it. Once you understand the business, you will know which components need to be packaged
Components that are repeated in multiple projects and invoked in multiple scenarios can be encapsulated as common components

👀 What is important about encapsulating business components?

The location of the component directory should be established, and other members should be notified
The use of components should be annotated to facilitate later operation and maintenance

Component encapsulation considerations

Annotations, whether common or otherwise, are a common problem. Again, it’s best to have an annotation specification
Naming common component naming conventions are common to others, such as custom listening events that start with ‘on-‘ and parameters that use hump names
Custom picture path, do not limit our picture path, package components had better open out
Private style, to avoid contaminating other modules, of course, other components also pay attention to private style attributes added

Component library publishing

Why publish component libraries, if you are maintaining many, many projects, then the components that our projects rely on and encapsulate themselves can’t be copied in every project, what a dandy, although I did it in the beginning… It is now common to publish your own component packages in the NPM repository and install them into your own projects via NPM install **

Then, it is also worth thinking about what kind of system component libraries reach that is worth publishing. Component library actually release is not determined by how many of the components, but is decided by your mind, if you have this kind of component abstraction, the thought of component accumulation, so even a widget can also be released even open source ~ like we usually use a lot of widgets, such as drag and drop components/by/tree open source also many individual components, So it doesn’t matter what kind of architecture a component library/component achieves, what matters is the idea that we encapsulate components

How to publish your own component library, package + publish

This chapter briefly introduces the installation method of vUE plug-in, that is, how we should package; Also, download element UI/View UI, an excellent open source component library. For reference, standing on the shoulders of giants, my component library references the view UI encapsulation method
Release: release is simple, online information is also a lot of, how to release the first NPM package belongs to their own, here I briefly talk about the process and matters needing attention
1. Modify several important configuration items for package.json
```
// The package name  "name": "ui".// Version number, the first release is arbitrary, subsequent updates should be incremented  "version": "1.6.8".// The default access file for the published package "main": "src/index.js".// A collection of published files. You can publish multiple folders "files": ["src"].Copy the code
```
1. You need to register an NPM account by yourself. Perform NPM publish and you will be prompted to enter the account password automatically
```
  npm publish
Copy the code
```
NPM install UI in your project, then import and register in the main file… I won’t go into the details

Component updates

No one is perfect. Besides, there may be unused components, and some new support may be added in different scenarios. All of these require us to update the component library. Here is the main update to say matters needing attention

Matters needing attention:

Remember to change the updated version number every time. If the version number is the same, you will be reminded that you cannot update it. If the version number is lower than the version number, you will be reminded that you cannot update it
Component new functions, new functions should be added in the original function unchanged, of course, depends on our actual use of the situation, if your component is not used anywhere, it is free to update
Components have new features, please remember to supplement the documentation oh
Update records remember to add

In practice, in daily projects, the components used can not support a certain function, because there is no special RESEARCH and development team, in order to speed up the progress of the component modification directly in the node_modules dependency package modification, if more records, then update the content to the component library;

conclusion

The above is a summary of my own practice in the work process. The purpose is to improve the efficiency of development and reduce repetitive work. In the usual encapsulation of their own components, there is no good guidance, are their own way to fight, try to come out, if you have a good maintenance environment, cherish it, if not, I hope this article is helpful to you ~ work, can use open source as far as possible with open source, open source really sweet!

The front end of the public account guoguo

Encapsulate your own component library