Vue API 、element-plus自动导入插件

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

复制代码

import { reactive, ref } from "vue";
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 的深度集成
unplugin-auto-import	自动导入 JavaScript/TypeScript 模块的工具，以及常用的 API（如 Vue 的 `ref`、`computed` 等）	大项目，导入比较多

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(),

    AutoImport({
      // 自动导入 Vue 3 、 Vue Router 的API，也可以导入其他的如pinia等等
      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>