推荐按需自动引入Element Plus——兼顾开发效率与构建体积,需安装element-plus、@element-plus/icons-vue及unplugin-vue-components等插件,并在vite.config.ts中配置AutoImport和Components,再于main.ts全局注册图标。

Vue 3 项目初始化后引入 Element Plus,推荐按需自动引入方式——兼顾开发效率和构建体积,适合绝大多数新项目。不需要手动 import 每个组件,也不用担心漏引样式或图标。
确认环境与安装基础依赖
确保 Node ≥ 18、npm ≥ 9,且项目已通过 vite create 创建(Vue 3 + TypeScript 模板)。然后执行:
npm install element-plus --save-
npm install @element-plus/icons-vue --save(图标必需,否则<el-icon></el-icon>或icon="Edit"不生效) -
npm install -D unplugin-vue-components unplugin-auto-import(实现自动导入的核心插件)
配置 Vite 自动导入(vite.config.ts/js)
在 vite.config.ts 的 plugins 数组中加入:
-
AutoImport({ resolvers: [ElementPlusResolver()] })→ 自动导入组件 API(如ElMessage、useForm)和 Composition 函数 -
Components({ resolvers: [ElementPlusResolver()] })→ 自动注册模板中使用的组件(如<el-button></el-button>),无需components: { ElButton }
注意:要从 unplugin-vue-components/resolvers 导入 ElementPlusResolver,不是手写路径或拼错名。
审查 Vue 管理后台的变更请求(Vue 2 + Element UI,Vue 3 + Element Plus)。重点关注最小化变更实现、上线风险检查以及回归检查清单生成。
立即学习“前端免费学习笔记(深入)”;
全局注册图标(main.ts 中)
Element Plus 图标不随组件自动注册,需显式处理:
- 导入所有图标:
import * as ElementPlusIconsVue from '@element-plus/icons-vue' - 遍历注册:
for (const [key, component] of Object.entries(ElementPlusIconsVue)) { app.component(key, component) }
这样就能直接在模板里写 <el-icon><search></search></el-icon> 或 <el-button icon="Edit">编辑</el-button>。
可选:中文语言与主题微调
如果项目面向中文用户,可在 app.use(ElementPlus, { locale: zhCn }) 中传入语言包;如需定制主题色,建议后续通过 SCSS 变量覆盖,而非修改 CSS 文件。

















