写页面时别再把 Element Plus 整个搬进来啦！Vue3按需加载的坑我帮你踩平了

你是不是也遇到过这种糟心事------项目刚跑起来，npm run build一看，好家伙，打包后的 js 文件直奔好几兆，首屏加载白屏时间够你喝完一杯咖啡 ☕️。

之前写页面时，使用了 Element Plus 全量引入，结果光一个 element-plus 的 css 就几百 KB。这就好比去超市买个酱油，结果把整个超市搬回家------真没必要。

🎯 先搞清楚：为什么你的 Element Plus 这么重

很多教程一上来就让在 main.js 里写 import ElementPlus from 'element-plus' 然后 app.use(ElementPlus) 。

这招简单粗暴，但等于把 100 多个组件全注册了，哪怕你只用了一个按钮。

官方其实早就给了按需加载的方案，只是配置起来踩坑无数。今天我就用自己反复掉坑再爬出来的经验，把最稳妥、最省心的自动按需导入方式给你盘清楚。

🧰 环境准备 & 编辑器配置

先保证 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-icon><Edit /></el-icon> 使用。好在图标组件本身很小，手动引入反而更清晰。

官方给出的示例里是在 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 坑得夜不能寐，赶紧照着改一改，打包速度直接起飞。

觉得有用的话，别藏着掖着，点赞收藏加关注走起，顺便转发给那个还在手动 import 组件的冤种同事，拯救他的下班时间。毕竟，程序员们的快乐，就是看 bundle 体积一点点缩水 🤓。