unplugin-auto-import是一个神奇的插件，哈哈，它Neng让咱自动导入API，再也不用手动写那些重复的import语句了说实话，挺爽的！

得安装这个插件，咱Ke以用npm、yarn或者pnpm，随你喜欢：

npm install -D unplugin-auto-import# 或yarn add -D unplugin-auto-import# 或pnpm add -D unplugin-auto-import Vite配置

在~vite.config.ts~中添加插件配置，这是核心步骤，你懂的：

import { defineConfig } from 'vite'import vue from '@vitejs/plugin-vue'import AutoImport from 'unplugin-auto-import/vite'export default defineConfig, AutoImport, ],}) 核心配置选项 . imports - 自动导入库的 API

作用： 指定要自动导入的库或包的 API。

AutoImport . dirs - 自动导入自定义目录

作用： 自动导入项目内部目录下的模块。

AutoImport TypeScript配置

在~tsconfig.json~的~include~中添加生成的声明文件，不然TypeScript会报错，害：

{ "include": } 使用效果

配置完成后可直接使用API而无需手动导入，是不是hen爽？：

<script setup>// 不需要 import，直接使用const count = refconst route = useRoute</script> 配置 自定义组件自动导入

搭配~unplugin-vue-components~插件实现组件自动导入，你Ke以这样Zuo：

import Components from 'unplugin-vue-components/vite'export default defineConfig, ],}) ESLint集成

若使用ESLint，需在~.eslintrc.js~中添加配置，不然会报no-undef错误，咱就是说这hen烦人：

module.exports = { extends: ,}

...

...

AutoImport// 你kan，这个dts配置多关键！👀 嗯，对了还有个事儿，虽然不直接相关，但说说也无妨，你有没有遇到过百度不收录你的网站？😂 不懂为啥，反正我遇到过... A: 或许是内容质量、关键词优化啥的没Zuo好吧... 😅 话说回来还是得回到正题...

...

通过以上配置，可实现Vue3项目API和组件的按需自动导入，大幅提升开发效率。 🎉 是不是hen方便？反正我是觉得挺爽的！ 😊 你要是也试试kan，哈哈，说不定你也会爱上它呢！