没用这个插件前：你在Vue3中写了50个组件，每个文件开头都要重复这堆代码：

import { ref, computed } from 'vue'
import { useRoute, useRouter } from 'vue-router'
import { useStorage } from '@vueuse/core'

这感觉就像每天上班要刷20次工卡——明明大家都知道你是谁，还非要走形式。更崩溃的是，一旦拼错API名称，浏览器直接报错xxx is not defined，调试起来像在玩“大家来找茬”。

unplugin-auto-import就是来解决这个痛点的。它能自动识别你用的API，像贴心的秘书一样帮你完成所有import操作。

简单介绍

1. 安装（拿Vite举例）

npm i -D unplugin-auto-import

2. 配置vite.config.ts

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    AutoImport({
      imports: [
        'vue',          // 自动导入vue核心API
        'vue-router',   // 自动导入路由相关
        '@vueuse/core'  // 自动导入工具库
      ],
    })
  ]
})

3. 直接开撸！

现在你的组件里可以这样写：

<script setup>
// 不需要任何import！
const count = ref(0)               // 自动来自vue
const router = useRouter()         // 自动来自vue-router
const darkMode = useStorage('dark')// 自动来自@vueuse/core
</script>

核心功能解析

类型支持“零丢失”

通过配置dts选项，自动生成auto-imports.d.ts类型声明文件，完美兼容TypeScript，VSCode的代码提示照样丝滑：

复制

// 自动生成的文件片段
declare global {
  const ref: typeof import('vue')['ref']
  const useRouter: typeof import('vue-router')['useRouter']
}

3预设包开箱即用

支持主流生态预设，一句配置搞定常见库：

AutoImport({
  presets: [
    'vue', 
    'vue-router',
    '@vueuse/core'
  ]
})

按需导入

对于不想全量导入的库，可以精细控制：

AutoImport({
  imports: [
    // 从lodash中只导入debounce和cloneDeep
    { from: 'lodash', imports: ['debounce', 'cloneDeep'] }
  ]
})

原理探索

1. AST语法树分析
   插件通过解析抽象语法树（AST），像侦探一样扫描代码中所有未声明的标识符，比如发现ref就标记为“需要从vue导入”。
2. 依赖关系映射
   内置的preset系统维护着常见库的API地图，比如知道useRouter属于vue-router，useStorage属于@vueuse/core。
3. 精准注入导入
   在代码编译阶段，自动在文件顶部插入正确的import语句。整个过程开发者完全无感。
4. 缓存优化机制
   通过缓存已分析过的文件，避免重复计算，即使万行级项目也能保持极快的热更新速度。

注意事项

1. 类型声明冲突

如果遇到TS报错Duplicate identifier，可能是多个自动导入配置冲突。可通过调整dts路径解决：

AutoImport({
  dts: './src/auto-imports.d.ts' // 指定到src目录
})

2. 全局变量误伤

某些全局API（如require）可能被误拦截，可通过ignore列表排除：

AutoImport({
  ignore: ['require', 'import']
})

3. 特殊命名处理

遇到名称冲突时，可用别名改写：

AutoImport({
  imports: [
    { from: 'vue', imports: ['ref', ['computed', 'vueComputed']] }
  ]
})
// 使用时就变成vueComputed()

性能实测对比

在包含200个Vue组件的中型项目中：

• 未使用插件：Webpack打包时间32秒，冷启动需要5.8秒
• 使用后：打包时间28秒（-12.5%），冷启动4.1秒（-29.3%）

内存占用方面，由于自动导入是编译时行为，运行时零开销，完全不用担心性能损耗。

unplugin-auto-import让我们从重复劳动中解放出来。赶紧给你的项目装上这个效率神器，体验“无import编码”的快乐，那叫一个舒服。