background

If you use Vue technology stack to develop PC to B business, then you must be familiar with Element-UI. I am currently working in Zoom, fork a source code of Element-UI to do secondary development, and also have a certain research on the source code of Element-UI. The component library is not open source, so I can’t share the technical details, but For Element-UI, it is open source, and most people will use it directly. In order to familiarize people with the principles of Element-UI, there will be less mistakes and less overtime. I’m going to write a series of articles about the implementation of Element-UI and the implementation details of the component library.

I believe that after systematic learning, you can not only to its implementation such as control, but also to learn a lot of complex components to achieve ideas, improve their technical ability, and even their own hand to a large component library.

Series article design

I will write an article on the overall design of the component library, then I will write each article at a component granularity, and possibly multiple articles for complex components.

For each component, I will first analyze the role of components, use methods, design ideas, and then to analyze its implementation details and principles, including not only THE JS part, but also its layout and CSS part, which will also incorporate some of my thinking.

The Element-UI itself also relies on a number of good third-party libraries, and WHEN I come across one during component analysis, I will organize separate articles to share.

Because element is also maintaining the component library, the code may be updated, so the code in this article will inevitably differ from the latest source code, so I will write each component when affixed with the corresponding version number, in the future if the analysis of some components and the source code if too large, will update the corresponding article.

How to learn

For this type of series, sequential learning is best, and if you are interested in a component, you can see the articles directly.

I understand that many people use fragmentation time to read articles on wechat official accounts. There is no problem with fast food articles, but if you want to learn more about technology, I suggest you clone the source code of Elemence-UI and sit in front of the computer to study.

This article is not intended to be a tutorial on how to use the Element-UI component library. If you just want to know how to use it, you are strongly encouraged to read the documentation on the official website.

You may encounter some problems during the learning process, please leave a comment below the article.

Suits the crowd

  1. Working and wanting to use Element-UI development, 1 + years front-end development experience.

  2. Familiar with vue.js technology stack and developed several practical projects with it.

  3. Students who are interested in principle and technology and want to advance and improve.

Update speed

Maintain a pace of 1-2 posts per week.

Write in the last

If you find this kind of article helpful, you are welcome to recommend it to your friends.

Next up: Element-UI Technology Revealed (2) – The overall design of the component library.

In addition, I just opened a public account “Lao Huang’s front-end private dishes”, “Element-UI Technology Secrets” series articles will be updated and released on the public account for the first time, in addition, I will often share some front-end advanced knowledge, dry goods, and occasionally share some soft quality skills, welcome everyone to pay attention to oh ~