个人建站前端篇(六)插件unplugin-auto-import的使用

vue3日常项目中定义变量需要引入ref,reactive等等比较麻烦,可以通过unplugin-auto-import给我们自动引入
*

unplugin-auto-import
解决了vue3-hook、vue-router、useVue等多个插件的自动导入,也支持自定义插件的自动导入,是一个功能强大的typescript支持工具

一、安装依赖

npm i unplugin-auto-import -D

二、在vite.config.ts文件中添加配置

plugins: [vue(), eslintPlugin(),AutoImport({imports:["vue","vue-router"],dts:'src/auto-import.d.ts',    // 路径下自动生成文件夹存放全局指令})
],

三、在src目录下自动生成auto-import.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')
}

四、运行项目、和eslintrc产生冲突,解决方法如下

在vite.config.ts中补充配置

plugins: [vue(), eslintPlugin(),AutoImport({imports:["vue","vue-router"],dts:'src/auto-import.d.ts',    // 路径下自动生成文件夹存放全局指令eslintrc: {enabled: true,  // 1、改为true用于生成eslint配置。2、生成后改回false,避免重复生成消耗}})
]

这里自动生成.eslintrc-auto-import.json配置文件,最后在.eslintrc.json中加入配置

 "extends": ["./.eslintrc-auto-import.json"]

五、tsconfig.json文件中添加如下配置:

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

这样重新启动项目就可以正常使用了

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

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

相关文章

数据结构:跳表讲解

跳表 1.什么是跳表-skiplist1.1简介1.2设计思路 2.跳表的效率分析3.跳表实现3.1类成员设计3.2查找3.3插入3.4删除3.5完整代码 4.skiplist跟平衡搜索树和哈希表的对比 1.什么是跳表-skiplist 1.1简介 skiplist本质上也是一种查找结构,用于解决算法中的查找问题&…

C++面试高频问题汇总( 一)

文章目录 1. 面向对象 struct和class有什么区别1.1 封装什么是封装 1.2 继承1.3 多态1.3.1 什么是多态?1.3.2 虚函数作用和意义1.3.3 什么是纯虚函数和抽象类 2. STL2.1 什么是STL 其创建目的是什么2.2 STL的基本概念以及组成2.3 请简单介绍STL的六大组件2.4 什么是…

Fluter学习3 - Dart 空安全

Dart 空安全: 空类型操作符 (?)空值合并操作符 (??)空值断言操作符 (!)延迟初始化 (late) 1、空类型操作符 (?) 当你想要根据一个表达式是否为 null 来执行某个操作时,你可以使用 (?)语法:expression1?.expression2如果 expression1…

Python开发户型图编辑器-2D/3D户型图展示

在现代家居设计中,户型图是不可或缺的工具,它为设计师和业主提供了一个直观的展示和规划空间的方式。然而,传统的户型图编辑软件往往复杂难用,限制了设计师的创作灵感。我们为您带来了一款全新的Python开发的户型图编辑器&#xf…

字节飞书面试算法题

后端]计算没有重复字符的子字符串数量 题目描述 给定你一个只包含小写英文字母的字符串 s 。如果一个子字符串不包含任何字符至少出现两次(换句话说,它不包含重复字符),则称其为 特殊 子字符串。你的任务是计算 特殊 子字符串的数…

计算机视觉基础:【矩阵】矩阵选取子集

OpenCV的基础是处理图像,而图像的基础是矩阵。 因此,如何使用好矩阵是非常关键的。 下面我们通过一个具体的实例来展示如何通过Python和OpenCV对矩阵进行操作,从而更好地实现对图像的处理。 示例 示例:选取矩阵中指定的行和列的…

Positive Technologies 确保 Rostic‘s 网络应用程序的安全

☑️ PT BlackBox分析 Rostics 网络应用程序的安全性 快餐连锁店在其安全网络开发过程中使用了我们的扫描仪。PT BlackBox 总共扫描了 20 多个 Rostics 的外部服务(每天访问量超过 100,000 人次)和企业服务(每天访问量≈7,000 名员工&#x…

区块链游戏解说:什么是 Nine Chronicles

作者:lesleyfootprint.network 编译:cicifootprint.network 数据源: Nine Chronicles Dashboard 什么是 Nine Chronicles Nine Chronicles 是一款去中心化的在线角色扮演游戏,标志着在线游戏和区块链技术的发展。 Nine Chroni…

小米14 ULTRA:重新定义手机摄影的新篇章

引言 随着科技的飞速发展,智能手机已经不仅仅是一个通讯工具,它更是我们生活中的一位全能伙伴。作为科技领域的佼佼者,小米公司再次引领潮流,推出了全新旗舰手机——小米14 ULTRA。这款手机不仅在性能上进行了全面升级&am…

基于springboot+vue医院电子病历管理系统

一、系统架构 前端:vue | element-ui 后端:springboot | mybatis 环境:jdk1.8 | mysql | maven | node 二、 代码及数据库 三、功能介绍 01. 登录页 02. 用户管理-管理员 03. 用户管理-患者 04. 用户管理-医生 05. 用户管理…

如何实现上拉加载,下拉刷新?

文章目录 一、前言二、实现原理上拉加载下拉刷新 三、案例小结 参考文献 一、前言 下拉刷新和上拉加载这两种交互方式通常出现在移动端中 本质上等同于PC网页中的分页,只是交互形式不同 开源社区也有很多优秀的解决方案,如iscroll、better-scroll、pu…

2023年06月CCF-GESP编程能力等级认证C++编程三级真题解析

一、单选题(每题 2 分,共 30 分) 第1题 高级语言编写的程序需要经过以下( )操作,可以生成在计算机上运行的可执行代码。 A. 编辑 B. 保存 C. 调试 D. 编译 答案:D 第2题 二进制数 11.01 在十进制下是( )。 A. 3.01 B. 3.05 C. 3.125 D. 3.25 答案:D 第3题 已…

APK签名生成工具​

APK签名生成工具​ 点击下载安装签名生成工具,将你的应用的线上包安装到手机上,输入应用正确包名即可获取到签名信息。​ 注意:debug 包和线上包生成的签名是不一样的,所以这个地方要用线上包生成。​ 目前也支持使用keytool命…

每日一题——LeetCode1470.重新排列数组

方法一 把数组的前n项看做一个数组&#xff0c;后n项看做一个数组&#xff0c;两个数组循环先后往res里push元素 var shuffle function(nums, n) {let res[]for(let i0;i<n;i){res.push(nums[i])res.push(nums[in])}return res }; 消耗时间和内存情况&#xff1a; 方法二…

【sgCreateTableData】自定义小工具:敏捷开发→自动化生成表格数据数组[基于el-table]

源码 <template><!-- 前往https://blog.csdn.net/qq_37860634/article/details/136141769 查看使用说明 --><div :class"$options.name"><div class"sg-head">表格数据生成工具</div><div class"sg-container&quo…

multipath多路径显示异常

一、现象 使用multipath -ll显示一个磁盘多大3条路径都是active faulty running状态&#xff0c;而正常状态的链路应该是&#xff1a;active ready running&#xff0c;具体如下图&#xff1a; 二、分析 1、通过各种检查均未发现异常&#xff0c;检查内容包括&#xff1a;操作…

刷LeetCode541引起的java数组和字符串的转换问题

起因是今天在刷下面这个力扣题时的一个报错 541. 反转字符串 II - 力扣&#xff08;LeetCode&#xff09; 这个题目本身是比较简单的&#xff0c;所以就不讲具体思路了。问题出在最后方法的返回值处&#xff0c;要将字符数组转化为字符串&#xff0c;第一次写的时候也没思考直…

【Spring Boot 使用Filter统一处理请求数据转换】

Spring Boot 使用Filter统一处理请求数据转换 背景知识Spring Boot Filter 使用场景 请求预处理技术实现1. 创建自定义Filter类2. 创建自定义请求包装器3. 注册Filter 背景知识 Spring Boot Filter 使用场景 身份验证和授权 场景描述: 在用户访问应用程序的敏感资源之前&…

【经验分享】自然语言处理技术有哪些局限性和挑战?

个人认为&#xff0c;主要是两个难点&#xff1a; 1.语料&#xff0c;通常的语料很好解决&#xff0c;用爬虫从互联网上就可以采集和标注训练。但是我们接触很多项目和客户需求都是专业性很强的&#xff0c;例如&#xff1a;航天材料、电气设备、地理信息、化学试剂 等等。往往…

Python面向对象:组合

组合与重用性 组合指的是&#xff0c;在一个类中以另外一个类的对象作为数据属性&#xff0c;称为类的组合 class Equip: # 武器装备类 def fire(self): print(release Fire skill) class Riven: # 英雄Riven的类&#xff0c;一个英雄需要有装备&#xff0c;因而需要组合E…