At this year’s Hangzhou JSConf conference, we were influenced by gridControl author’s live open source project. We also announced the open source of Element, a component library based on Vue 2. We built an empty warehouse five minutes before the show, and by the end of the night we actually pushed the code up and we had already received over 100 stars, and we got a 1K star in just three days. The project was actually in development when Vue 2 went into beta and was nearing completion at the end of August. I also encountered some difficult problems in the beginning, and I am glad to find solutions. Here are some solutions to share with you.

How to manage multiple independent component projectslerna

The original goal was to have one main project that managed all the components into one package, and then each component was a separate package. This allows users to install all components or only the components they need. Therefore, the most direct approach is to build a project for each component. The management of more and more components becomes more and more complex. Each upgrade of the main repository requires updating the version numbers of a bunch of dependent components. And it’s not easy to develop.

It turns out that Babel’s repository has an odd directory structure. A packages folder has all the official Babel plug-ins until it turns out they use a tool called Lerna. Allows you to manage multiple subprojects under the main project, which eliminates the problem of multiple packages being dependent on each other and having to manually maintain multiple packages at release time.

Therefore, we reconstructed the directory structure. All plug-ins are placed in the packages directory as a separate project and can be packaged and distributed separately. While the entry file in the outermost SRC directory brings in all the components, the packaged release main project contains all the components. Thus, the problem of multiple sub-project management is solved.

element/
  package.json
  packages/
    component-a/
      package.json
    component-b/
      package.json
Copy the code

How to solve the problem of customizing multiple themes

Component libraries usually come with a set of themes, or they may have multiple themes to choose from, depending on your own needs. As a result, the scope style recommended by Vue is not feasible, nor can it be written into components. How to write styles and how to refer to style files for components that are published separately is also an issue to be resolved.

In order to make it easier for users to override styles, we use BEM style to write CSS. The advantage of this is that the class name is basically one level, and there are few cases of nesting, so it is easy to directly override the original style. We use our own plugin postCSs-Salad PostCSS to write styles. It integrates several useful PostCSS plug-ins and also supports BEM style.

The style file directory is also published as a separate subproject, so that the entire import package can contain the style file, and separately installed components can import the style file by installing the theme package.

The advantage of this is that it is easy to extend other themes later, or developers can define their own set of preprocessed versions of CSS such as Less or Scss.

How does a document workvue-markdown-loader

When writing Mint UI, I encountered the problem of documenting Vue: how to write a Demo of Vue components while writing Markdown. Although the Demo was never written in the Mint UI documentation. At first, in Element’s internal version, I searched for various Vue Markdown related plug-ins, either defining the Markdown format in the template or having a Markdown component. You can’t write a Markdown file, and you can write a Demo.

Then IT occurred to me that I might try to convert Markdown files into Vue components. After all, you can write HTML in Markdown, so it can be used as a template for Vue. Later came vue-Markdown-loader, a Webpack loader that converts Markdown into VUE components. With vue-Router, it can build a document website that can write VUE code in Markdown.

How to package multiple components simultaneouslycooking

As a result of the previous setup, each component eventually needs to be packaged separately and distributed. At the same time, each component will have a corresponding configuration file, the traditional webpack although support array, but can not pass multiple files. But we have Cooking, a WebPack-based tool that is simpler to configure and easier to use. You only need to pass in multiple configuration files at the same time to package, taking advantage of webPack’s ability to accept array configuration items.

These tools make Element development easier and more efficient. Now that Element is officially open source and we have released documentation and design resources, we welcome all Vue developers to try it and contribute.

————-

Project links:

  • ElemeFE/ Element: Desktop UI Elements for vue.js 2.0
  • GitHub – lerna/lerna: A tool for managing JavaScript projects with multiple packages.
  • GitHub – ElemeFE/ postCSS-Salad: The salad is a style solution that helps you write more concise and elegant CSS
  • GitHub – ElemeFE/mint-ui: Mobile UI elements for vue.js
  • GitHub – QingWei-Li/vue-markdown-loader: Convert Markdown file to Vue Component.
  • ElemeFE: an easy-to-use front-end build tool