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