为什么你的 Element Plus 这么重

更新时间：2026年07月03日 09:48:18 作者：忧伤的白云

很多教程一上来就让在里写 import ElementPlus from 'element-plus' 然后 app.use(ElementPlus),但等于把 100 多个组件全注册了,下面就来详细的介绍一下Element Plus优化,感兴趣的可以了解一下

🧰 环境准备 & 编辑器配置

先保证 Vue3 脚手架就位。我用 Vite，真心快。在终端敲：

pnpm create vue@latest

一路回车，项目秒建。然后打开 VS Code，这几个插件先装上，能省一半命：

👉 Vue - Official（原 Volar）：模板语法高亮、类型检查，没它写 Vue3 像近视没戴眼镜。

👉 ESLint + Prettier：代码风格统一，强迫症福音。

👉 Element Plus Snippets：敲几个字母就出组件代码块，懒人必备。

这里可别偷懒，插件装完就不管了。记得在项目根目录的 .vscode/settings.json 里配好格式化，不然同事的代码风格能让你血压飙升。

干脆把我的自用配置贴出来，直接复制就能用。前提是你项目里已经装了 ESLint 和 Prettier 依赖（比如 eslint、prettier、eslint-plugin-vue、@vue/eslint-config-prettier 这些），VS Code 也装了对应的插件。

{
  // 保存时自动格式化
  "editor.formatOnSave": true,
  // 默认用 Prettier 格式化
  "editor.defaultFormatter": "esbenp.prettier-vscode",
  // Vue 文件也交给 Prettier
  "[vue]": {
    "editor.defaultFormatter": "esbenp.prettier-vscode"
  },
  // ESLint 检查哪些文件
  "eslint.validate": [
    "javascript",
    "typescript",
    "vue"
  ],
  // 保存时自动修复 ESLint 报的错
  "editor.codeActionsOnSave": {
    "source.fixAll.eslint": "explicit"
  }
}

⚠️ 踩坑提醒：千万别同时开多个格式化器，我之前就是 Vetur 没禁掉，和 Prettier 打架，一保存代码格式反复横跳，差点砸键盘。

那行 "source.fixAll.eslint" 设成 "explicit" 比 true 稳，能避免偶发的保存卡死。另外如果发现 JS 文件没反应，记得把 "[javascript]" 也加上对应的默认格式化器。

🔥 重点来了：自动按需导入，告别手写 import

你可能会问：“我用 unplugin-element-plus 不就行了？” 是，但不全。最佳实践是三件套搭配使用，让组件、API、样式全自动按需加载。

先安装：

pnpm install -D element-plus unplugin-vue-components unplugin-auto-import unplugin-element-plus

然后在 vite.config.ts 里这样配：

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'
import ElementPlus from 'unplugin-element-plus/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }),
    Components({
      resolvers: [ElementPlusResolver()],
    }),
    ElementPlus({
      useSource: true, // 这行很关键，确保样式按需加载
    }),
  ],
})

配完这三者，你甚至不用在组件里写 import { ElButton } from 'element-plus' ，直接 <el-button> 就能用；API 如 ElMessage 也无需引入，直接调用，丝般顺滑。

官方文档虽然提到了 unplugin-vue-components ，但根据我踩坑经验，不加 unplugin-element-plus 的 useSource 选项，部分组件样式可能会丢失，尤其是动态创建的组件，比如 ElMessage 。

🛠️ 实战：搭一个表单页看看效果

咱们写个极简的登录表单，感受下组件直接用有多爽：

<template>
  <el-form :model="form" label-width="80px">
    <el-form-item label="用户名">
      <el-input v-model="form.username" />
    </el-form-item>
    <el-form-item label="密码">
      <el-input v-model="form.password" type="password" />
    </el-form-item>
    <el-form-item>
      <el-button type="primary" @click="submit">登录</el-button>
    </el-form-item>
  </el-form>
</template>
<script setup>
import { reactive } from 'vue'
// 注意：ElMessage 已经自动导入，直接调用即可
const form = reactive({ username: '', password: '' })
const submit = () => {
  ElMessage.success('提交成功！')
}
</script>

看看，没有一处 import Element Plus 的东西，全都自动按需加载。打包体积肉眼可见地降下来了。

⚠️ 再说个容易翻车的点：图标怎么用？

是不是以为图标跟以前一样直接用 <el-icon-edit /> ？别天真了。

Element Plus 从某个版本开始把图标库拆成了单独的 @element-plus/icons-vue 。自动导入插件并不会自动帮你导入图标组件，你需要手动从包里引入你需要的那几个图标：

同样，需要先安装：

pnpm install -D @element-plus/icons-vue

然后在组件中按需导入需要的图标：

import { Edit, Delete } from '@element-plus/icons-vue'

然后在模板里使用：

<el-button type="primary">
    <el-icon><Edit /></el-icon>编辑
</el-button>

效果长这样：

好在图标组件本身很小，手动引入反而更清晰。

官方给出的示例里是在 main.ts 里一次性注册所有图标，这个就看个人喜好了

import * as ElementPlusIconsVue from '@element-plus/icons-vue'
const app = createApp(App)
for (const [key, component] of Object.entries(ElementPlusIconsVue)) {
  app.component(key, component)
}

另一个坑是表单验证必填项忘记加 prop，很多人被卡住，千万记得 el-form-item 上写 prop="username" 。

💡 进阶思考：主题定制与 CSS 变量

Element Plus 基于 CSS 变量，改主题超级简单。你可以在全局样式里覆盖变量：

:root {
  --el-color-primary: #ff6b6b;
}

所有组件的主色调瞬间变红。如果项目需要深度定制，还可以配合 unplugin-element-plus 的 importStyle: 'sass' 选项，从 SCSS 源码级修改，不过这就进阶了，咱们改天细聊。

到此这篇关于为什么你的 Element Plus 这么重的文章就介绍到这了,更多相关Element Plus优化内容请搜索脚本之家以前的文章或继续浏览下面的相关文章希望大家以后多多支持脚本之家！

您可能感兴趣的文章:

Vue3+Element Plus进行图片加载优化全攻略

vue中循环表格数据出现数据联动现象(示例代码)
在Vue中循环生成表格数据时,可能会遇到数据联动的现象,即修改一个表格中的数据后,其他表格的数据也会跟着变化,这种现象通常是因为所有表格的数据引用了同一个对象或数组导致的,本文介绍vue中循环表格数据出现数据联动现象,感兴趣的朋友一起看看吧
2024-11-11
解读resetFields()不生效的原因
这篇文章主要介绍了解读resetFields()不生效的原因，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2023-04-04
vue项目中如何添加枚举
这篇文章主要介绍了vue项目中如何添加枚举，具有很好的参考价值，希望对大家有所帮助。如有错误或未考虑完全的地方，望不吝赐教
2022-09-09
Vue中Axios从远程/后台读取数据
今天小编就为大家分享一篇关于Vue中Axios从远程/后台读取数据，小编觉得内容挺不错的，现在分享给大家，具有很好的参考价值，需要的朋友一起跟随小编来看看吧
2019-01-01
在Vue3中实现虚拟列表的方法示例
文章主要介绍在 Vue3 中实现虚拟列表的方法,包括原理和代码实现,原理是只渲染可视区域内的列表项,通过设置子数据项高度、计算可视区域、渲染可视区域、滚动监听、设置缓冲列表项等提升性能,感兴趣的小伙伴跟着小编一起来看看吧
2025-01-01
vuex实现及简略解析(小结)
这篇文章主要介绍了vuex实现及简略解析(小结)，小编觉得挺不错的，现在分享给大家，也给大家做个参考。一起跟随小编过来看看吧
2019-03-03
微信小程序地图导航功能实现完整源代码附效果图（推荐）
这篇文章主要介绍了微信小程序地图导航功能实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学习吧
2019-04-04
vue实现表单单独移除一个字段验证
这篇文章主要为大家详细介绍了vue实现表单单独移除一个字段验证，文中示例代码介绍的非常详细，具有一定的参考价值，感兴趣的小伙伴们可以参考一下
2022-03-03
Nuxt pages下不同的页面对应layout下的页面布局操作
这篇文章主要介绍了Nuxt pages下不同的页面对应layout下的页面布局操作，具有很好的参考价值，希望对大家有所帮助。一起跟随小编过来看看吧
2020-11-11
ElementUI如何修改el-cascader的默认样式
ElementUI 是一套ui组件库，目前最新版本 react 和 vue 等主流框架都有支持。该库默认主题色是天蓝色，若用于项目开发，难免遇到要需求修改其默认样式的情况，这篇文章主要介绍了ElementUI如何修改el-cascader的默认样式,需要的朋友可以参考下
2023-12-12