🎉 Element UI for Vue 3.0 来了!
第一个使用 TypeScript + Vue 3.0 Composition API 重构的组件库 Element Plus 发布了 ~
2016 年 3 月 13 日 Element 悄然诞生,经历了 4 年的风雨洗礼,我们从一个饿了么内部业务组件库成长为 Vue 生态里最流行的 UI 组件库之一。
截至本文撰写时,Element 已获得 48200 Github Star, NPM 下载量 95 万次/每月的可喜成绩。感谢超过 530 名社区贡献者的参与维护,和我们一同完成了 4400 次 commit 的更新迭代。

*Element 开发团队 40000 Github Star 庆祝会
Element Plus for Vue 3.0
2020 年,随着 Vue 3.0 不断完善和发布,我们也紧张投入到 Element 对 Vue 3.0 的升级适配工作中。历经 6 个月共计 23 个 alpha 版本的迭代,终于,在今天, Element Plus for Vue 3.0 Beta 版本正式发布 !
https://github.com/element-plus/element-plus
Vue 3.0 的大版本升级,对生态组件库来说也是一次丢掉历史包袱前行的好机会,我们大刀阔斧对 Element 进行了一次深度重构。

Element Plus for Vue 3.0 是一个使用 TypeScript + Composition API 重构的全新项目。我们几乎重写了每一行 Element 的代码,用最 Vue 3 的方式呈现了最完美的 Element,主要有:
- 使用 TypeScript 开发,提供完整的类型定义文件
- 使用 Vue 3.0 Composition API 降低耦合,简化逻辑
- 使用 Vue 3.0 Teleport 新特性重构挂载类组件
- 使用 Lerna 维护和管理项目
- 使用更轻量更通用的时间日期解决方案 Day.js
- 升级适配 popperjs, async-validator 等核心依赖
- 完善 52 种国际化语言支持
除此以外,还有:
- 全新的视觉*
- 优化的组件 API
- 更多自定义选项
- 更加详尽友好的文档
Q:Element Plus 和 Element UI 是什么关系? 为什么又一个新项目?
正如 vue-next 之于 vue,一次 100% 的重构虽然解决了很多历史遗留问题,但也不可避免的引入一些新的 bug 和问题,而独立的 issue 和 pr 区可以减少大家使用和反馈的心智成本,也能更加方便我们定位问题,并行维护迭代。
Element will stay with Vue 2.x
For Vue 3.0, we recommend using Element Plus from the same team
具体可以参考 Element 的 README https://github.com/ElemeFE/element/blob/dev/README.md
Q: 老 Element 项目可以平滑升级到 Vue 3.0 + Element Plus 吗?
由于 Vue 3.0 升级引入了部分 API 的调整,老项目的升级不可避免的要做些许改动。但我们力争把变更内容做到可控,只需要很少的调整就能完成项目升级。在今后 Vue 3.0 的项目里,还是熟悉的 Element 的配方和味道。
Q: Element UI 还会维护吗?
当然会!(而且一直在正常迭代发布呀 ヽ(✿゚▽゚)ノ)
每每看到社区类似的担忧,对我们都是一种鞭策。作为一个负责任的开源项目,必然不会辜负大家的期待。随着用户的增多,肩上的压力也越来越大,希望大家使用了 Element 能真正为项目开发减负提效,这样我们多加班,大家早下班,想到这,感觉胸前的红领巾更鲜艳了。
开始体验吧
有很多方式可以体验 Element Plus for Vue 3.0
手动安装
npm install element-plus,详见官网安装指南下载Webpack 脚手架 直接运行体验
🎉 Element UI for Vue 3.0 来了!的更多相关文章
- Vue 基于node npm & vue-cli & element UI创建vue单页应用
基于node npm & vue-cli & element UI创建vue单页应用 开发环境 Win 10 node-v10.15.3-x64.msi 下载地址: https ...
- php项目中使用element.ui和vue
1.plugins中添加axios,element-ui 2.全局文件下引入 <script src="/static/plugins/vue@2.5.13/vue.js"& ...
- element ui 在vue中使用可能遇到的问题
组件使用参照官网http://element.eleme.io/#/zh-CN/component/quickstart 在 main.js 中写入以下内容: import Vue from 'vue ...
- Vue3 + Element ui 后台管理系统
Vue3 + Element ui 后台管理系统 概述:这是一个用vue3.0和element搭建的后台管理系统界面. 项目git地址: https://github.com/whiskyma/vu ...
- element ui 1.4 升级到 2.0.11
公司的框架 选取的是 花裤衩大神开源的 基于 element ui + Vue 的后台管理项目, 项目源码就不公开了,记录 分享下 步骤 1. 卸载 element ui 1.4的依赖包 2. 卸载完 ...
- [坑况]饿了么你是这样的前端——vue+element ui 【this dependency was not found:'element-ui/lib/theme-chalk/index.css'】
element ui 坑况:今日pull代码,潇洒npm run dev ,被告知:this dependency was not found:'element-ui/lib/theme-chalk/ ...
- Vue + Element UI项目初始化
1.安装相关组件 1.1安装Node 检查本地是否安装node node -v 如果没有安装,从Node官网下载 1.2安装npm npm -v 如果没有安装:使用该指令安装: npm install ...
- 分享一个自搭的框架,使用Spring boot+Vue+Element UI
废弃,新的:https://www.cnblogs.com/hackyo/p/10453243.html 特点:前后端分离,可遵循restful 框架:后端使用Spring boot,整合了aop.a ...
- Vue(十八)Element UI
Elment UI 1. 简介 Element UI是饿了么团队提供的一套基于Vue2.0的组件库,可以快速搭建网站,提高开发效率 ElementUI PC端 MintUI 移动端 [官网](http ...
随机推荐
- Unity2D 人物移动切换人物图片
勾选Constraints_freeze Rotation_z轴锁定,防止碰撞偏移. public float moveSpeed = 3f;//定义移动速度 priv ...
- Python-自动化测试面试
1.以你做过的项目,举例来说一下你的自动化测试是怎么做的? 参考答案:就拿简历上的ecshop项目来说吧,在编写脚本前,我们会对系统进行评估,确认这个系统可不可以实现UI自动化,如果可以的话,就筛选出 ...
- Spring Cloud Alibaba基础教程-Nacos(二)
在Spring Cloud Alibaba基础教程-Nacos(一)当中学习了,如何从 nacos当中 通过Java的方式获取值,以及连接数据库,下面我们开始第二篇的学习 ,如果对你有帮助,方便下次寻 ...
- python 画图二(三维图,多轴图)
import sys reload(sys) sys.setdefaultencoding('utf-8') import matplotlib.pyplot as plt import numpy ...
- Python利用openpyxl带格式统计数据(2)- 处理mysql数据
上一篇些了openpyxl处理excel数据,再写一篇处理mysql数据的,还是老规矩,贴图,要处理的数据截图: 再贴最终要求的统计格式截图: 第三贴代码: 1 ''' 2 #利用openpyxl向e ...
- root密码忘记了,怎么办?
root是管理员使用的超级用户,如果密码忘记了,可以使用以下两种方法修改. 方法一: 进入单用户模式下进行密码修改 步骤1:重启系统,在系统进入3秒启动阶段,快速点击键盘上任意键可以取消默认进入系统状 ...
- git原理学习记录:从基本指令到背后原理,实现一个简单的git
一开始我还担心 git 的原理会不会很难懂,但在阅读了官方文档后我发现其实并不难懂,似乎可以动手实现一个简单的 git,于是就有了下面这篇学习记录. 本文的叙述思路参照了官方文档Book的原理介绍部分 ...
- 在C#中使用OpenCV(使用GOCW)
在C#中使用OpenCV(使用GOCW) 1.什么是GOCW 为了解决在Csharp下编写OpenCV程序的问题,我做过比较深入的研究,并且实现了高效可用的方法GreenOpenCshar ...
- JAVA 实体类List<Entity >转 List<Map>
public static <T extends IdEntity> List<Map<Object,Object>> EntityConvertMap(List& ...
- JDBC数据库删除
1 //删除操作: 2 3 if(conn != null){ 4 String temps="2"; 5 conn.setAutoCommit(false); 6 Prepare ...
- Vue 基于node npm & vue-cli & element UI创建vue单页应用