基础使用

• 自动导入vue：unplugin-vue-components
• 自动导入第三方：unplugin-auto-import

Github

一个自动引入api的包，支持主流打包引擎，使用 unplugin-auto-import 可以自动导入api，不需要import。

安装

npm i -D unplugin-auto-import
# or
yarn add -D unplugin-auto-import

vite使用

默认情况下，插件自动引入了vue和vue-router，所有的顶层模块都可以直接使用

在vite.config.js中加入以下内容：

// vite.config.ts
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    AutoImport({ /* options */ }),
  ],
})

手动添加

AutoImport({
  imports: [
    // 引入axios
    'axios': [
      // default imports
      ['default', 'axios'], // import { default as axios } from 'axios',
    ],
    // 自定义格式
    '[package-name]': [
      '[import-names]',
      // alias
      ['[from]', '[alias]'],
    ],
  ]
})

自定义模块

AutoImport({
  // 设置需要自动扫描的目录
  // by default it only scan one level of modules under the directory
  dirs: [
    // './hooks',
    // './composables' // 默认
    // './composables/**', // 自定义哪些目录
    // ...
  ],
  // 使用了 dirs 指定目录后，通过dts可以配置对应的类型文件生成路径
  // 生成类型未见后，就能很好的进行类型提示了
  dts: './auto-imports.d.ts',
})