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了。