千呼万唤始出来,ElementPlus正式版正式发布,VueAdminWorkX第一时间升级更新

2022-10-28 18:51:41 浏览数 (3)

01

前言

做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 就可以获取所有的版本源码下载地址

02

ElementPlus的重要升级

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

全面支持Typescript和Vue3

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

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

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

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

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

代码语言:javascript复制
<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 组件更加好用。"(出自掘金)

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

03

VueAdminWorkX的重要升级

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

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

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

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

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

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

1 人点赞