uniapp开发使用vue3组合式api,实现从vue模块中自动导入
本文介绍了如何在uni-app项目中通过unplugin-auto-import插件实现Vue和uni-app API的自动导入。传统开发需要手动导入vue和uni-app的生命周期函数,而安装该插件并在vite.config.js中配置后,可以自动导入常用API,使代码更简洁。配置方法包括安装插件、创建配置文件,并设置需要自动导入的模块(如'vue'和'uni-app')。使用后,无需手动导入即
·
在常规开发中每次都需要 手动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>
更多推荐


所有评论(0)