当前位置：首页 > news >正文

uniapp开发使用vue3组合式api，实现从vue模块中自动导入

news 来源：原创 2025/6/6 3:43:05

在常规开发中每次都需要手动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>

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

// 在uniapp 项目根目录 命令行终端中 执行
npm install unplugin-auto-import

项目根目录下创建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'                ]})]    
})

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

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