vue3 项目引入unplugin-auto-import

在项目中开发每个页面都需要引入ref,reactive等：

import { ref, reactive, toRefs, onMounted, getCurrentInstance } from 'vue';

就觉得有没有方法或者插件可以不需要引入即可使用。
果然，有想法世界就会有答案。
antfu大佬开发的一个插件unplugin-auto-import正好解决我偷懒开发的想法。
github地址：https://github.com/antfu/unplugin-auto-import

安装

npm i -D unplugin-auto-import

在vite.config.ts里面引入
import AutoImport from 'unplugin-auto-import/vite'

plugins: [vue(),AutoImport({
	imports:['vue','vue-router'],
	eslintrc: {
		enabled: false, // Default `false`
		filepath: './.eslintrc-auto-import.json',
		globalsPropValue: true,
	},
	dts:"src/auto-import.d.ts"
})],

在项目中会生成两个文件：一个auto-import.d.ts，一个.eslintrc-auto-import.json

然后返回页面中去掉引入的ref,reactive等，发现还会报一个错：

很明显：是eslint在作怪。
因此，需要再.eslintrc.js里面引入识别文件:

保存后重启下项目，发现没有报错，且功能正常运行就ok了。