Element UI 与 Element Plus的区别_elementplus和elementui的区别

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 图标需单独导入 ` 组合式 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

长春新闻动态