vue3 自動インポート プラグイン unplugin-auto-import グローバル リファレンス ref、watch など (5 つ星の推奨)

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()]
    })
  ]
})