element-plus自动导入插件

在写typescript项目的过程中，使用element-plus的ui组件库开发的时候。通常需要导入组件和图标等等。如：

import { ElTable } from "element-plus";
import { OfficeBuilding, Phone, HomeFilled } from "@element-plus/icons-vue"

这样的手动导入就比较麻烦，那有没有自动导入的方法，，有的。下面为如何设置和配置自动导入，以及它和手动导入的区别在哪。

自动导入

1.插件概述

插件	主要作用	适用场景
unplugin-vue-components	自动导入项目中使用的 Vue 组件（包括第三方库和本地组件），生成类型声明文件	通用组件自动导入
unplugin-element-plus	专门优化 Element Plus 的自动导入，处理样式自动加载和组件解析（需配合前者使用）	针对 Element Plus 的深度集成

2.安装依赖

# 核心插件
npm install -D unplugin-vue-components unplugin-auto-import unplugin-icons# Element Plus 图标库
npm install @element-plus/icons-vue --save# 可选：Element Plus 样式自动导入插件
npm install -D unplugin-element-plus

3.配置vite

在 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 Icons from 'unplugin-icons/vite';
import IconsResolver from 'unplugin-icons/resolver';export default defineConfig({plugins: [vue(),// 自动导入 Vue 相关函数（如 ref、reactive）AutoImport({imports: ['vue', 'vue-router'],resolvers: [// Element Plus 组件类型自动导入ElementPlusResolver(),// 图标自动导入（设置前缀为 'i'）IconsResolver({ prefix: 'i' })],dts: 'src/auto-imports.d.ts' // 生成类型声明文件}),// 自动注册组件Components({resolvers: [ElementPlusResolver({ importStyle: 'sass' }), // Element Plus 按需解析// 图标自动注册（启用 Element Plus 图标集）IconsResolver({enabledCollections: ['ep'],prefix: 'i' // 图标组件前缀（默认 'i'）})],extensions: ['vue'],dts: 'src/components.d.ts' // 生成组件类型声明文件dirs: ['src/components'], // 自动导入本地组件目录}),// 自动安装图标库Icons({autoInstall: true})]
});

关键配置解析 ：

1.Element Plus 解析器

• 样式控制：ElementPlusResolver({ importStyle: 'sass' }) 指定使用 Sass 源码（便于主题定制） 
   
• 组件匹配：插件会自动识别以 El 前缀开头的组件标签（如 <el-button>） 

2.本地组件管理

• 在 dirs 指定的目录下按需导入以 extensions 指定的后缀名的组件

4.修改Vite配置来实现目录排除和更精确的按需导入

import { defineConfig } from "vite";// ... 其他导入保持不变 ...export default defineConfig({plugins: [vue(),vueDevTools(),AutoImport({resolvers: [ElementPlusResolver({// 排除不需要自动导入的组件exclude: /^ElAutoResizer|ElTableV2/ // 示例：排除虚拟滚动组件})],// 指定需要自动导入的文件类型include: [/\.[tj]sx?$/, // .ts, .tsx, .js, .jsx/\.vue$/, /\.vue\?vue/ // .vue],// 排除测试目录和mock目录exclude: ['**/tests/**','**/mock/**','/**/node_modules/**']}),Components({resolvers: [ElementPlusResolver({// 按需导入样式配置importStyle: 'sass',// 排除不需要的组件目录directives: false // 示例：不自动导入指令})],// 排除第三方组件和指定目录dirs: ['src/components','!src/components/legacy' // 排除legacy目录],// 使用正则排除特定文件exclude: [/\.(test|spec)\.(ts|js)$/,/[\\/]node_modules[\\/]/,/[\\/]\.git[\\/]/,/[\\/]\.nuxt[\\/]/]})],// ... 其他配置保持不变 ...
});

1.AutoImport 配置优化： 

• exclude：排除测试目录、mock目录和node_modules
• include：明确指定处理的文件类型
• ElementPlusResolver 添加排除特定组件

2.Components 配置优化：

• dirs：使用 ! 语法排除指定子目录
• exclude：通过正则表达式排除测试文件和构建目录
• 禁用指令自动导入 (directives: false)

5. 调整图标使用方式

配置完成后，不再需要手动导入图标，直接在模板中使用以下格式：

<!-- 原写法（需要手动导入图标） -->
<el-icon><OfficeBuilding /></el-icon><!-- 新写法（自动导入，根据前缀和图标名） -->
<el-icon><i-ep-office-building /></el-icon>
<!-- 或简写 -->
<i-ep-office-building />

6. 类型声明文件（TypeScript 支持）

在 tsconfig.json 中包含自动生成的类型文件：

{"include": ["src/**/*.ts","src/**/*.d.ts","src/auto-imports.d.ts","src/components.d.ts"]
}

自动导入和手动导入有什么区别

核心差异对比

对比维度	自动导入	手动导入
导入方式	工具自动识别模板中的组件/图标，无需编写 import 语句	需手动编写 import { ElButton } from 'element-plus'
代码维护	减少冗余代码，避免遗漏导入导致的运行时错误	需频繁维护导入语句，容易遗漏或误删
开发效率	直接使用组件/图标，减少上下文切换，提升编码速度	需中断编码流程处理导入语句
类型支持	依赖插件生成 .d.ts 文件（需正确配置 TypeScript）	类型提示直接来自源码，无需额外配置
Tree Shaking	通过按需加载实现（需插件支持）	手动控制更精准，但需开发者自行优化
学习成本	需理解插件配置逻辑	无需额外学习，符合传统开发习惯
适用场景	现代 Vue3 项目、频繁使用 UI 库组件/图标	小型项目、自定义组件、特殊加载需求

技术实现对比

1. 自动导入原理

• 编译阶段：通过插件（如 unplugin-vue-components）扫描模板中的标签（如 <el-button>）。
• 代码生成：动态注入 import { ElButton } from 'element-plus' 到编译产物中。
• 类型支持：生成 components.d.ts 声明文件，为 TypeScript 提供类型提示。

2. 手动导入原理

• 显式引入：开发者明确指定依赖关系，如 import { ElButton } from 'element-plus'。
• 静态分析：打包工具（如 Webpack/Vite）通过静态分析实现 Tree Shaking。

场景对比 

1.自动导入场景

<!-- 直接使用组件和图标，无需手动导入 -->
<template><el-button><icon-ep-edit /> 编辑</el-button>
</template>

2.手动导入场景

<script setup>
import { ElButton } from 'element-plus'
import { Edit as EditIcon } from '@element-plus/icons-vue'
</script><template><el-button><el-icon><edit-icon /></el-icon> 编辑</el-button>
</template>