vue3+vite使用unplugin-auto-import和unplugin-vue-components提升开发效率

前引

unplugin-auto-import 和 unplugin-vue-components 是两个非常实用的 Vite 插件（同时也支持 Webpack），它们可以帮助开发者简化日常开发工作，提高开发效率。下面详细介绍这两个插件各自的功能及其协同作用：

unplugin-auto-import
unplugin-auto-import 是一个用于自动导入 Vue 和其他库中常用函数和符号的插件。它的主要功能包括：

自动导入：自动导入 Vue 组件和库中的函数、组合式 API、Reactivity API 等。例如，它可以自动导入 ref, computed, onMounted 等常用的 Vue 函数。
类型定义：生成类型定义文件（通常是 auto-imports.d.ts），用于 TypeScript 项目中，提供更好的类型支持和代码补全。
按需加载：只导入实际使用到的函数或符号，减少最终打包体积。

unplugin-vue-components
unplugin-vue-components 是一个用于按需加载和自动导入 Vue 组件的插件。它的主要功能包括：

按需加载：自动按需加载第三方组件库中的组件，如 Element Plus、Ant Design Vue 等。这意味着您可以在项目中只导入实际使用的组件，而不是整个库，从而减小应用的体积。
自动导入：自动导入您在项目中使用的组件。例如，如果您使用了 ElementPlus 库中的 ElButton 组件，插件会自动为您导入该组件，无需在每个使用组件的地方手动导入。

总结
unplugin-auto-import 和 unplugin-vue-components 通过自动导入和按需加载功能，极大地简化了开发过程，减少了手动编写导入语句的工作量，同时也优化了应用程序的打包体积。对于使用 TypeScript 开发的项目，这两种插件还可以生成类型定义文件，增强代码的可读性和可维护性。

话不多说，开始进入主题

一、首先下载unplugin-auto-import和unplugin-vue-components两组第三方库

npm i unplugin-auto-import
npm i unplugin-vue-components

二、接下来我们在vite.config.ts和tsconfig.app.json文件中进行配置

3.1、配置vite.config.ts文件

导入unplugin-auto-import和unplugin-vue-components，可以根据我这段代码进行配置

3.2、配置tsconfig.app.json文件

三、运行项目

npm run build

会自动根据我们在tsconfig.app.json文件配置的文件路径自动生成文件
个人认为：auto-imports.d.ts主要是配置了第三方库信息，components.d.ts是配置了页面路由信息

四、展示成功

我们在开发中无需再手动导入vue和vue-router

五、开发中常遇问题

我们可以看到viewB文件已经删除不存在了，但是component.d.ts文件中还有该文件的配置信息，我们可以考虑重新打开项目或删除该文件中，重新生成，以此来提升我们后续代码打包的大小。