为什么要使用unplugin-auto-import插件？
使用vite编写vue3代码时，使用composition api函数、Vue Router、pinia状态管理等官方API需要在页面中显式引入。而使用unplugin-auto-import插件可以自动导入这些API，从而提高开发效率，同时使代码更加简洁易读。
如：
import { ref, reactive, Ref, defineComponent, ComponentPropsOptions } from 'vue'
import { createRouter, createWebHashHistory, RouteRecordRaw } from 'vue-router'
import { defineStore, createPinia } from "pinia"
安装插件
在项目中安装unplugin-auto-import插件
npm i unplugin-auto-import -D
引入插件
在vite.config.js文件中引入插件，并配置需要自动导入的插件和自定义导入的API：
import vue from '@vitejs/plugin-vue'
import { defineConfig } from 'vite'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
AutoImport({
imports: [
// 需要自动导入的插件，自定义导入的API
'vue',
'vue-router',
'pinia'
]
})
]
})
使用插件
配置完成后，运行代码时会自动在根目录下生成一个auto-import.d.ts的文件。需要将该文件放入tsconfig.json中，插件才会生效：
{
"include": [
"./auto-imports.d.ts"
]
}
注意：如果出现报错“Clearing cache and forcing full-reload to ensure TypeScript is compiled with updated config values”，需要终止进程并重新编译项目，插件才能生效。
通过使用unplugin-auto-import插件，我们可以轻松地优化vite开发vue3应用的开发效率和代码质量。