Shulou(Shulou.com)06/02 Report--

In this issue, the editor will bring you about how Element's elegant Vue 2 component library is developed. The article is rich in content and analyzes and describes for you from a professional point of view. I hope you can get something after reading this article.

I also encountered some thorny problems in the early days, and I am glad to have found a solution. Sort out some solutions here and share them with you.

How to manage multiple independent component projects-- lerna

The initial goal was to have a master project to manage all the components into a package, and then each component was a separate package. In this way, users can install all the components or only the components they need. So our most direct approach is to build a project for each component, and then more and more components are more and more complex to manage. Every time we upgrade the main repository, we have to update the version numbers of a bunch of dependent components. And it's not convenient to develop.

Later I saw that the directory structure of babel's warehouse was very strange. There are all the official babel plug-ins in a packages folder until they find out that they use a tool called lerna. It allows you to manage multiple subprojects under the main project, thus solving the problem that multiple packages depend on each other and need to maintain multiple packages manually when they are released.

So we reconstruct the directory structure, all plug-ins are placed in a separate project in the packages directory, and can be packaged and released separately; at the same time, the entry file under the outermost src directory introduces all components, and the main project of packaging and distribution contains all components. As a result, the problems of multiple sub-project management are solved.

Element/ package.json packages/ component-a/ package.json component-b/ package.json

How to solve the problem of customizing multiple sets of themes

Component libraries generally come with a set of topics, there may be multiple sets of topics to choose from, of course, to meet user-defined needs. Therefore, the style recommended by Vue to define scope is not feasible, and the style cannot be written in the component. So how to write the style and how to reference the style file is also a problem that we have to solve.

In order to facilitate users to override the style, we use the BEM style to write CSS. The advantage is that the class names are basically first-level, and only a few will be nested, so it is easy to overwrite the original style directly. We used the self-developed postcss-salad PostCSS plug-in to write the style. Integrates several practical PostCSS plug-ins and also supports BEM style.

And the style file directory is also released as a separate subproject, so that the entire package can contain style files, and separately installed components can introduce style files by installing theme packages.

The advantage of this is that it is convenient to expand other topics later, or developers can define a set of other CSS preprocessed versions such as Less or Scss.

How documents work-- vue-markdown-loader

When writing Mint UI, I encountered the problem of writing documents in Vue: how to write the Demo of Vue components when writing Markdown. Although Demo was not written in the Mint UI document later. At first, in the internal version of Element, I looked for various Markdown-related plug-ins for Vue, either defining the Markdown format in template or having a component of Markdown. You can't just write Markdown files, and you can also write Demo.

Then it occurred to me that maybe I could try to convert the Markdown file into a Vue component. After all, you can write HTML in Markdown, so it can be used as a template for Vue. Then there was vue-markdown-loader, a webpack loader that converts Markdown into Vue components, and with vue-router, you can build a documentation website where you can write Vue code in Markdown.

How to package multiple components at the same time-cooking

As a result of the previous settings, each component needs to be packaged separately and released. At the same time, there will be a corresponding configuration file under each component. Although the traditional webpack package supports passing in arrays, it cannot pass in multiple files. But we have cooking, a tool based on webpack but easier to configure and easier to use. When packaging, you only need to pass in multiple configuration files at the same time, and you can package at the same time by making use of the feature that webpack accepts array configuration items.

With these tools, the development of Element becomes easier and more efficient.

This is how Element's elegant Vue 2 component library is developed. If you happen to have similar doubts, you might as well refer to the above analysis to understand. If you want to know more about it, you are welcome to follow the industry information channel.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.