Vue2+JS项目升级为Vue3+TS之jquery的maphilight引入项目

news2024/11/15 18:56:53

        本人由于想提升自己的项目开发能力,所以将就项目的vue2+JavaScript+webpack的旧技术栈升级为vue3+typescript+vite的技术栈,所以遇到很多坑,以下是maphilight的解决方法。

        众所周知jquery是基于JavaScript进行开发,但是已有typescript版本,所以直接引入即可用jQuery包里的方法,但是!jQuery包里不自带maphilight版本,而且!maphilight没有typescript版本,只有JavaScript版本,不仅要手动引入而且要想办法在typescript的项目中使用。

所以如果只单纯的引入maphighlight的包,就会让$可以使用,但是maphilight会被识别为不是个方法,搜索了一堆网上解决办法,并把GPT干熄火了都没解决,故通过github社区进行解决。

在typescript用JavaScript引入的包,简单粗暴,直接在index.html引入js文件即可全局使用,但是typescript会报类型问题,怎么解决呢,通过全局申明即可解决,故完成!

    <script src="/node_modules/jquery/dist/jquery.min.js"></script>
    <script src="/node_modules/jquery/dist/jquery.maphilight.js"></script>


declare const $: any;
declare const maphilight: any;

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

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

相关文章

LiveKit的agent介绍

概念 LiveKit核心概念&#xff1a; Room&#xff08;房间&#xff09;Participant&#xff08;参会人&#xff09;Track&#xff08;信息流追踪&#xff09; Agent 架构图 ​ 订阅信息流 ​ agent交互流程 客户端操作 加入房间 房间创建方式 手动 赋予用户创建房间的…

【原创】java+springboot+mysql校园疫情管理系统设计与实现

个人主页&#xff1a;程序猿小小杨 个人简介&#xff1a;从事开发多年&#xff0c;Java、Php、Python、前端开发均有涉猎 博客内容&#xff1a;Java项目实战、项目演示、技术分享 文末有作者名片&#xff0c;希望和大家一起共同进步&#xff0c;你只管努力&#xff0c;剩下的交…

【JAVA开源】基于Vue和SpringBoot的图书个性化推荐系统

本文项目编号 T 015 &#xff0c;文末自助获取源码 \color{red}{T015&#xff0c;文末自助获取源码} T015&#xff0c;文末自助获取源码 目录 一、系统介绍1.1 业务分析1.2 用例设计1.3 时序设计 二、演示录屏三、启动教程四、功能截图五、文案资料5.1 选题背景5.2 国内外研究…

【学习笔记】 陈强-机器学习-Python-Ch15 人工神经网络(1)sklearn

系列文章目录 监督学习&#xff1a;参数方法 【学习笔记】 陈强-机器学习-Python-Ch4 线性回归 【学习笔记】 陈强-机器学习-Python-Ch5 逻辑回归 【课后题练习】 陈强-机器学习-Python-Ch5 逻辑回归&#xff08;SAheart.csv&#xff09; 【学习笔记】 陈强-机器学习-Python-…

[AHK] 调用函数动态生成ListBox窗口

需求背景 动态生成向导对话框&#xff0c;由用户选一个选项&#xff0c;类似做选择题。 运行效果 AHK v1 代码 if(A_ScriptFullPathA_LineFile)MsgBox % ListBox("窗口标题", "这是一个生成listbox的Demo", "a|b|c|d|",3) return ;---------…

【小沐学OpenGL】Ubuntu环境下glew的安装和使用

文章目录 1、简介1.1 OpenGL简介1.2 glew简介 2、安装glew2.1 命令安装glew2.2 直接代码安装glew2.3 cmake代码安装glew 3、测试glew3.1 测试glewfreeglut3.2 测试glewglfw 结语 1、简介 1.1 OpenGL简介 Linux 系统中的 OpenGL 是一个跨语言、跨平台的应用程序编程接口&#…

智能的PHP开发工具PhpStorm v2024.2全新发布——支持日志文件

PhpStorm是一个轻量级且便捷的PHP IDE&#xff0c;其旨在提高用户效率&#xff0c;可深刻理解用户的编码&#xff0c;提供智能代码补全&#xff0c;快速导航以及即时错误检查。可随时帮助用户对其编码进行调整&#xff0c;运行单元测试或者提供可视化debug功能。 立即获取PhpS…

【私活儿分享】手串珠子管理小程序,便捷查询珠子(串手链的珠子)位置

前言 之间帮客户做了个查询手串珠子位置的小程序&#xff0c;便于帮助客户管理众多的珠子&#xff0c;这个珠子就是戴在手上串起来的饰品。好了&#xff0c;话不多说&#xff0c;进入正题&#xff01; 正文 小程序比较简单&#xff0c;采用云开发。两个页面&#xff0c;一个查…

Git 新手指南

Git 命令大全 Git 是目前最流行的分布式版本控制系统&#xff0c;用于跟踪文件的更改&#xff0c;协调不同开发者的协作。掌握 Git 命令能够极大提高工作效率&#xff0c;尤其在软件开发过程中。本文将详细介绍 Git 的一些常用命令&#xff0c;帮助你更好地理解和使用 Git。 1…

一款免费开源的截图软件,SETUNA截图软件

SETUNA是一款功能强大且便捷的屏幕截图工具&#xff0c;适用于多种场景&#xff0c;包括日常办公、学习和游戏娱乐等。该软件的主要特点如下&#xff1a; 高效截图&#xff1a;用户可以轻松截取屏幕上的任何部分&#xff0c;并且支持自定义选取截图范围。图片编辑功能&#xf…

聊聊go语言channel中的一些小技巧

写在文章开头 go语言提供了各种非常方便的语法糖&#xff0c;使得我们实现用最少的语法做尽可能高效的事情&#xff0c;而本文就简单介绍如何实现非阻塞处理多个channel&#xff0c;希望对你有帮助。 Hi&#xff0c;我是 sharkChili &#xff0c;是个不断在硬核技术上作死的技…

项目进度一

一.双token验证登陆/注册 1.在前端中&#xff0c;得到响应记录acessToken和 refreshToken ,并记录在 localStorage中&#xff0c;当登录之后的请求都要携带着accessToken,如果accessToken过期&#xff0c;就再验证一下refreshToken&#xff0c;如果也过期就需要重新登录&#…

亚马逊测评自养号卖家如何以低成本提高店铺产品曝光率和销量?

在跨境电商领域&#xff0c;随着市场日趋饱和和竞争加剧&#xff0c;卖家普遍面临流量低、转化率低的共同挑战。为了在这种严重的“内卷化”环境中脱颖而出&#xff0c;不少卖家投入了大量的资金和资源&#xff0c;尝试了各种站内和站外的推广方式&#xff0c;但往往因为缺乏成…

Vue2中使用ant-design的tab组件让他一行充满

使用tabs组件默认样式这样 想改成水平居中铺满如下&#xff1a; 需要改下css样式 /deep/ .ant-tabs-nav {width: 100%;& > div {width: 100%;display: flex;align-items: center;}.ant-tabs-tab {flex: 1;text-align: center;}}

Python中matplotlib-legend图例水平排列

在matplotlib中&#xff0c;图例是用来标识不同数据系列或不同类别的标记和颜色的标签。有时候我们希望将图例水平排列&#xff0c;以节省空间并使得图例更加美观。本文将介绍如何在matplotlib中实现图例的水平排列。 方法一&#xff1a;使用legend的loc参数 我们可以通过leg…

Android通知(Notification)的基本用法

Android通知&#xff08;Notification&#xff09;的基本用法 通知&#xff08;Notification&#xff09;是Android系统中比较有特色的一个功能&#xff0c;当某个应用程序希望向用户发出一些提示信息&#xff0c;而该应用程序又不在前台运行时&#xff0c;就可以借助通知来实…

云计算实训43——部署k8s基础环境、配置内核模块、基本组件安装

一、K8S基本概念 1、k8s是什么 K8S是Kubernetes的 缩写&#xff0c;由于k 和 s 之间有⼋个字符&#xff0c;所以因此得名。 Kubernetes 是⼀个可移植的、可扩展的开源平台&#xff0c;⽤于管理容器化 的⼯作负载和服务&#xff0c;可促进声 明式配置和⾃动化。 2、k8s的功…

pico 手臂手部手指完整版

别忘了设置好pico的设置和导入需要的样式 一、动画设置 1.1设置Avatar 遮罩; 1.2创建动画、手指动画的话&#xff0c;我创建了四个&#xff0c;分别对应的是&#xff08;平展、弯曲食指、弯曲其他手指、握拳&#xff09; 1.3建立分层、我建了三层&#xff0c;默认层&#xff…

第二十章 加密 SOAP 主体

文章目录 第二十章 加密 SOAP 主体加密概述加密 SOAP 主体 第二十章 加密 SOAP 主体 本主题介绍如何加密 IRIS Web 服务和 Web 客户端发送的 SOAP 消息正文。 主题“加密安全标头元素”和“使用派生密钥令牌进行加密和签名”描述了如何加密安全标头元素以及加密 SOAP 主体的其…

这10个提示词技巧太强了,用过的人都说真香!

ChatGPT 已经发布一年多了&#xff0c;这一年&#xff0c;我们经常会听到“提示词工程&#xff08;Prompt Engineering&#xff09;”这个术语&#x1f4bb; 在探讨这个概念之前&#xff0c;我们需要先了解什么是Prompt&#xff08;提示词&#xff09;&#x1f914; 简单来说…