vite创建的react项目使用unplugin-auto-import插件 自动引入api

作用：使用后可以不手动引入useState，useEffect这些api。

1、引入unplugin-auto-import插件

npm：npm i unplugin-auto-import -D
yarn: yarn add unplugin-auto-import -D

2、在项目中的vite.config.ts引入并配置

在vite.config.ts中引入unplugin-auto-import/vite插件
import AutoImport from 'unplugin-auto-import/vite'

//在plugins中配置
plugins:[
AutoImport({
      eslintrc:{
         enabled:true,        
      },        
    })
  ]

配置之后，运行一下项目，此处一定需要重新启动一下项目。
重启项目之后，会生成一个.eslintrc-auto-import.json文件。
此时将这个文件重新配置在json中。

  AutoImport({
        eslintrc:{
          enabled:true,
          filepath:'./.eslintrc-auto-import.json' //此文件为重新启动项目生成的文件
        },
        dts:'./auto-imports.d.ts',//此文件配置保存后系统自动生成
        imports:['react', 'react-router'] //此处可填写需要自动引入的库
      })

3、在tsconfig.json中配置解决typescritp 报错的问题

  "include": [
    "src",
    "./auto-imports.d.ts"//此处引入系统自动生成的文件
  ],

注意：声明文件引用位置在 include 下面说明

4、在.eslintrc.ts中配置解决提示报错的问题

extend:[
....//其他配置
'./.eslintrc-auto-import.json' //加入该配置
]