Vue3自動引入插件-unplugin-auto-import，不必再手動 import 。

自動導入 api 按需為 Vite, Webpack, Rspack, Rollup 和 esbuild 。支持TypeScript。由unplugin驅動。

插件安裝：unplugin-auto-import

配置vite.config.ts（配置完后需要重啟項目才能生效）：

import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import AutoImport from 'unplugin-auto-import/vite'
// https://vitejs.dev/config/
export default defineConfig({plugins: [vue(), AutoImport({imports: ['vue'],dts: 'src/auto-import.d.ts',})],// 通過配置變為全局通用樣式css: {preprocessorOptions: {scss: {additionalData: '@import "./src/bem.scss";',},},}
})

重啟項目后發現在src下出現一個suto-import.s.ts文件。

最后，舉例驗證插件作用

App.vue

<template><div><button @click="flag = !flag">change flag</button><div>{{ flag }}</div></div>
</template><script setup lang="ts">
let flag = ref<boolean>(false)
</script><style scoped></style>