Element Plus 完整教程：从背景到实践
一、Element Plus 背景介绍
1.1 Element Plus 的诞生
Element Plus 是一套基于 Vue 3.0 的桌面端组件库，由 饿了么前端团队 开源维护。它的诞生源于前端技术生态的重大变革 —— Vue.js 3.0 的发布。
在 2020 年 4 月，饿了么的开发者和设计师们就开始为 Vue 3.0 时代做准备。随着 Vue 3.0 正式发布，Element Plus 应运而生，成为 Element UI 的升级与适配版本。这是一个重要的里程碑，标志着前端 UI 组件库向现代化 Vue 3 架构的转型。
1.2 开发历程与社区贡献
Element Plus 的开发历程堪称开源协作的典范。从 2020 年 12 月发布首个 Beta 版开始，经过 一年零七个月（约 21 个月） 的持续迭代开发，终于在 2023 年 10 月推出了稳定的正式版本。
在这漫长的开发周期中：
- 256 位贡献者 积极参与
- 提交了 2494 个 Pull Request (PR)
- 产生了 2635 个 commits
- 经历了 137 个 Alpha 与 Beta 版本 的迭代
这些数字背后凝聚了无数开发者的智慧与汗水，共同打造出了这个稳定、高效的 UI 组件库。
1.3 与 Element UI 的关系
Element Plus 不是 Element UI 的简单升级，而是一个 基于 Vue 3 完全重构的、面向未来的下一代前端 UI 组件库。它继承了 Element UI 的核心理念和优秀基因，同时在技术架构、开发体验、性能和定制化能力上实现了全方位的飞跃。
二、技术特性与优势
2.1 基于 Vue 3.0 的现代化架构
Element Plus 充分利用了 Vue 3.0 的新特性，为开发者带来了诸多优势：
- Composition API 支持：降低了组件间的耦合度，简化了逻辑，使得组件更加易于维护和扩展
- TypeScript 原生支持：完全拥抱 TypeScript，提供完整的类型定义，极大提升了代码的智能提示能力和可维护性
- 性能优化：通过 Vue 3 的 Proxy 基础的响应式系统和编译时优化，组件渲染更高效，特别是在处理大型动态数据集时表现优异
- 更好的可维护性：采用单文件组件（SFC）的模式编写，组件自包含，易于阅读和维护
2.2 丰富的组件生态
Element Plus 提供了 丰富的 UI 组件，能够帮助开发者快速构建企业级中后台产品，包括但不限于：
- 基础组件：按钮、输入框、表单等
- 数据展示：表格、卡片、标签等
- 反馈组件：消息提示、对话框、通知等
- 导航组件：菜单、面包屑、分页等
- 布局组件：栅格、容器、布局等
- 其他业务组件：日期选择器、上传组件、树形控件等
2.3 高度可定制与灵活配置
- 丰富的配置选项和 API：满足不同项目的个性化需求
- 强大的主题定制能力：支持通过 Sass 变量和 CSS Variables 进行主题定制，提供 Config Provider 进行全局配置
- 多模块格式支持：同时支持 ESM、CJS 与 UMD 格式，方便在不同环境下使用
- 浏览器兼容性：虽然 Vue 3.0 不再兼容 IE，但 Element Plus 在保证性能的前提下，尽可能地提高了最低兼容版本，支持更多现代浏览器
三、安装与基础配置
3.1 安装方式
Element Plus 提供了多种安装方式，适应不同的包管理工具：
# 使用 npm 安装（推荐）
npm install element-plus --save# 使用 yarn 安装
yarn add element-plus# 使用 pnpm 安装
pnpm install element-plus3.2 基础配置
在 Vue 3 项目中，通常在 main.js 或 main.ts 文件中进行配置：
import { createApp } from 'vue'
import App from './App.vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'// 中文语言包（可选）
import zhCn from 'element-plus/dist/locale/zh-cn.mjs'const app = createApp(App)// 使用 Element Plus
app.use(ElementPlus, {locale: zhCn, // 设置中文
})app.mount('#app')3.3 图标系统集成
Element Plus 使用独立的图标库，需要单独安装和配置：
# 安装图标库
npm install @element-plus/icons-vue在 main.js 中全局注册图标组件：
import * as ElementPlusIconsVue from '@element-plus/icons-vue'// 全局注册所有图标
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {app.component(key, component)
}或者在组件中按需引入特定图标：
<script setup>
import { Edit } from '@element-plus/icons-vue'
</script><template><!-- 使用注册的图标组件 --><el-icon><Edit /></el-icon><!-- 作为按钮图标 --><el-button type="primary" :icon="Edit">编辑</el-button>
</template>四、组件使用实践
4.1 基本组件使用
安装配置完成后，可以直接在组件中使用 Element Plus 的丰富组件：
<template><div><!-- 基础按钮 --><el-button type="primary">主要按钮</el-button><el-button type="success">成功按钮</el-button><!-- 日期选择器 --><el-date-picker v-model="date" type="date" placeholder="选择日期" /><!-- 表单示例 --><el-form ref="form" :model="form" label-width="100px"><el-form-item label="活动名称"><el-input v-model="form.name"></el-input></el-form-item><el-form-item label="活动区域"><el-select v-model="form.region" placeholder="请选择活动区域"><el-option label="区域一" value="shanghai"></el-option><el-option label="区域二" value="beijing"></el-option></el-select></el-form-item><el-form-item><el-button type="primary" @click="onSubmit">立即创建</el-button><el-button>取消</el-button></el-form-item></el-form></div>
</template><script setup>
import { ref } from 'vue'const date = ref('')
const form = ref({name: '',region: '',
})const onSubmit = () => {console.log(form.value)
}
</script>4.2 按需引入（优化方案）
为了减小打包体积，推荐采用按需引入的方式：
4.2.1 安装必要插件
npm install -D unplugin-vue-components unplugin-auto-import4.2.2 修改 vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
import Components from 'unplugin-vue-components/vite'
import { ElementPlusResolver } from 'unplugin-vue-components/resolvers'export default defineConfig({plugins: [vue(),AutoImport({resolvers: [ElementPlusResolver()],}),Components({resolvers: [ElementPlusResolver()],}),],
})配置完成后，就可以 直接在组件中使用 Element Plus 组件，无需手动导入，同时会自动处理样式引入。
五、主题定制与样式优化
5.1 主题定制方法
Element Plus 提供了灵活的主题定制方案：
5.1.1 通过 Sass 变量定制
创建变量文件（如 src/styles/element/index.scss）：
@forward 'element-plus/theme-chalk/src/common/var.scss' with ($colors: ('primary': ('base': #2c82ff,),'success': ('base': #31bf00,),'warning': ('base': #ffad00,),'danger': ('base': #e52f2f,),'info': ('base': #8055ff,),)
);5.1.2 通过 CSS 变量定制
在全局样式中定义 CSS 变量：
:root {--el-color-primary: #1890ff;--el-color-success: #52c41a;--el-color-warning: #faad14;--el-color-danger: #f5222d;--el-color-info: #1890ff;
}5.1.3 使用主题编辑器
Element Plus 提供了 在线可视化定制主题工具，可以通过图形界面调整颜色，实时预览效果并生成相应的配置代码。
5.2 样式引入注意事项
- 全局引入：简单但会增加打包体积
- 按需引入：推荐方式，配合自动导入插件使用
- 样式问题排查：如果样式未生效，检查是否正确引入了样式文件或配置了自动导入插件
六、迁移指南（从 Element UI 到 Element Plus）
对于从 Element UI 迁移到 Element Plus 的项目，需要注意以下变化：
6.1 主要变更点
全局方法变更：
this.$alert,this.$confirm,this.$prompt等方法已移至ElMessageBox// Before: this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(...)// After: import { ElMessageBox } from 'element-plus' ElMessageBox.confirm('此操作将永久删除该文件, 是否继续?', '提示', { type: 'warning' }).then(...)属性名称变更：部分组件的属性名称发生了变更
样式引入方式：按需引入时，需要手动引入组件样式或使用自动处理插件
6.2 迁移步骤
安装依赖：
npm uninstall element-ui npm install element-plus @element-plus/icons-vue修改入口文件：将 main.js 中的 Element UI 相关代码替换为 Element Plus
全局替换图标：使用代码编辑器全局查找并替换旧版的 class 图标用法
替换全局方法：查找并替换
this.$msgbox,this.$confirm等调用逐页面测试：迁移后需对每个页面进行详细测试，确保样式和功能正常
七、总结与展望
Element Plus 作为 Vue 3 时代的 UI 组件库解决方案，不仅继承了 Element UI 的优秀基因，更通过全面的技术升级，为开发者提供了更加强大、灵活和现代化的开发体验。
核心优势总结：
- ✅ 基于 Vue 3.0 的现代化架构
- ✅ 丰富的企业级组件生态
- ✅ 出色的性能表现
- ✅ 灵活的主题定制能力
- ✅ 完善的开发者体验
- ✅ 活跃的社区生态
未来展望：
Element Plus 团队将继续专注于项目的稳定性和可维护性，持续收集社区反馈，不断优化和完善组件库。同时，随着 Vue 生态系统的不断发展，Element Plus 也将与时俱进，为开发者提供更加高效、便捷的 UI 组件解决方案。
无论是新手入门还是企业级应用开发，Element Plus 都是一个值得信赖的选择，它将继续引领 Vue 3 时代的 UI 组件库发展方向。