Element Plus：Vue 3 生态的桌面端 UI 组件库

Element Plus 目前斩获了 27,517 个 Star，是 Vue 3 生态里使用率最高的桌面端 UI 组件库之一。

Element Plus 由饿了么前端团队的 Element UI 演化而来，基于 Vue 3 Composition API 和 TypeScript 从头重写。2022 年 2 月发布首个稳定版本后，API 进入冻结状态，可用于生产环境。相比 Element UI，组件数量和文档覆盖都有明显提升，项目维护也更加活跃。

从 Element UI 迁移

还在用 Element UI 的项目可以迁移到 Element Plus。官方提供了基于 gogocode 的迁移工具，能批量将旧版组件代码转换为 Element Plus 写法。团队在 Vue Element Admin 上做了迁移测试，验证了工具的可用性。迁移过程中涉及的破坏性变更，项目在 Discussions 区域整理了完整清单。

组件体系

Element Plus 覆盖了桌面端开发的常见场景。表格、表单、对话框、导航菜单、消息通知、日期选择器、颜色选择器、级联选择器等组件一应俱全。每个组件都附带 TypeScript 类型定义，配合编辑器可以获得类型提示和自动补全。

组件支持按需引入，结合 unplugin-vue-components 插件可以实现自动按需导入，避免全量引入导致打包体积膨胀。

在线 Playground

项目内置了在线 Playground，可以在浏览器中实时调试组件效果，地址是 element-plus.run。同时也支持 CodeSandbox 在线编辑，适合快速搭建 demo 或做技术方案演示。

多语言支持

Element Plus 内置了国际化方案，目前官方维护中文和英文。翻译工作通过 Crowdin 平台协作，社区成员可以提交翻译或申请成为校对者。

安装与使用

通过 npm 安装：

npm install element-plus

完整引入：

import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
import App from './App.vue'

const app = createApp(App)
app.use(ElementPlus)
app.mount('#app')

按需引入单个组件：

import { ElButton, ElTable } from 'element-plus'

也可以使用中国大陆加速镜像站点 cn.element-plus.org 获取文档和资源。

技术栈

• Vue 3 Composition API
• TypeScript 编写
• Vite 构建
• 支持 Tree Shaking 和按需加载

开源协议

Element Plus 采用 MIT 协议，完全开放。项目接受社区贡献，有 CONTRIBUTING 指南和行为准则。目前在测试、GitHub Actions 和项目管理方面仍在招募贡献者。

目接受社区贡献，有 CONTRIBUTING 指南和行为准则。目前在测试、GitHub Actions 和项目管理方面仍在招募贡献者。