如何使用unplugin-vue-components自动导入组合式函数与node_modules？

unplugin-vue-components的定位是专门处理Vue组件的自动导入，即便你配置了extensions包含js，它也只会识别js文件中导出的Vue组件（比如通过defineComponent定义的组件），无法处理普通函数、工具类或第三方模块的自动导入。要实现Nuxt 3那样的通用自动导入体验，需要搭配同作者的unplugin-auto-import插件使用。

步骤1：安装依赖 #

执行以下命令安装插件：

npm install unplugin-auto-import -D
# 或 yarn add unplugin-auto-import -D
# 或 pnpm add unplugin-auto-import -D

步骤2：修改vite.config.js配置 #

更新配置文件，同时启用unplugin-vue-components和unplugin-auto-import：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import Components from 'unplugin-vue-components/vite'
import AutoImport from 'unplugin-auto-import/vite'

export default defineConfig({
  plugins: [
    vue(),
    Components({
      dirs: ['src/components'], // 建议缩小范围到组件目录，避免和auto-import重复处理
      extensions: ['vue']
    }),
    AutoImport({
      // 自动导入Vue相关API
      imports: [
        'vue',
        // 按需添加其他第三方库，比如axios
        {
          axios: [
            ['default', 'axios'], // 导入默认导出为axios
            'get', 'post' // 按需导入常用方法
          ]
        }
      ],
      // 自动导入本地目录下的模块（比如composables、utils）
      dirs: [
        'src/composables',
        'src/utils' // 可根据需要添加更多目录
      ],
      // 生成类型声明文件，用于编辑器智能提示
      dts: true,
      // 可选：自动生成.eslintrc-auto-import.json，解决ESLint未定义变量报错
      eslintrc: {
        enabled: true
      }
    })
  ],
})

关键配置说明 #

1. 第三方模块自动导入：在imports数组中添加对应库的配置，比如axios示例中，既导入默认导出，又按需导入常用方法，使用时无需手动import axios from 'axios'即可直接调用axios.get()或get()。
2. 本地JS文件自动导入：通过dirs指定你的composables、utils等目录，插件会自动扫描这些目录下的所有js/ts文件，导出的内容可直接在组件中使用（比如store.js中的useStore函数，无需import即可调用）。
3. 类型提示与ESLint兼容：开启dts: true会在项目根目录生成auto-imports.d.ts，编辑器会自动识别提供智能提示；开启eslintrc.enabled会生成ESLint配置文件，解决未定义变量的报错问题（需在.eslintrc.js中引入该文件）。

注意事项 #

• 建议将unplugin-vue-components的dirs限定为src/components等专门存放Vue组件的目录，避免和unplugin-auto-import的扫描范围重复，提升性能。
• 如果使用TypeScript，需确保tsconfig.json的include数组包含auto-imports.d.ts：

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

内容的提问来源于stack exchange，提问作者Artur Müller Romanov