## 前言
作为 Vue3 生态中最热门的 UI 组件库之一，Element Plus 凭借 “丰富的组件、完善的文档、良好的兼容性”，成为前端开发者开发后台管理系统、中后台应用的首选。无论是新手快速搭建项目原型，还是资深开发者提升开发效率，Element Plus 都能大幅降低 UI 开发成本，让你专注于业务逻辑而非样式编写。
本文从 “入门配置→核心组件实战→项目优化” 三个维度，结合后台管理系统的真实场景，手把手教你掌握 Element Plus 的使用技巧。无论你是 Vue3 新手，还是想从 Element UI 迁移到 Element Plus，这篇文章都能让你快速上手、少走弯路！
## 一、Element Plus 入门：环境搭建与基础配置
在使用 Element Plus 前，需先完成 Vue3 项目的创建和组件库的安装配置。以下是完整步骤，兼容 Vite 和 Vue CLI 两种构建工具。
### 1. 前提条件
- 已安装 Node.js（推荐 v14.18 + 或 v16+）；
- 已创建 Vue3 项目（Vite 或 Vue CLI 均可）；
- 熟悉 Vue3 基础语法（Composition API 优先）。
### 2. 安装 Element Plus
根据项目构建工具选择对应的安装命令，推荐使用`npm`或`pnpm`：
#### （1）npm 安装
bash
```
npm install element-plus --save
```
#### （2）pnpm 安装（推荐，速度更快）
bash
```
pnpm add element-plus
```
#### （3）Vue CLI 项目额外依赖
若项目基于 Vue CLI 创建，需安装配套插件：
bash
```
npm install unplugin-vue-components unplugin-auto-import -D
```
### 3. 配置 Element Plus（两种方式）
Element Plus 支持 “全局引入” 和 “按需引入”，推荐按需引入以减小项目体积。
#### （1）全局引入（快速原型开发）
在`main.js`中全局注册所有组件，简单粗暴但会增加打包体积：
javascript
运行
```
import { createApp } from 'vue'
import ElementPlus from 'element-plus' // 引入Element Plus
import 'element-plus/dist/index.css' // 引入全局样式
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus) // 全局注册
app.mount('#app')
```
#### （2）按需引入（项目实战首选）
通过`unplugin-vue-components`和`unplugin-auto-import`插件，实现组件和 API 的自动导入，无需手动注册：
##### 步骤 1：配置 Vite（vite.config.js）
javascript
运行
```
import { defineConfig } from 'vite'
import Vue from '@vitejs/plugin-vue'
// 引入Element Plus按需导入插件
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(),
// 自动导入Element Plus的API（如ElMessage、ElMessageBox）
AutoImport({
resolvers: [ElementPlusResolver()]
}),
// 自动导入Element Plus的组件
Components({
resolvers: [ElementPlusResolver()]
})
]
})
```
##### 步骤 2：配置 Vue CLI（vue.config.js）
javascript
运行
```
const { defineConfig } = require('@vue/cli-service')
const AutoImport = require('unplugin-auto-import/webpack')
const Components = require('unplugin-vue-components/webpack')
const { ElementPlusResolver } = require('unplugin-vue-components/resolvers')
module.exports = defineConfig({
configureWebpack: {
plugins: [
AutoImport({
resolvers: [ElementPlusResolver()]
}),
Components({
resolvers: [ElementPlusResolver()]
})
]
}
})
```
##### 效果：使用组件无需手动导入
vue
```
<!-- 无需在组件内import ElButton，直接使用 -->
```
### 4. 国际化配置（可选）
Element Plus 默认支持中文，若需切换为英文等其他语言，可在`main.js`中配置：
javascript
运行
```
import { createApp } from 'vue'
import ElementPlus from 'element-plus'
import 'element-plus/dist/index.css'
// 引入英文语言包
import en from 'element-plus/dist/locale/en.mjs'
import App from './App.vue'
const app = createApp(App)
app.use(ElementPlus, { locale: en })
app.mount('#app')
```
## 二、核心组件实战：后台管理系统高频场景
Element Plus 提供了 100 + 组件，覆盖表单、表格、弹窗、导航等中后台开发的核心场景。以下聚焦 5 个高频组件，结合真实业务需求讲解使用技巧。
### 1. 布局组件：ElContainer + ElRow/ElCol（页面骨架搭建）
后台管理系统的页面通常分为 “顶部导航栏 + 侧边栏 + 主内容区”，使用 Element Plus 的布局组件可快速实现响应式布局。
#### 实战：后台管理系统基础布局
vue
```
<!-- 外层容器：垂直布局 -->
<!-- 顶部导航栏 -->
张三
<!-- 中间容器：水平布局（侧边栏+主内容区） -->
<!-- 侧边栏 -->
仪表盘
用户管理
订单管理
<!-- 主内容区 -->
<!-- 路由占位符，对应不同页面内容 -->
[xss_clean]
import { ref } from 'vue'
// 引入图标（Element Plus需单独引入图标库）
import { Home, User, ShoppingCart } from '@element-plus/icons-vue'
const activeMenu = ref('/dashboard') // 当前激活的菜单
[xss_clean]
```
#### 关键技巧：
- `el-container`支持`direction`属性（`vertical`/`horizontal`），控制子元素排列方向；
- `el-aside`的`width`可设置固定值或百分比，响应式场景可结合媒体查询动态调整；
- 菜单激活状态通过`default-active`绑定，配合路由守卫可实现菜单与路由同步。
### 2. 表格组件：ElTable（数据展示与操作）
表格是后台管理系统的核心组件，用于展示用户列表、订单数据等。Element Plus 的`ElTable`支持排序、筛选、分页、单元格编辑等功能，满足大部分业务需求。
#### 实战：用户列表表格（带分页、搜索、删除功能）
vue
```
<!-- 搜索栏 -->
<!-- 表格 -->
{{ scope.row.role === 'admin' ? '管理员' : '普通用户' }}
v-model="scope.row.status" active-value="active" inactive-value="inactive" @change="updateUserStatus(scope.row)" /> <!-- 分页 --> @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage" :page-sizes="[10, 20, 50, 100]" :page-size="pageSize" :total="total" layout="total, sizes, prev, pager, next, jumper" />
[xss_clean]
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
// 搜索条件
const searchKey = ref('')
// 表格数据
const userList = ref([])
// 分页参数
const currentPage = ref(1)
const pageSize = ref(10)
const total = ref(0)
// 初始化加载用户列表
fetchUserList()
// 模拟请求用户列表数据
function fetchUserList() {
// 实际开发中替换为接口请求
setTimeout(() => {
const mockData = Array.from({ length: pageSize.value }, (_, i) => ({
id: (currentPage.value - 1) * pageSize.value + i + 1,
username: `用户${(currentPage.value - 1) * pageSize.value + i + 1}`,
phone: `1380013800${i}`,
role: i % 3 === 0 ? 'admin' : 'user',
status: 'active'
}))
userList.value = mockData
total.value = 100 // 模拟总数据量
}, 500)
}
// 每页条数改变
function handleSizeChange(val) {
pageSize.value = val
currentPage.value = 1 // 重置为第一页
fetchUserList()
}
// 页码改变
function handleCurrentChange(val) {
currentPage.value = val
fetchUserList()
}
// 新增用户
function goToAddUser() {
router.push('/user/add')
}
// 编辑用户
function goToEditUser(user) {
router.push({ path: '/user/edit', query: { id: user.id } })
}
// 更新用户状态
function updateUserStatus(user) {
ElMessage.success(`用户${user.username}状态已更新为${user.status === 'active' ? '启用' : '禁用'}`)
// 实际开发中调用接口更新状态
}
// 删除用户
function deleteUser(userId) {
ElMessage.success(`用户ID${userId}已删除`)
// 实际开发中调用接口删除数据，删除后重新加载列表
fetchUserList()
}
[xss_clean]
```
#### 关键技巧：
- 表格数据通过`data`属性绑定，`prop`对应数据字段，`label`为列标题；
- 自定义单元格内容使用`#default="scope"`插槽，`scope.row`获取当前行数据；
- 分页组件通过`size-change`和`current-change`事件监听页码、每页条数变化，同步请求数据；
- `stripe`属性开启斑马纹，`border`属性显示边框，提升表格可读性。
### 3. 表单组件：ElForm（数据提交与校验）
表单用于新增 / 编辑用户、配置参数等场景，Element Plus 的`ElForm`支持丰富的校验规则、表单布局和组件联动，无需手动编写复杂校验逻辑。
#### 实战：新增用户表单（带表单校验）
vue
```
[xss_clean]
import { ref } from 'vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
const router = useRouter()
const userFormRef = ref(null) // 表单引用
// 表单数据
const userForm = ref({
username: '',
phone: '',
password: '',
confirmPassword: '',
role: 'user',
status: 'active'
})
// 表单校验规则
const formRules = ref({
username: [
{ required: true, message: '请输入用户名', trigger: 'blur' },
{ min: 3, max: 10, message: '用户名长度为3-10个字符', trigger: 'blur' }
],
phone: [
{ required: true, message: '请输入手机号', trigger: 'blur' },
{ pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号格式', trigger: 'blur' }
],
password: [
{ required: true, message: '请输入密码', trigger: 'blur' },
{ min: 6, max: 20, message: '密码长度为6-20个字符', trigger: 'blur' }
],
confirmPassword: [
{ required: true, message: '请确认密码', trigger: 'blur' },
{
validator: (rule, value, callback) => {
if (value !== userForm.value.password) {
callback(new Error('两次输入密码不一致'))
} else {
callback()
}
},
trigger: 'blur'
}
],
role: [
{ required: true, message: '请选择角色', trigger: 'change' }
]
})
// 提交表单
function submitForm() {
userFormRef.value.validate((isValid) => {
if (isValid) {
// 表单校验通过，调用接口提交数据
setTimeout(() => {
ElMessage.success('用户新增成功！')
router.push('/user/list') // 跳转回用户列表
}, 500)
} else {
ElMessage.error('表单校验失败，请检查输入内容')
return false
}
})
}
// 重置表单
function resetForm() {
userFormRef.value.resetFields() // 重置表单字段和校验状态
}
[xss_clean]
```
#### 关键技巧：
- 表单数据通过`model`绑定，校验规则通过`rules`定义，`prop`需与表单字段名一致；
- 自定义校验规则使用`validator`函数，适合处理 “两次密码一致” 等联动校验；
- 提交表单前调用`validate`方法进行校验，`isValid`为`true`表示校验通过；
- 重置表单使用`resetFields`方法，可清空字段值并重置校验状态。
### 4. 弹窗组件：ElDialog（模态框交互）
弹窗用于展示详情、确认操作、表单填写等场景，Element Plus 的`ElDialog`支持拖拽、全屏、遮罩层控制等功能，使用灵活。
#### 实战：查看用户详情弹窗
vue
```
<!-- 触发弹窗的按钮 -->
<!-- 详情弹窗 -->
v-model="isDialogOpen" title="用户详情" width="500px" :append-to-body="true" :close-on-click-modal="false" > [xss_clean] import { ref } from 'vue' // 弹窗显示状态 const isDialogOpen = ref(false) // 当前查看的用户信息 const currentUser = ref({}) // 打开弹窗 function openDetailDialog(user) { // 模拟请求用户详情数据 setTimeout(() => { currentUser.value = { ...user, createTime: '2024-01-01 10:00:00' // 模拟创建时间 } isDialogOpen.value = true }, 300) } [xss_clean] ```  #### 关键技巧： - 弹窗显示 / 隐藏通过`v-model`绑定布尔值控制； - `append-to-body="true"`将弹窗挂载到`body`元素下，避免被父元素样式影响； - `close-on-click-modal="false"`禁止点击遮罩层关闭弹窗，适合表单填写等场景； - 弹窗底部按钮通过`#footer`插槽自定义，默认显示 “确定” 和 “取消” 按钮。 ### 5. 消息提示：ElMessage/ElMessageBox（交互反馈） 消息提示用于向用户反馈操作结果（成功、失败、警告），Element Plus 提供了`ElMessage`（轻量级提示）和`ElMessageBox`（确认对话框）两种组件。 #### 实战：常见消息提示场景 javascript 运行 ``` import { ElMessage, ElMessageBox } from 'element-plus' // 成功提示 ElMessage.success('操作成功！') // 错误提示 ElMessage.error('操作失败，请重试！') // 警告提示 ElMessage.warning('请注意，数据已过期！') // 信息提示 ElMessage.info('数据加载中...') // 确认对话框（删除、提交等危险操作） ElMessageBox.confirm( '此操作将永久删除该用户，是否继续？', '警告', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' } ).then(() => { // 点击确定后的逻辑 ElMessage.success('删除成功！') }).catch(() => { // 点击取消后的逻辑 ElMessage.info('已取消删除') }) ```  ## 三、项目优化：Element Plus 使用进阶技巧 ### 1. 图标优化：按需引入图标库 Element Plus 的图标需要单独安装依赖，推荐按需引入以减小体积： #### （1）安装图标库 bash ``` npm install @element-plus/icons-vue --save ```  #### （2）按需引入图标（推荐） vue ``` 首页 [xss_clean] import { Home } from '@element-plus/icons-vue' [xss_clean] ```  #### （3）全局引入所有图标（不推荐） javascript 运行 ``` import { createApp } from 'vue' import ElementPlus from 'element-plus' import 'element-plus/dist/index.css' import * as ElementPlusIconsVue from '@element-plus/icons-vue' import App from './App.vue' const app = createApp(App) app.use(ElementPlus) // 全局注册所有图标 for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) } app.mount('#app') ```  ### 2. 样式自定义：修改主题颜色 Element Plus 支持通过 CSS 变量或 SCSS 变量自定义主题颜色，满足项目品牌需求。 #### （1）CSS 变量方式（简单快捷） 在`main.js`或全局样式文件中添加： css ``` /* 自定义主题颜色（primary为主要颜色） */ :root { --el-color-primary: #165dff; /* 自定义主色 */ --el-color-success: #00b42a; /* 自定义成功色 */ --el-color-warning: #ff7d00; /* 自定义警告色 */ --el-color-danger: #f53f3f; /* 自定义危险色 */ } ```  #### （2）SCSS 变量方式（灵活度更高） 需先安装 SCSS 依赖： bash ``` npm install sass sass-loader --save-dev ```  创建`element-variables.scss`文件： scss ``` // 覆盖Element Plus的SCSS变量 $--color-primary: #165dff; $--color-success: #00b42a; $--border-radius-base: 4px; // 自定义边框圆角 // 引入Element Plus的SCSS文件 @import "element-plus/packages/theme-chalk/src/index.scss"; ```  在`vite.config.js`中配置： javascript 运行 ``` import { defineConfig } from 'vite' import Vue from '@vitejs/plugin-vue' export default defineConfig({ plugins: [Vue()], css: { preprocessorOptions: { scss: { additionalData: `@import "./src/assets/styles/element-variables.scss";` } } } }) ```  ### 3. 性能优化：减少不必要的组件渲染 - 避免在`v-for`中使用`ElTable`等复杂组件，如需循环渲染，可使用`v-memo`缓存； - 表单组件的`rules`尽量静态定义，避免动态生成导致频繁校验； - 弹窗组件使用`v-if`而非`v-show`，减少页面初始化时的 DOM 渲染压力。 ### 4. 兼容性处理：适配低版本浏览器 Element Plus 默认不支持 IE11，若需兼容，需添加以下配置： bash ``` # 安装polyfill依赖 npm install @babel/polyfill core-js@3 --save ```  在`main.js`中引入： javascript 运行 ``` import 'core-js/stable' import 'regenerator-runtime/runtime' ```  ## 四、常见问题与解决方案 ### 1. 组件样式不生效？ - 检查是否引入`element-plus/dist/index.css`全局样式； - 按需引入时，确保`unplugin-vue-components`和`unplugin-auto-import`配置正确； - 避免使用`scoped`样式覆盖组件样式，如需覆盖，可使用`::v-deep`或`:deep()`。 ### 2. 图标不显示？ - 检查是否安装`@element-plus/icons-vue`依赖； - 确认图标是否正确引入（按需引入需单独导入对应图标）； - 全局引入图标时，确保循环注册组件的代码正确。 ### 3. 表单校验不生效？ - 检查`prop`属性是否与表单字段名一致； - 校验规则的`trigger`属性是否正确（`blur`为失焦触发，`change`为值变化触发）； - 自定义校验规则中，`callback`必须调用（成功调用`callback()`，失败调用`callback(new Error('提示信息'))`）。 ### 4. 弹窗被父元素遮挡？ - 设置`append-to-body="true"`，将弹窗挂载到`body`下； - 调整弹窗的`z-index`属性，确保层级高于父元素。 ## 总结 Element Plus 作为 Vue3 生态的核心 UI 组件库，其优势在于 “组件丰富、文档详细、上手简单”，尤其适合快速开发中后台系统。本文通过 “环境配置→核心组件实战→进阶优化” 的流程，覆盖了开发中的高频场景，只要掌握这些技巧，就能高效完成 UI 开发。 在实际项目中，建议结合 Element Plus 的官方文档（[https://element-plus.org/zh-CN/](https://element-plus.org/zh-CN/ "https://element-plus.org/zh-CN/")）进行学习，文档中包含了所有组件的详细用法和示例。同时，根据项目需求灵活选择 “全局引入” 或 “按需引入”，兼顾开发效率和项目体积。 最后，祝大家使用 Element Plus 开发顺利！如果本文对你有帮助，欢迎点赞、收藏、转发～ 评论区可以分享你的使用经验或遇到的问题，一起交流学习！
