模块自动导入

作者：xie392地址：https://v.douyin.com/ie9tukge/更新时间：2024-12-23

介绍

unplugin-auto-import是为 Vite、Webpack、Rollup 和 esbuild 按需自动导入 API。支持 TypeScript。

安装

1
pnpm add -D unplugin-auto-import

使用

vite.config.ts

1
import { defineConfig } from 'vite'
2
import vue from '@vitejs/plugin-vue'
3
import AutoImport from 'unplugin-auto-import/vite'
4


5
export default defineConfig({
6
  plugins: [
7
    vue(),
8
    unpluginAutoImport(),
9
    AutoImport({
10
      imports: ['vue','vue-router'], // 自动导入vue和vue-router
11
      dts: true,                     // 是否生成 .d.ts
12
      dirs: ['src/composables'],     // 指定组件自动导入的目录
13
      // eslintrc 中 enabled 设置为 true，保存之后会随即在跟目录下生成 .eslintrc-auto-import.json 文件。
14
      eslintrc: {
15
        enabled: true,              // 是否使用 .eslintrc-auto-import.json
16
      }
17
    })
18
  ],
19
})

如果有使用 eslintrc 选项,需要在 eslintrc-auto-import.json 中设置 enabled: true。会自动生成 .eslintrc-auto-import.json 文件，然后将这个文件引入 .eslintrc.cjs

1
{
2
  "extends": "./.eslintrc-auto-import.json"
3
}