Vue3 (unplugin-auto-import自动导入的使用)

安装 参考链接
npm i -D unplugin-auto-import
vite.config.ts里面配置

在这里插入图片描述

import AutoImport from 'unplugin-auto-import/vite'AutoImport({imports:[ 'vue','vue-router']})
重新运行项目会生成一个auto-imports.d.ts的文件
/* eslint-disable */
/* prettier-ignore */
// @ts-nocheck
// noinspection JSUnusedGlobalSymbols
// Generated by unplugin-auto-import
export {}
declare global {const EffectScope: typeof import('vue')['EffectScope']const computed: typeof import('vue')['computed']const createApp: typeof import('vue')['createApp']const customRef: typeof import('vue')['customRef']const defineAsyncComponent: typeof import('vue')['defineAsyncComponent']const defineComponent: typeof import('vue')['defineComponent']const effectScope: typeof import('vue')['effectScope']const getCurrentInstance: typeof import('vue')['getCurrentInstance']const getCurrentScope: typeof import('vue')['getCurrentScope']const h: typeof import('vue')['h']const inject: typeof import('vue')['inject']const isProxy: typeof import('vue')['isProxy']const isReactive: typeof import('vue')['isReactive']const isReadonly: typeof import('vue')['isReadonly']const isRef: typeof import('vue')['isRef']const markRaw: typeof import('vue')['markRaw']const nextTick: typeof import('vue')['nextTick']const onActivated: typeof import('vue')['onActivated']const onBeforeMount: typeof import('vue')['onBeforeMount']const onBeforeRouteLeave: typeof import('vue-router')['onBeforeRouteLeave']const onBeforeRouteUpdate: typeof import('vue-router')['onBeforeRouteUpdate']const onBeforeUnmount: typeof import('vue')['onBeforeUnmount']const onBeforeUpdate: typeof import('vue')['onBeforeUpdate']const onDeactivated: typeof import('vue')['onDeactivated']const onErrorCaptured: typeof import('vue')['onErrorCaptured']const onMounted: typeof import('vue')['onMounted']const onRenderTracked: typeof import('vue')['onRenderTracked']const onRenderTriggered: typeof import('vue')['onRenderTriggered']const onScopeDispose: typeof import('vue')['onScopeDispose']const onServerPrefetch: typeof import('vue')['onServerPrefetch']const onUnmounted: typeof import('vue')['onUnmounted']const onUpdated: typeof import('vue')['onUpdated']const provide: typeof import('vue')['provide']const reactive: typeof import('vue')['reactive']const readonly: typeof import('vue')['readonly']const ref: typeof import('vue')['ref']const resolveComponent: typeof import('vue')['resolveComponent']const shallowReactive: typeof import('vue')['shallowReactive']const shallowReadonly: typeof import('vue')['shallowReadonly']const shallowRef: typeof import('vue')['shallowRef']const toRaw: typeof import('vue')['toRaw']const toRef: typeof import('vue')['toRef']const toRefs: typeof import('vue')['toRefs']const toValue: typeof import('vue')['toValue']const triggerRef: typeof import('vue')['triggerRef']const unref: typeof import('vue')['unref']const useAttrs: typeof import('vue')['useAttrs']const useCssModule: typeof import('vue')['useCssModule']const useCssVars: typeof import('vue')['useCssVars']const useLink: typeof import('vue-router')['useLink']const useRoute: typeof import('vue-router')['useRoute']const useRouter: typeof import('vue-router')['useRouter']const useSlots: typeof import('vue')['useSlots']const watch: typeof import('vue')['watch']const watchEffect: typeof import('vue')['watchEffect']const watchPostEffect: typeof import('vue')['watchPostEffect']const watchSyncEffect: typeof import('vue')['watchSyncEffect']
}
// for type re-export
declare global {// @ts-ignoreexport type { Component, ComponentPublicInstance, ComputedRef, ExtractDefaultPropTypes, ExtractPropTypes, ExtractPublicPropTypes, InjectionKey, PropType, Ref, VNode, WritableComputedRef } from 'vue'import('vue')
}
完成上面步骤后,页面使用还会报警告

在这里插入图片描述

此时还需要在tsconfig.json里面的"include"里面配置"auto-imports.d.ts"(配置后就不会有警告了)

在这里插入图片描述

"include": ["src/**/*.ts", "src/**/*.d.ts", "src/**/*.tsx", "src/**/*.vue","auto-imports.d.ts"],

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.hqwc.cn/news/488116.html

如若内容造成侵权/违法违规/事实不符,请联系编程知识网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

C# If与Switch的区别

在 switch 语句中使用表达式比较时,编译器会生成一个查找表,其中包含所有表达式的值和对应的 case 标签。因此,与使用常量或字面量比较相比,使用表达式比较可能会略微降低性能。 只有当 switch 语句中的所有 case 标签都使用常量或…

亿道丨三防平板丨加固平板丨为零售业提供四大优势

随着全球经济的快速发展,作为传统行业的零售业也迎来了绝佳的发展机遇,在互联网智能化的大环境下,越来越多的零售企业选择三防平板电脑作为工作中的电子设备。作为一种耐用的移动选项,三防平板带来的不仅仅是坚固的外壳。坚固耐用…

记录 使用FFMPEG 笔记本摄像头推流

一、使用 FFMPEG 测试摄像头拉流显示 # 获取摄像头名称 ffmpeg -list_devices true -f dshow -i dummy# 我笔记本上的摄像头名称如下 device_pnp_\\?\usb#vid_0408&pid_1020&mi_00#6&199e90f7&0&0000#{65e8773d-8f56-11d0-a3b9-00a0c9223196}\global# 使…

Typora+PicGo+super-prefix+阿里云OSS设置图床

🌈个人主页:godspeed_lucip 🔥 系列专栏:实用工具 1 TyporaPicGosuper-prefix阿里云OSS设置图床1.1 设置阿里云OSS1.2 以时间戳命名图片1.2.1 安装super-prefix1.2.2 设置配置文件 1.3 批量上传图片遇到的问题1.4 参考资料 2 将ma…

【openGL教程 11 】关于坐标系统

目录 一、说明 二、坐标系统 2.1 概述 2.2 局部空间 2.3 世界空间 2.4 观察空间 2.5 裁剪空间 2.6 正射投影 2.7 透视投影 2.8 把它们都组合到一起 三、进入3D 四、更多的3D 4.1 立方体画法 4.2 Z缓冲区 4.3 更多的立方体 五、练习 一、说明 本篇是openGL学习中…

【Java程序设计】【C00284】基于Springboot的校园疫情防控管理系统(有论文)

基于Springboot的校园疫情防控管理系统(有论文) 项目简介项目获取开发环境项目技术运行截图 项目简介 这是一个基于Springboot的校园疫情防控系统 本系统分为系统功能模块、管理员功能模块以及学生功能模块。 系统功能模块:在系统首页可以查…

Openstack云计算框架及前期服务搭建

openstack介绍 Openstack是一个开源的云计算管理平台项目,由几个主要的组件组合起来完成具体工作,支持几乎所有的云环境,项目目标是提供实施简单、可大规模扩展、丰富、标准统一的云计算管理平台 ----百度百科 Openstack是一个云操作系统&a…

HTML+CSS:动态搜索框

效果演示 这段代码实现了一个简单的搜索栏效果。页面背景为从天蓝色到深蓝色的渐变色,搜索栏包括一个圆形背景的搜索图标和一个输入框。当用户点击搜索图标时,输入框会从搜索图标的位置滑出,显示一个输入框和一个清除按钮。用户可以在输入框中…

PyTorch概述(二)---MNIST

NIST Special Database3 具体指的是一个更大的特殊数据库3;该数据库的内容为手写数字黑白图片;该数据库由美国人口普查局的雇员手写 NIST Special Database1 特殊数据库1;该数据库的内容为手写数字黑白图片;该数据库的图片由高…

网关服务gateway注册Consul时报错Consul service ids must not be empty

网关服务gateway启动时,初始化Consul相关配置时报错。 Consul service ids must not be empty, must start with a letter, end with a letter or digit, and have as interior characters only letters, digits, and hyphen: cbda-server-gateway:10.111.236.142:…

Web3的奇迹:数字世界的新篇章

在数字化时代的潮流中,Web3正以其令人振奋的潜力和前景引领着我们进入一个全新的数字时代。作为互联网的下一代,Web3将重新定义我们对数字世界的认知和体验,为我们带来无限的可能性和奇迹。本文将深入探讨Web3的重要性、核心特征以及未来展望…

渗透测试之RCE漏洞

RCE(remote command execute)远程命令执行。应用程序的某些功能需要调用可以执行的系统命令的函数,如果这些函数或者函数的参数被用户控制,就可能通过命令连接符将恶意的命令拼接到函数中,从而执行系统命令。 常见的命…