After one year and seven months, Element Plus is finally in a stable, official release.
Here’s a set of figures: After 256 contributors, 2,494 PR, and 2,635 commits, the Element development team has released Element Plus.
The official release, which was launched on February 7th this year after 137 iterations of Alpha and Beta versions, has not come easily.
Where does Element come from?
So what exactly is Element Plus about?
This is a beautiful and convenient component library. According to the official website, this is a Vue3 based desktop component library for designers and developers.
Looking back, we found that the developer behind this component library is ele. me’s big front-end development team. Back in 2016, at this time, ELE. me was incubating a group of business component library, hoping to build a background site solution for rapid development of product management in the background.
The first internal version of Element was released on April 14 of that year, thanks to the concerted efforts of ele. me developers and designers. Over four months later, the ele. me business-only component transitioned from VU1.x to Vue2.
In September 2020, the Ele. me front-end development team launched the first Beta version of Element Plus. Today, the star component library has reached a new milestone.
It is worth mentioning that Element Plus is open source on Gitee and is Gitee’s GVP project (Gitee’s top open source project).
Open Source License
MIT
Project introduction
Desktop component library of Vue 3.0 produced by ele. me big front end team. The project address
Gitee.com/element-plu…
Element Plus changes and changes
Officially, Element Plus is the first component library developed using TypeScript + Vue 3.2 to provide a complete Composition API for refactoring type-definition documentation. With a major Vue 3.0 upgrade, Element, the component library of its ecosystem, wanted to get rid of its historical baggage, so the development team did a deep refactoring of Element. In other words, Element Plus was created by rewriting every line of code based on Vue3.
In fact, Element Plus rewrote the code, and we can still see the Element UI in it. Although the two parties maintain their own versions, the launch of Element Plus offers a glimpse of the answer. \
From the frame:
-
Element-ui applies to the Vue2 framework
-
Element-plus works with the Vue3 framework
From the perspective of compatibility:
-
Element-ui basically doesn’t work on mobile
-
Element-plus is no longer compatible with Internet Explorer and has improved the least compatible version.
One caveat: If you want to use Element Plus normally on older browsers, use Babel, ESBuild, or some other conversion tool and introduce polyfills accordingly.
In addition, Element Plus uses ResizeObserver. If compatibility needs, you need to introduce resize-Observer-Polyfill by yourself.
In terms of configuration: Element Plus adds a global configuration management component, config-Provider, to replace the Element UI’s global configuration, vue.prototype.$Element.
You can perform global configuration in either of the following ways:
Element UI:
`<template>
`` <el-button type="primary" icon="el-icon-search">Search</el-button>
``</template>`
Copy the codeElement Plus:
<script setup lang="ts">
import { Search } from '@element-plus/icons'
</script>
<template>
<el-button type="primary" :icon="Search">Search</el-button>
</template>
Copy the codeBy design:
One, in the past, the size of the component system is mainly composed of default/medium/small/mini. Now switch to the more natural large/default/small. Based on default, select large if you need to increase and small if you need to decrease.
Second, because Vue3 introduced some API adjustments, it was inevitable that Element’s project upgrade would require some changes. On the basis of migrating existing components, four new components, Space, Skeleton, Empty and Affix, have been added to the official version to enrich the choice of developers. Element Plus also added a select-v2 component that uses virtual scrolling to optimize presentation performance for long lists.
Element Plus has uploaded the latest Figma design resource file with all component information for easy use by product managers and designers.
Finally, it is worth noting that the release of the current official version only means that the overall migration and adaptation work is over, and the API design is basically stable, but not the end. For example, in the Beta release of 2020, there was an official mention of providing tables with virtualization capabilities to optimize the performance of the Table component in the case of large data volumes. However, this feature is not included in the official release. According to officials, this feature will be added in future iterations.
So Element Plus is coming, but it’s still just the beginning.