項(xiàng)目環(huán)境

vue3+ts+vite

特點(diǎn)

使用后可以不手動(dòng)引入ref reactive onMounted這些api

最簡(jiǎn)單使用

npm i unplugin-auto-import -D

npm i unplugin-vue-components -D

import AutoImport from 'unplugin-auto-import/vite';
import { ElementPlusResolver } from "unplugin-vue-components/resolvers";

export default defineConfig({
  plugins: [
    // ...
    AutoImport({
      resolvers: [ElementPlusResolver()],
    }), 
  ],
})

AutoImport參數(shù)類型

interface Options {
    /**
     * Preset names or custom imports map
     *
     * @default []
     */
    imports?: Arrayable<ImportsMap | PresetName | InlinePreset>;
    /**
     * Identifiers to be ignored
     */
    ignore?: (string | RegExp)[];
    /**
     * Inject the imports at the end of other imports
     *
     * @default true
     */
    injectAtEnd?: boolean;
    /**
     * Path for directories to be auto imported
     */
    dirs?: string[];
    /**
     * 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;
    /**
     * Cache the result of resolving, across multiple vite builds.
     *
     * A custom path is supported.
     * When set to `true`, the cache will be stored in `node_modules/.cache/unplugin-auto-import.json`.
     *
     * @default false
     */
    cache?: string | boolean;
    /**
     * Auto import inside Vue templates
     *
     * @see https://github.com/unjs/unimport/pull/15
     * @see https://github.com/unjs/unimport/pull/72
     * @default false
     */
    vueTemplate?: boolean;
    /**
     * Set default export alias by file name
     *
     * @default false
     */
    defaultExportByFilename?: boolean;
    /**
     * Rules to include transforming target.
     *
     * @default [/\.[jt]sx?$/, /\.vue\??/]
     */
    include?: FilterPattern;
    /**
     * Rules to exclude transforming target.
     *
     * @default [/node_modules/, /\.git/]
     */
    exclude?: FilterPattern;
    /**
     * Generate corresponding .eslintrc-auto-import.json file.
     */
    eslintrc?: ESLintrc;
}

開(kāi)始配置

 AutoImport({
      dts: true, // 會(huì)在根目錄生成auto-imports.d.ts桑涎，里面可以看到自動(dòng)導(dǎo)入的api
      include: [/\.[tj]sx?$/, /\.vue$/], // 匹配的文件萧诫，也就是哪些后綴的文件需要自動(dòng)引入
      imports: [ // 自動(dòng)引入的api從這里找
        'vue',
        'vue-router',
        // 詳細(xì)配置
        {
          '@vueuse/core': [
            // named imports
            'useMouse', // import { useMouse } from '@vueuse/core',
            // alias
            ['useFetch', 'useMyFetch'] // import { useFetch as useMyFetch } from '@vueuse/core',
          ],
          axios: [
            // default imports
            ['default', 'axios'] // import { default as axios } from 'axios',
          ]
        }
      ],
      // 解析器配置
      resolvers: [], // 第三方ui
      // 根據(jù)項(xiàng)目情況配置eslintrc累驮，默認(rèn)是不開(kāi)啟的
      eslintrc: {
        enabled: true // @default false
        // 下面兩個(gè)是其他配置扛伍，默認(rèn)即可
        // 輸出一份json文件元媚，默認(rèn)輸出路徑為./.eslintrc-auto-import.json
        // filepath: './.eslintrc-auto-import.json', // @default './.eslintrc-auto-import.json'
        // globalsPropValue: true, // @default true 可設(shè)置 boolean | 'readonly' | 'readable' | 'writable' | 'writeable'
      }
    })

因?yàn)闀?huì)輸出一個(gè)auto-imports.d.ts
他的作用就是解決ts找不到變量的報(bào)錯(cuò)

image.png

假如出現(xiàn)報(bào)錯(cuò)阅羹，可能是因?yàn)閠s沒(méi)識(shí)別到這份文件

image.png

你可以在tsconfig.json進(jìn)行如下配置
把他添加進(jìn)include

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

eslint配置

{
  "extends": [
   "other..."
 ++".eslintrc-auto-import.json"
  ]
}

驗(yàn)證結(jié)果

發(fā)現(xiàn)不報(bào)錯(cuò)为居，項(xiàng)目也能運(yùn)行

image.png