unplugin-auto-import/vite的使用

项目背景

vue3+ts+eslint+vite

好处

使用后可以不手动引入ref reactive 这些玩意

最简单使用

这种一般是第三方库给你配好了

我们用他们的resolver即可

比如说elemen-plus的

import AutoImport from 'unplugin-auto-import/vite';
export default defineConfig({
  plugins: [
    // your other plugins
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }), 
  ],
})

配置项

贴出配置项，一眼过即可，非必要阅读
来源：ctrl + 点击AutoImport即可进入ts文件查看详情

  /**
     * @default false
     */
    enabled?: boolean;
    /**
     * Filepath to save the generated eslint config
     *
     * @default './.eslintrc-auto-import.json'
     */
    filepath?: string;
    /**
     * @default true
     */
    globalsPropValue?: ESLintGlobalsPropValue;
}
interface Options {
    /**
     * Preset names or custom imports map
     *
     * @default []
     */
    imports?: Arrayable<ImportsMap | PresetName>;
    /**
     * Identifiers to be ignored
     */
    ignore?: (string | RegExp)[];
    /**
     * Pass a custom function to resolve the component importing path from the component name.
     *
     * The component names are always in PascalCase
     */
    resolvers?: Arrayable<Arrayable<Resolver>>;
    /**
     * Filepath to generate corresponding .d.ts file.
     * Default enabled when `typescript` is installed locally.
     * Set `false` to disable.
     *
     * @default './auto-imports.d.ts'
     */
    dts?: string | boolean;
    /**
     * Allow overriding imports sources from multiple presets.
     *
     * @default false
     */
    presetOverriding?: boolean;
    /**
     * Rules to include transforming target.
     *
     * @default [/\.[jt]sx?$/, /\.vue\??/]
     */
    include?: FilterPattern;
    /**
     * Rules to exclude transforming target.
     *
     * @default [/node_modules/, /\.git/]
     */
    exclude?: FilterPattern;
    /**
     * Generate source map.
     *
     * @default false
     */
    sourceMap?: boolean;
    /**
     * Generate corresponding .eslintrc-auto-import.json file.
     */
    eslintrc?: ESLintrc;

开始配置

AutoImport({
      // 会在根目录生成auto-imports.d.ts，里面可以看到自动导入的api
      dts: true,
      // 匹配的文件，也就是哪些后缀的文件需要自动引入
      include: [/\.[tj]sx?$/,  /\.vue$/, ],
      // 自动引入的api从这里找
      imports: ['vue', 'vue-router'],
      // 解析器配置
      resolvers: [
        ElementPlusResolver(), // 自动导入Element-Plus的Api
      ],
      // 根据项目情况配置eslintrc，默认是不开启的
      eslintrc: {
        enabled: true, // @default false
        // 下面两个是其他配置，默认即可
        // 输出一份json文件，默认输出路径为./.eslintrc-auto-import.json
        // filepath: './.eslintrc-auto-import.json', // @default './.eslintrc-auto-import.json'
        // globalsPropValue: true, // @default true 可设置 boolean | 'readonly' | 'readable' | 'writable' | 'writeable'
      },
 }),

因为会输出一个auto-imports.d.ts
他的作用就是解决ts找不到变量的报错

image.png

假如出现报错，可能是因为ts没识别到这份文件

image.png

你可以在tsconfig.json进行如下配置
把他添加进include

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

验证结果

发现不报错，项目也能运行

image.png