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

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

相关文章:

  • OpenCV特征处理全解析:从检测到匹配的完整指南
  • Tomcat的调优
  • MySQL 事务(二)
  • 4. 文字效果/2D-3D转换 - 3D翻转卡片
  • 基于 Flower 框架的可穿戴设备健康数据个性化健康管理平台研究
  • 当java进程内存使用超过jvm设置大小会发生什么?
  • 【RabbitMQ】工作队列和发布/订阅模式的具体实现
  • binlog日志以及MySQL的数据同步
  • CSS经典布局之圣杯布局和双飞翼布局
  • NLTK库: 数据集3-分类与标注语料(Categorized and Tagged Corpora)
  • archlinux中挂载macOS的硬盘
  • Mac修改hosts文件方法
  • 信息论14:从互信息到信息瓶颈——解锁数据压缩与特征提取的秘密
  • Jsp技术入门指南【十三】基于 JSTL SQL 标签库实现 MySQL 数据库连接与数据分页展示
  • Excel宏和VBA的详细分步指南
  • 进程间通信分类
  • org.slf4j.MDC介绍-笔记
  • 奇怪的公式
  • IntelliJ IDEA给Controller、Service、Mapper不同文件设置不同的文件头注释模板、Velocity模板引擎
  • 【认知思维】光环效应:第一印象的持久力量
  • 彭丽媛同巴西总统夫人罗桑热拉参观中国国家大剧院
  • 国务院关税税则委员会公布公告调整对原产于美国的进口商品加征关税措施
  • 多家外资看好中国市场!野村建议“战术超配”,花旗上调恒指目标价
  • 中华人民共和国和巴西联邦共和国关于强化携手构建更公正世界和更可持续星球的中巴命运共同体,共同维护多边主义的联合声明
  • 云南大理铁路枢纽工程建设取得两大进展,预计明年建成
  • 警方通报:某博主遭勒索后自杀系自导自演,已立案调查