问题描述:
我们每次不管是页面也好还是组件也好,多多少少都不会避免写下面一长串的东西,用的生命周期函数以及其它函数也好,只要是vue3里面的,在setup语法糖中,总是要引入,如果不引入就会报错,如果遇到要使用的函数(ref
、onMounted
、 onUnmounted、
reactive、computed、watch、toRefs)等一连串下来,每次都要写一遍挺麻烦的。
<script setup>
import { ref, onMounted, onUnmounted } from 'vue';
<script/>
如果不写,或者忘记写了,就会报一下错误():
直接进入正题:
怎么能不用写,或者说配置一次就不用每次写这些引入,我们直接采用“unplugin-auto-import”这个插件。安装方式直接使用npm进行安装就行:
npm install unplugin-auto-import
等安装好之后,去vite.config.js里面进行配置:
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
// 引入插件
import AutoImport from 'unplugin-auto-import/vite'
export default defineConfig({
plugins: [
vue(),
// 配置插件
AutoImport({
imports:['vue','vue-router']
})
],
resolve: {
}
})
配置好之后,我们重新运行这个项目(这个测试代码还是不import):
<template>
<div @click="add">
首页{{ a }}
</div>
</template>
<script setup>
// import { ref,onMounted } from 'vue'
var a = ref(1);
function add() {
console.log(11);
a.value++
}
</script>
<style scoped>
</style>
控制台的报错没有了,响应式数据a也从1变成了12,说明我们 配置好了,能够正常使用。不用每次都引入那些麻烦东西了,直接使用就行了。