vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦，可以通过unplugin-auto-import给我们自动引入
1、安装
npm i -D unplugin-auto-import
2、在vite.config.ts中引入
import AutoImport from 'unplugin-auto-import/vite'
并在plugins中配置：
export default defineConfig({
plugins: [
......
AutoImport({
imports: ['vue'],
dts: 'src/auto-import.d.ts',
})
]
}）
AutoImport中可以有很多配置项，可以到github中看详细配置：
GitHub - antfu/unplugin-auto-import: Auto import APIs on-demand for Vite, Webpack and Rollup
注：dts是帮我们生成的类型声明文件，直接使用会找不到
上面配置完毕后会在src目录下生成一个auto-import.d.ts文件，里面帮我们自动引入vue相关内容，我们可以在项目中直接使用。
注意：上面配置完毕dts后可能并不会自动生成auto-import.d.ts文件，可以重新运行一下项目，或者关闭编辑器重新打开运行即可。
使用如下：
<script setup lang="ts">
// 这里我们不用引入ref直接使用
const msg = ref<string>('Hello Vue3')
</script>
<template>
{{ msg }}
</template>
<style scoped lang="scss"></style>