使用unplugin-auto-import自动导入插件优化vite开发vue3应用

为什么要使用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：

?

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17

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中，插件才会生效：

?

1 2 3 4 5

{   "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应用的开发效率和代码质量。