使用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

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
  plugins: [
    vue(),
    AutoImport({
      imports: [
        // 插件预设支持导入的api
        'vue',
        'vue-router',
        'pinia'
        // 自定义导入的api
      ],
    })
  ]
})

使用插件

配置完成后，运行代码时会自动在根目录下生成一个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应用的开发效率和代码质量。