Element UI 与 Element Plus的区别
【代码】Element UI 与 Element Plus的区别。
·
Element UI 与 Element Plus的区别
一. 技术栈与 Vue 版本支持
| 区别 | Element UI | Element Plus |
|---|---|---|
| | Element Plus | 专为 Vue 3 设计 |
| | 依赖 Options API | 支持 Composition API、Teleport 等新特性 |
| | 已停止新功能开发 | 持续更新维护 |
二. 组件功能与 API 差异
| 区别 | Element UI | Element Plus |
|---|---|---|
| | Element Plus | 专为 Vue 3 设计 |
| | 依赖 Options API | 支持 Composition API、Teleport 等新特性 |
| | 已停止新功能开发 | 持续更新维护 |
2.1 Element Plus 新增组件
SelectV2（高性能下拉框）Virtualized Table（虚拟化表格）Skeleton（骨架屏）ConfigProvider（全局配置）
2.2 API 变更示例
| 组件 | Element UI | Element Plus |
|---|---|---|
| 表格行样式 | row-class-name |
row-class |
| 对话框显隐 | visible.sync |
v-model:visible |
| 通知弹窗调用 | 全局 this.$message |
需手动导入 ElMessage |
三. 设计与主题
3.1 视觉风格
- Element Plus
- 主色调整为
#409EFF→#1677FF - 默认圆角从
4px改为2px - 优化移动端响应式断点
- 主色调整为
3.2 图标系统
// Element UI（字体图标）
<link rel="stylesheet" href="element-icons.css">
// Element Plus（SVG 图标，需单独安装）
npm install @element-plus/icons-vue
四 开发体验优化
按需加载
| 组件 | 说明 | code |
|---|---|---|
| Element UI | 需 babel-plugin-component | plugins: [["component", { "libraryName": "element-ui" }]] ` |
| Element Plus | 通过 unplugin-vue-components 自动导入 | plugins: [Components({ resolvers: [ElementPlusResolver()] })] |
五 TypeScript 支持
- Element Plus 完全使用 TS 重写，提供严格类型检查
六 迁移成本
6.1 语法调整
| 说明 | code |
|---|---|
| v-model 行为变更 | 需用 modelValue + update:modelValue ` |
| 事件总线变更 | bus -> mitt |
6.2 组件调整
| 说明 | code |
|---|---|
| 图标需单独导入 | <el-icon><Edit /></el-icon> ` |
| 组合式 API | Popper 相关组件重构为 usePopper |
文档与资源
| 组件 | 官网 | 最近一次更新 |
|---|---|---|
| Element UI | https://element.eleme.io | v2.15.x 2021 |
| Element-plug | https://element-plus.org | V2.9.7 2025-03-21 |
有“AI”的1024 = 2048，欢迎大家加入2048 AI社区
更多推荐
5
0- 0
已为社区贡献1条内容
所有评论(0)