前言

做Vue开发的小伙伴肯定都知道一个框架ElementUI。不过随着Vue3的发布，ElementUI也没有更新，还是挺遗憾的。但是社区小伙伴们一起搞了一个ElementPlus做为ElementUI的继任者。最近ElementPlus终于发布了正式的版本，还是很值得一试的。

之前 beta 了一大堆。说实话，等的有点着急了，不过还好没放弃，ElementPlus 2.0.0正式版正式发布

"ElementPlus自第一个 commit 起，经过 1 年零 7 个月的持续迭代开发，总计 2635 commits，经过 256 位贡献者所提交的 2494 个 PR，137 个 Alpha 与 Beta 版本，在社区每一位同学的参与帮助下，Element Plus 的第一个正式版终于和大家见面。"（来自掘金）

可以看出大家也都是非常用心的在做这件事情。虽然未能参与其中的开发，但是我在很早之前就对 ElementPlus 做了一套后台系统：VueAdminWorkX

VueAdminWorkX是基于Vue3 + Webpack + Typescript + ElementPlus 架构开发而来。

现在已经完全免费开源给大家使用。

如果想要获取源码，可以关注本公众号然后再回复数字 1  就可以获取所有的版本源码下载地址

ElementPlus的重要升级

个人感觉 ElementPlus 和 之前的 ElementUI 无论是在引入，使用上差别还是不小的。

全面支持Typescript和Vue3

新的 ElementPlus 使用 TypeScript 与 Vue 3.2 开发，提供完整的类型定义文件。并使用 Composition API 降低耦合，简化逻辑。这点还是很符合Vue3的。

同样的的Vue3已经完全不支持 IE ，ElementPlus组件库也不再兼容IE浏览器。当然

VueAdminWorkX肯定也不会再支持IE浏览器了。

新增了一个全局配置管理的组件 config-provider

这个新的组件可以说和之前相比还是很值得点赞的，方便灵活了很多。用法也简单，无论是国际化还是主题配置都是比较方便的

<template>
  <div>
    <el-config-provider :locale="locale2">
      <el-color-picker :model-value="''" style="vertical-align: middle" />
    </el-config-provider>
    <el-button style="margin-left: 8px; vertical-align: middle" @click="toggle">
      Switch Lang
    </el-button>
  </div>
</template>

暗色主题

之前的ElementUI想要调整一下主题还是挺麻烦的。需要先生成一个主题包再引入，灵活性降低了很多。

但ElementPlus采用了 CSS Variables 这将比之前的 SASS 变量配置模式更方便且性能更好。

而且官方正在制作 暗黑主题 ，大家拭目以待，应该会很方便支持暗黑主题。

高性能表格组件

"在 Beta 发布的时候，我们提到过提供使用虚拟化能力的表格，来优化大数据量情况下的 Table 组件性能。但本次的正式版发布暂未包含这部分功能，而会在后续的迭代中加入。一直没有把这个功能落地下来有很大一部分原因是，我们一直在探索到底哪一种方式是更加适合用户的。是我们直接加入虚拟化的表格渲染引擎，亦或是我们提供渲染接口让用户自己添加虚拟化的组件（类似 vue-virtual-scroller 这样的组件）来自行渲染。后续我们会参考结合现在市面上相关组件的实现，提供一套解决方案，让 Element Plus 的 Table 组件更加好用。"（出自掘金）

还有好多新的组件和特点这里不一一列举了，大家可以下载下来亲自试一下。

VueAdminWorkX的重要升级

在第一时间得知ElementPlus发布了正式版之后，我就马上对VueAdminWorkX进行了升级。

把组件库升级到了最新的版本：v2.0.1。

同时，还带来了一个重要的升级，

就是把 上下布局模式 重新做了一下。

之前的模式不太符合用户的操作习惯。

大家可以去github或者gitee上下载源码，如果可以请给个 star