前端依赖自动导入：unplugin-auto-import

unplugin-auto-import 是一个 Vite/Webpack/Rollup 插件，用于自动导入 API，无需手动编写 import 语句。支持 Vue、Vue Router、Pinia 等库，以及自定义工具函数。

安装

npm install -D unplugin-auto-import

使用案例

AutoImport 管 API、Components 管组件

<span>//vite.config.js</span>
<span>AutoImport</span>({  <span>//用于 API 导入</span>
  <span>imports</span>: [<span>'vue'</span>, <span>'vue-router'</span>, { <span>'@vueuse/core'</span>: [<span>'useMouse'</span>, [<span>'useFetch'</span>, <span>'useMyFetch'</span>]] }],
  <span>resolvers</span>: [<span>ElementPlusResolver</span>()],
  <span>dirs</span>: [<span>'./src/utils/format.js'</span>,<span>'./hooks'</span>, <span>'./composables/**'</span>],
}),
<span>Components</span>({  <span>// 用于组件导入</span>
  <span>resolvers</span>: [<span>ElementPlusResolver</span>()]，
  <span>dirs</span>:[<span>'./components/**'</span>]
})

AutoImport 代码详解

1. imports

imports —— 声明 "从哪个包自动导入哪些导出"

imports: ['vue'] :'vue'是内置预设（preset），一个字符串代表一整组导出。这里的vue实际展开是ref、computed、watch、onMounted、nextTick 等 Vue 组合式 API内置预设本质上是预先生成好的 { from: '包名', imports: [...] } 配置 例如：

<span>export</span> <span>default</span> <span>defineUnimportPreset</span>({
  <span>from</span>: <span>'vue'</span>,
  <span>imports</span>: [<span>'onMounted'</span>, <span>'onUnmounted'</span>, <span>'onUpdated'</span>],
})

imports: [{ '@vueuse/core': ['useMouse', ['useFetch', 'useMyFetch']] }]: 这是 imports 的导入指定的 API的方法,'useMouse' 相当于 import { useMouse } from '@vueuse/core'``['useFetch', 'useMyFetch'] 相当于 import { useFetch as useMyFetch } from '@vueuse/core'合起来就是import { useMouse,useFetch as useMyFetch } from '@vueuse/core'

2. resolvers

resolvers —— 给插件一个 "遇到未知标识符时的解析函数"imports 是预声明列表，resolvers 是按需判断：插件在转换时遇到一个没见过的标识符（如 ElMessage），就把名字丢给 resolver，resolver 返回 "该从哪个模块引入"。

ElementPlusResolver 专门匹配 El 开头的函数式 API：ElMessage、ElNotification、ElMessageBox、ElLoading，并且返回 element-plus 的按需子路径（如 element-plus/es 下的对应模块），保证只打包用到的部分。

ElementPlusResolver 其实不 "认识"ElMessage，它靠的是规则匹配—— 插件把所有 "用到了却没定义的标识符" 都丢给它的 resolve(name) 函数，它用几道规则过滤，命中的才返回导入信息。

如果你自己写个组件叫 ElFooBar，也会被它当成 element-plus 的组件导入，需要使用exclude来进行排除

<span>Components</span>({
  <span>resolvers</span>: [
    <span>ElementPlusResolver</span>({
      <span>exclude</span>: <span>/^ElFooBar$/</span>,                        <span>// 排除一个</span>
      <span>// exclude: /^(ElFooBar|ElMyComp)$/,          // 排除多个</span>
      <span>// exclude: /^El(?!Message|Button)/,          // 排除除 Message/Button 外的所有 El*（复杂规则）</span>
    }),
  ],
})

3. dirs

dirs —— 扫描你自己的目录，把 "文件" 变成可自动导入的模块

dirs: ['./hooks', './composables/**']``./hooks：只扫描该目录第一层，下面每个 .ts/.js 文件的导出自动注册； ./composables/**：glob 通配，递归所有子目录。

比如你建一个 hooks/useTheme.ts 并 export function useTheme()，那么任何组件里直接 useTheme() 即可，插件会自动补上对应的 import——新增文件无需改任何配置。

4. vueTemplate

vueTemplate: true：在模板中也能使用自动导入的函数

<span><<span>template</span>></span>
  <span><!-- 直接使用不需要导入 --></span>
  <span><<span>div</span>></span>{{ sum(num) }}<span></<span>div</span>></span>
<span></<span>template</span>></span>

5. exclude

匹配到的文件不参与自动导入

<span>AutoImport</span>({
  <span>exclude</span>: [
    <span>/[\\/]node_modules[\\/]/</span>,
    <span>/[\\/]\.git[\\/]/</span>,
    <span>/src\/legacy\//</span>,        <span>// 排除旧代码目录</span>
    <span>/\.spec\.ts$/</span>,          <span>// 排除测试文件</span>
    <span>/\.d\.ts$/</span>,             <span>// 排除类型声明文件</span>
  ],
})

Components 代码详解

Components用法基本与imports相同，但是Components无法使用imports导入

<span>AutoImport</span>({  <span>//用于 API 导入</span>
  <span>resolvers</span>: [<span>ElementPlusResolver</span>()]
}),
<span>Components</span>({  <span>// 用于组件导入</span>
  <span>resolvers</span>: [<span>ElementPlusResolver</span>()]
})

AutoImport和Components里面的的ElementPlusResolver是同一个东西 —— 传给 Components 时处理 <el-xxx> 组件，传给 AutoImport 时处理 ElMessage 这类 API