uniapp+vue3中自动导入ref等依赖

前言:

        在我们使用uni-app+vue3创建项目,开发的过程中,老是需要导入我们的ref、onshow等,那么能不能自动导入,不用我们每个页面都写呢?是没问题的,这里让他的小帮手来帮你减轻负担:他就是:unplugin-auto-import

vue3中的一些生命周期信息https://uniapp.dcloud.net.cn/tutorial/vue-composition-api.html

代码效果展示:

vue3项目 使用我们的小帮手前:

引入ref/reactive/watch  等方法

import {onMounted, ref,watch} from 'vue'

let name = ref('')

引入 onShow等方法

import { onLoad,onShow } from '@dcloudio/uni-app'

onLoad((e)=>{
	console.log('onLoad',e)
})

使用我们小帮手后:

如何去使用呢?

1、安装我们的插件

npm i unplugin-auto-import

uniapp+vue3中自动导入ref等依赖_第1张图片

2、新建一个vue.config.js/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'                
            ]
        })
    ]    
})

你可能感兴趣的:(vue3.0,uni-app,uni-app,vue.js,前端)