本文详细介绍了ElementPlus作为Vue3的重构版，其升级包括使用TypeScript+CompositionAPI，支持Vue3Teleport和Day.js等。ElementPlus与ElementUI是不同大版本的关系，老项目升级需要进行简单调整。文章还提供了ElementPlus的安装、引入方法，并对比了卡拉云的低代码开发工具。
本文首发：《Element Plus for Vue 3 入门教程》
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构。Vue 3.0 的这次大版本升级，对于第三方组件库来说是一件好事，那些已经修修补补无数次，还无法彻底解决的问题，在这次面向 Vue 3.0 重构时，一次性全部解决。
Element Plus 有那些升级？
Element Plus 使用 Vue 3 与 TypeScript开发，提供完整的类型定义文件，使用 Composition API 简化逻辑，降低耦合。
Element Plus 这一次使用 TypeScript + Composition API 来进行重构
- 使用 TypeScript 开发
- 使用 Vue 3 Teleport 新特性重构挂载类组件
- 使用 Vue 3 Composition API 简化逻辑，降低耦合
- 选择了 Day.js 这种更轻便通用的时间日期选择器解决方案
- 使用 Lerna 维护和管理项目
- 升级适配 async-validator，popperjs 等核心依赖
- 完善 52 种国际化语言支持
Element Plus 与 Element UI 是什么关系？
Element Plus 是为了适配 Vue 3 对 Element UI 进行的重构，就如同 vue-next 对于 vue 一样，你可以理解为不同的大版本。
具体可参见 Element 的 README：https://github.com/ElemeFE/element/blob/dev/README.md
老 Element 项目是否可以平滑升级到 Vue 3 + Element Plus ？
Vue 从 2 到 3 的升级，本身就有部分 API 进行了调整，Element Plus 作为 Vue 3 的第三方库，也不可避免的在这些更新的细节上也进行了对应的修改。所以老项目升级到全新的 Element Plus 这些适配 Vue 3 的部分也就跟随一起要做简单的变动。不过大家不用担心，整体变动并不大。
Element Plus 相关生态
- Element Plus Playground - element-plus.run 在线测试
- Element Plus Icons - Element Plus 图标集合
- Element Plus Vite Starter - Vite 快速上手模板
- unplugin-element-plus - Element Plus 按需加载样式插件
最低0.47元/天 解锁文章
扫一扫
3458
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
![[外链图片转存失败,源站可能有防盗链机制,建议将图片保存下来直接上传(img-5yJJ9BhK-1649305710235)(https://kalacloud.com/static/69c66d1cd077cb74a46fddb8a2f7cf67/be796/03-vue-element-plus-website.jpg “vue-element-plus-website”)]](https://kalacloud.com/static/69c66d1cd077cb74a46fddb8a2f7cf67/0d6e3/03-vue-element-plus-website.jpg){kind=link}