当前位置: 首页 > backend >正文

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)
})

使用我们小帮手后:

<script setup>
let name = ref('')
onLoad((e)=>{console.log('onLoad',e)
})</script>

如何去使用呢?

1、安装我们的插件

npm i unplugin-auto-import

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'                ]})]    
})

http://www.xdnf.cn/news/6016.html

相关文章:

  • 通义灵码2.5版本全新体验
  • CSP-J普及组第一轮真题单选题专项训练(二)
  • NumPy 2.x 完全指南【九】常量
  • 虹科应用 | 探索PCAN卡与医疗机器人的革命性结合
  • 软件测试(2)软件测试分类及流程
  • 【自学30天掌握AI开发】 - 课程简介
  • Spring事务失效的全面剖析
  • C++:重载>>和<<(输入和输出运算符)
  • [FA1C4] 博客链接
  • OpenTiny icons——超轻量的CSS图标库,引领图标库新风向
  • Weblogic 反序列化远程命令执行漏洞 CVE-2019-2725 详解
  • Eaton XV-102-BE-35TQRC-10是伊顿(Eaton)公司推出的一款高性能触摸屏人机界面(HMI)
  • Python | Dashboard制作
  • 【报错解决】服务器重启后vscode远程连接失败
  • MySQL推荐书单:从入门到精通
  • 3545. 不同字符数量最多为 K 时的最少删除数
  • 【登录认证】JWT令牌
  • RDD-自定义分区器案例
  • 3541. 找到频率最高的元音和辅音
  • mysql8创建用户并赋权
  • Cascadeur2025如何无限制导出FBX文件
  • 优艾智合机器人助力半导体智造,领跑国产化替代浪潮
  • 20250513 空间无限大奇点问题
  • 汽车功能安全--TC3xx MBIST设计要点
  • 分子动力学模拟揭示点突变对 hCFTR NBD1结构域热稳定性的影响
  • 关于vue 本地代理
  • 基于javaweb的SpringBoot爱游旅行平台设计和实现(源码+文档+部署讲解)
  • 日常学习开发记录-rate评价组件
  • AI工具分享篇 | recraft.ai + figma 复刻技术路线图
  • Node.js事件循环中的FIFO原则