vue3自动引插件unplugin-auto-import全局引用ref、watch等（五星推荐）

在vue3开发中每个页面都要写这些引入ref, onMounted, onUnmounted, watch这些方法的代码，太麻烦了。
unplugin-auto-import插件可以帮我们自动引入，用什么自动引什么很方便很省心。

原代码

<script setup>
	import {
    
    ref, onMounted, onUnmounted, watch} from 'vue';
	const toolButton = ref(false);
	onMounted(() => {
    
    
	})
</script>

使用插件后代码

<script setup>
	const toolButton = ref(false);
	onMounted(() => {
    
    
	})
</script>

配置

1、导入

npm i -D unplugin-auto-import

2、配置

在 vite.config.js 配置文件中添加插件

import AutoImport from "unplugin-auto-import/vite"
export default defineConfig({
    
    
  plugins: [
    ...
     AutoImport ({
    
    
      imports: ["vue", "vue-router","pinia"], //自动引入vue的ref、toRefs、onmounted等，无需在页面中再次引入
      resolvers:[ElementPlusResolver()]
    })
  ]
})