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.mzph.cn/news/703782.shtml

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

相关文章

YOLOv9尝鲜测试五分钟极简配置

pip安装python包: pip install yolov9pip在https://github.com/WongKinYiu/yolov9/tree/main中下载好权重文件yolov9-c.pt。 运行下面代码: import yolov9model yolov9.load("yolov9-c.pt", device"cpu") # load pretrained or c…

苹果手机动画演示动画PR样机模板视频素材 iPhone Mockup 7.0

适用于Premiere苹果手机动画演示PR样机模板视频素材 iPhone Mockup 7.0 产品信息: 5款支持alpha频道的动画智能手机。 轻松关闭屏幕上的背景、阴影和反射。 适用于Premiere Pro 2023 每个样机持续时间为13秒。 4K分辨率。 轻松更改颜色。 适用于图像或视频。 包括视…

m估计及其c++简单实现

文章目录 什么是m估计怎么求解m估计呢?Huber函数时的线性m估计 什么是m估计 自20世纪60年代稳健统计建立以来,在国内外众多学者的研究之下,诞生了一系列稳健统计重要理论和成果。其中最主要且广泛使用的稳健统计有以下三类: L-e…

Jmeter学习系列之八:控制器Controllers 的入门介绍

一、Controllers 简介 Jmeter有两种类型的控制器:Samplers(取样器)和Logical Controllers(逻辑控制器);它们驱动着测试的进行取样器:让jmeter发送请求到服务器以及接收服务器的响应数据逻辑控制…

@SpringBootApplication

目录 1. SpringBootApplication注解简介 2. 使用SpringBootApplication注解 3. 自定义SpringBootApplication注解 在Spring Boot中,SpringBootApplication是一个非常重要的注解,它用于开启自动配置,简化了我们的开发工作。本文将详细介绍这…

施华洛世奇 Swarovski EDI需求分析

施华洛世奇为全球首屈一指的光学器材及精确切割仿水晶制造商,为时尚服饰、首饰、灯饰、建筑及室内设计提供仿水晶元素。施华洛世奇有两个主要业务,分别负责制造及销售仿水晶元素,以及设计制造成品。 EDI传输协议 施华洛世奇 Swarovski 与合作…

自定义el-upload 上传文件

前言 最近在做一个文件上传的功能&#xff0c;后端接口写好了、发现前端上传文件的页面不会写……&#xff08;我很笨的&#xff09;然后我就找啊找发现element有个组件是<el-upload/>能直接上传文件。我就想直接用拿来改改改成自己想要的&#xff0c;可是就是这样我花了…

远程连接服务器及可视化方法(Win和Linux)

1.win端 1、通过SSH连接至服务器 在window下&#xff0c;打开命令行提示符&#xff08;快捷键winr后输入cmd回车&#xff09; 在命令行中输入 ssh 服务器上的用户名192.168.50.204回车并输入服务器上的用户登录密码 至此&#xff0c;已成功通过SSH连接至服务器。 2、通过…

Java根据excel模版导出Excel(easyexcel、poi)——含项目测试例子拿来即用

Java根据excel模版导出Excel&#xff08;easyexcel、poi&#xff09;——含项目测试例子拿来即用 1. 前言1.1 关于Excel的一般导出2.2 关于easyexcel的根据模版导出 2. 先看效果2.1 模版2.2 效果 3. 代码实现&#xff08;核心代码&#xff09;3.1 项目代码结构3.2 静态填充例子…

《高考》期刊杂志投稿邮箱知网教育类期刊发表

《高考》杂志是由国家新闻出版总署批准的正规教育类期刊。主要宣传高中新课程改革的专业性&#xff0c;是教育管理工作者、高中一线教师交流经验、探讨问题的重要平台&#xff0c;期刊突出政策性、针对性、指导性&#xff0c;是一本以教育科研成果展示为主&#xff0c;兼具教育…

x86使用GDT表实现系统调用--用户调用系统功能

系统调用 视频讲解可以看这一个课程 GDT表相关知识 原理 注册 允许应用调用操作系统的一些函数, 主要是由于权限, 需要在特区级下面运行一些操作 页表相关设置的时候有一个设置是PDE_U位, 这时候用户就可以访问这一段地址, 否则就是需要系统操作级来进行操作 实现系统调用…

xss-跨站脚本攻击漏洞

前备知识&#xff1a; Cookie和Session是Web开发中用于维持用户状态、跟踪用户会话的核心技术&#xff0c;它们的主要目的是在无状态的HTTP协议基础上实现有状态的用户交互。 **Cookie**&#xff1a; - Cookie是一种由服务器发送到客户端&#xff08;通常是用户的浏览器&#x…

OpenAI视频生成Sora技术简析

基本介绍 Sora是春节期间OpenAI发布的产品&#xff0c;主要是通过文字描述生成视频&#xff0c;通过大规模视频数据训练而成的生成模型&#xff0c;当前还没开放试用。官方发布的技术报告&#xff1a;https://openai.com/research/video-generation-models-as-world-simulators…

无线综合测试仪8960(E5515C)

无线综合测试仪8960&#xff08;E5515C&#xff09; 简述&#xff1a; 8960是美国安捷伦&#xff08;Agilent&#xff09;公司生产的手机综测仪&#xff0c;8960测试仪是一款E5515C主机&#xff0c;具有特定于技术的硬件选件和软件应用程序。有两个硬件选项&#xff0c;8960能…

SpringBoot 学习笔记

文章目录 一、IoC二、AOP三、bean3.1 bean 生命周期3.2 三种依赖注入方式3.3 bean 线程安全 四、SpringMVC五、常用注解5.1 Scope5.2 PostConstruct 和 PreDestroy5.3 Component 和 Bean5.4 Autowired 和 Resource 六、基于 ApplicationContextAware 实现工厂模式七、事务失效八…

[AutoSar]BSW_Com03 DBC详解 (一)

目录 关键词平台说明一、DBC 定义1.1 相关工具 二、主要组成部分介绍2.1 Networks2.2 ECUs2.3 Network nodes2.4 messages2.5 signal2.6 Value Tables 三、主要组成部分关系图 关键词 嵌入式、C语言、autosar、OS、BSW 平台说明 项目ValueOSautosar OSautosar厂商vector &am…

推荐一个 Obsidian 的 ChatGPT 插件

源码地址&#xff1a;https://github.com/nhaouari/obsidian-textgenerator-plugin Text Generator 是目前我使用过的最好的 Obsidian 中的 ChatGPT 功能插件。它旨在智能生成内容&#xff0c;以便轻松记笔记。它不仅可以在 Obsidian 中直接使用 ChatGPT&#xff0c;还提供了优…

二叉树高频题目(不含树形DP)

二叉树高频题 二叉树的层序遍历 . - 力扣&#xff08;LeetCode&#xff09; 按点弹出 class Solution { public:vector<vector<int>> levelOrder(TreeNode* root) {vector<vector<int>>ans;if(root!nullptr){queue<TreeNode*>q;unordered_map&…

音视频技术-电脑连接调音台时交流声的产生与消除

当电脑&#xff08;笔记本/台式机&#xff09;声卡通过音频线与调音台&#xff08;或扩音机&#xff09;连接时&#xff0c;能听到“交流声”。有时很轻微&#xff0c;有时很明显&#xff0c;甚至干扰正常的演讲或发言。 很多时候&#xff0c;我们在台上演讲时&#xff0c;都会…

Centos7.9环境源码编译安装ffmpeg6.x

1.官网ffmpeg下载源码 https://ffmpeg.org/download.html#build-windows 2.未安装x264库则先安装配置 可以先查询x264库: whereis libx264 安装编译工具和依赖库&#xff1a; sudo yum install gcc make cmake mercurial git yasm pkgconfig autoconf automake libtool sudo…