在 Vue3 中后台开发领域，Element Plus 是当之无愧的主流 UI 组件库。它基于 Vue3 重构、完整支持 TypeScript、组件丰富、文档完善，几乎覆盖后台系统 99% 的业务场景。

很多开发者只会简单调用组件基础用法，却忽略了按需引入、样式优化、类型约束、组件封装、主题定制等企业级核心技巧，导致项目体积臃肿、代码冗余、样式不统一、bug 频发。

今天这篇高质量实战博客，结合 Vue3 + Vite + TS 技术栈，从零梳理 Element Plus 完整落地方案，包含配置避坑、高频组件最佳实践、性能优化、二次封装，完全适配企业项目规范，看完直接对标职场进阶写法。

一、前言：为什么企业项目首选 Element Plus？

对比其他 UI 库，Element Plus 的核心优势完全贴合中后台开发场景：

• 原生支持 TS：所有组件自带完整类型定义，搭配 TS 实现强类型约束，减少类型报错

• Vue3 专属重构：摒弃 Element UI 的 Vue2 冗余逻辑，适配组合式 API，性能更优

• 组件全覆盖：表单、表格、弹窗、权限、菜单、树形结构等中后台核心组件一应俱全

• 可定制性极强：支持全局主题、局部样式、变量覆盖，适配项目自定义 UI 规范

• 生态成熟稳定：社区活跃、迭代稳定，踩坑方案丰富，适配各类后台管理系统

二、企业级初始化配置（Vite+TS 最优方案）

很多新手直接全局完整引入，简单但会造成打包体积过大、首屏加载慢。企业项目唯一推荐：自动按需引入组件+样式，零手动导入、零冗余代码。

1. 安装依赖

核心依赖：element-plus + 自动导入插件

# 安装组件库 npm install element-plus # 安装自动按需引入插件（开发依赖） npm install -D unplugin-vue-components unplugin-auto-import

2. Vite 核心配置（关键避坑）

修改 vite.config.ts，配置自动导入，实现组件、API、样式全自动按需加载，无需手动 import。

import { defineConfig } from 'vite' import vue from '@vitejs/plugin-vue' // 自动导入插件 import AutoImport from 'unplugin-auto-import/vite' import Components from 'unplugin-vue-components/vite' // Element Plus 解析器 import { ElementPlusResolver } from 'unplugin-vue-components/resolvers' export default defineConfig({ plugins: [ vue(), // 自动导入 vue、element-plus 相关 API AutoImport({ resolvers: [ElementPlusResolver()], // 生成自动导入类型声明文件，适配 TS dts: 'src/auto-imports.d.ts' }), // 自动注册组件 Components({ resolvers: [ ElementPlusResolver({ // 关键：开启样式按需引入，避免全局样式冗余 importStyle: 'sass' }) ], dts: 'src/components.d.ts' }) ] })

3. TS 类型适配

配置完成后重启项目，插件会自动生成类型声明文件，TS 可正常识别所有 Element 组件及 API，无类型报错、代码提示完整。

核心优势：页面中直接使用 <el-button>、ElMessage，无需任何导入语句，极致精简代码。

三、主题定制（企业项目统一 UI 规范）

默认主题无法满足项目 UI 需求，企业项目必须统一主题色、圆角、边框、字体大小，通过 SCSS 变量全局覆盖，无侵入修改样式。

1. 创建主题变量文件

新建 src/styles/element-vars.scss，自定义全局样式变量

// 覆盖 Element Plus 全局主题变量 @forward 'element-plus/theme-chalk/src/common/var.scss' with ( $colors: ( primary: (base: #1890ff), // 主题主色 success: (base: #52c41a), // 成功色 warning: (base: #faad14), // 警告色 danger: (base: #f5222d) // 危险色 ), $border-radius-base: 4px, // 全局圆角 $font-size-base: 14px // 全局字体 );

2. 全局引入生效

在 main.ts 引入自定义主题文件，覆盖默认样式

import './styles/element-vars.scss'

配置后全局所有 Element 组件自动适配自定义主题，统一项目 UI 风格。

四、五大高频核心组件企业级最佳实践

Element Plus 组件繁多，中后台 90% 业务只依赖 5 类核心组件。下面结合 TS+组合式API，分享可直接落地、规避坑点的实战写法。

1. 表单组件 ElForm（强类型校验）

表单是后台最常用组件，核心难点：TS 类型绑定、自定义校验、规则复用、重置表单。摒弃零散写法，采用接口约束表单数据。

<template> <el-form :model="formData" :rules="formRules" ref="formRef" label-width="100px" > <el-form-item label="账号" prop="username"> <el-input v-model="formData.username" placeholder="请输入账号" /> </el-form-item> <el-form-item label="密码" prop="password"> <el-input v-model="formData.password" type="password" placeholder="请输入密码" /> </el-form-item> <el-form-item> <el-button type="primary" @click="submitForm">提交</el-button> <el-button @click="resetForm">重置</el-button> </el-form-item> </el-form> </template> <script setup lang="ts"> import { ref, reactive } from 'vue' import type { FormInstance, FormRules } from 'element-plus' // TS 表单类型约束 interface LoginForm { username: string password: string } // 表单实例 const formRef = ref<FormInstance>() // 表单数据 const formData = reactive<LoginForm>({ username: '', password: '' }) // 强类型校验规则 const formRules: FormRules = reactive({ username: [{ required: true, message: '请输入账号', trigger: 'blur' }], password: [{ required: true, message: '请输入密码', trigger: 'blur', min: 6 }] }) // 提交表单 const submitForm = async () => { await formRef.value?.validate() ElMessage.success('校验通过，提交成功') } // 重置表单 const resetForm = () => { formRef.value?.resetFields() } </script>

核心避坑：必须给 formRef 定义 FormInstance 类型，否则 TS 会报类型错误；校验规则统一用 reactive 保证响应式。

2. 表格组件 ElTable（分页+多选+状态渲染）

表格是后台数据展示核心，企业必备功能：TS 行类型约束、分页封装、多选、状态标签渲染、空数据兜底。

<template> <el-table :data="tableList" border stripe style="width: 100%" > <el-table-column type="selection" width="55" /> <el-table-column prop="id" label="ID" width="80" /> <el-table-column prop="name" label="用户名" /> <el-table-column prop="status" label="状态"> <template #default="{ row }"> <el-tag :type="row.status ? 'success' : 'danger'"> {{ row.status ? '正常' : '禁用' }} </el-tag> </template> </el-table-column> </el-table> <el-pagination v-model:current-page="page.pageNum" v-model:page-size="page.pageSize" :total="page.total" layout="total, sizes, prev, pager, next, jumper" /> </template> <script setup lang="ts"> import { ref } from 'vue' // 表格行 TS 类型 interface TableRow { id: number name: string status: number } // 表格数据 const tableList = ref<TableRow[]>([]) // 分页参数统一封装 const page = ref({ pageNum: 1, pageSize: 10, total: 0 }) </script>

3. 弹窗 ElDialog（关闭重置+防抖）

弹窗高频坑点：关闭弹窗不重置表单、重复点击弹窗、样式错位，企业级标准写法如下：

<template> <el-dialog v-model="dialogVisible" title="新增用户" destroy-on-close> <el-form :model="formData" label-width="100px"> <el-form-item label="用户名" prop="name"> <el-input v-model="formData.name" /> </el-form-item> </el-form> <template #footer> <el-button @click="dialogVisible = false">取消</el-button> <el-button type="primary" @click="submit">确定</el-button> </template> </el-dialog> </template> <script setup lang="ts"> import { ref, reactive } from 'vue' const dialogVisible = ref(false) const formData = reactive({ name: '' }) // 关闭弹窗重置数据 const closeDialog = () => { formData.name = '' } // 弹窗关闭事件 const submit = () => { ElMessage.success('操作成功') dialogVisible.value = false } </script>

关键优化：添加 destroy-on-close 关闭销毁组件，彻底解决表单残留数据问题。

4. 消息提示 ElMessage / ElMessageBox

全局消息提示无需手动导入，自动导入直接使用，统一封装提示样式，避免全局样式混乱：

// 成功提示 ElMessage.success('操作成功') // 错误提示 ElMessage.error('操作失败') // 确认弹窗 await ElMessageBox.confirm('确定删除该数据？', '提示', { confirmButtonText: '确定', cancelButtonText: '取消', type: 'warning' })

5. 布局组件（页面骨架必备）

后台页面骨架全部依赖布局组件，适配自适应，无需手写 CSS：

<el-container style="height: 100vh"> <el-aside width="200px">侧边栏</el-aside> <el-container> <el-header height="60px">顶部导航</el-header> <el-main>主内容区</el-main> </el-container> </el-container>

五、企业级性能优化方案

解决 Element Plus 项目打包大、卡顿、样式冗余问题，三个核心优化点：

1. 彻底杜绝全局引入

禁止在 main.ts 写入 app.use(ElementPlus)，自动按需引入可减少 60%+ 打包体积。

2. 图标按需引入

Element Plus 图标默认全量加载，项目庞大时严重拖慢速度，统一采用按需引入图标。

3. 表格大数据优化

千条以上数据表格开启虚拟滚动，添加 virtual 属性，避免 DOM 渲染过多导致页面卡顿。

六、高阶实战：通用组件二次封装

企业项目不直接裸写 Element 组件，通过二次封装统一参数、简化代码、规范样式，以常用搜索表单为例：

封装通用搜索组件，统一处理布局、校验、样式，页面直接复用，代码量减少 50%。

封装核心思想：继承原生组件所有属性，透传事件，统一默认参数，自定义业务属性。

七、高频踩坑总结（全网最全）

• 样式不生效：未开启 importStyle: 'sass'，样式未按需加载

• 表单重置失效：未绑定 ref、未使用 destroy-on-close

• TS 类型报错：表单、弹窗实例未定义官方类型FormInstance

• 打包体积过大：全局引入组件、图标未按需加载

• 弹窗嵌套样式错乱：避免多层弹窗嵌套，统一使用全局弹窗

八、文末总结

Element Plus 的学习核心不在于会用组件，而在于用规范、懂优化、会封装。

本篇博客覆盖了企业项目全套落地流程：按需配置→主题定制→TS类型约束→高频组件实战→性能优化→踩坑避坑，完全适配 Vue3+TS 中后台项目开发规范。

掌握这套写法，彻底告别新手式裸写组件，代码更严谨、项目更稳定、打包体积更小巧，完美适配企业级开发需求。