很多教程一上来就让在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-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 源码级修改，不过这就进阶了，咱们改天细聊。
)
