您现在的位置是：首页 >学无止境 >开发uniapp使用Vue3组合式API，如何实现从vue模块中自动导入(无需import导入)网站首页学无止境

在常规开发uniappVue3的项目时，需要用到ref、computed等需要每次都手动import导入，使用unplugin-auto-import插件就可以免去每次导入的步骤了，在使用插件前的示例代码如下：

<script setup>
import {onMounted, onUpdated, ref,computed} from "vue";
import {onLoad,onReady} from "@dcloudio/uni-app"
const count = ref(0);
const state = ref(true)
onLoad(()=>{
	console.log("onLoad,页面生命周期钩子");
})
onMounted(()=>{
	console.log("onMounted,组件生命周期函数");
})
</script>

就是说每次使用生命周期函数时候，必须从vue模块导入之后才能使用，不然就会报错。

使用自动导入插件unplugin-auto-import

1.在项目命令行终端中执行如下代码

npm install unplugin-auto-import

2.根目录下创建vite.config.js

并拷贝下面的代码

import { defineConfig } from 'vite'
import uni from '@dcloudio/vite-plugin-uni'
import AutoImport from 'unplugin-auto-import/vite'
 
export default defineConfig({
    plugins: [
        uni(),        
        // 自动导入配置
        AutoImport({
            imports:[
                // 预设
                'vue',
                'uni-app'                
            ]
        })
    ]    
})

3.去除vue和uniapp模块导入，项目可以正常运行

<script setup>
const count = ref(0);
const state = ref(true)
onLoad(()=>{
	console.log("onLoad,页面生命周期钩子");
})
onMounted(()=>{
	console.log("onMounted,组件生命周期函数");
})
</script>