Nuxt3框架局部文件引用外部JS/CSS文件的相关配置方法

引入外部JS:

<script setup>useHead({script: [ {type: "text/javascript",src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js'}]})
</script>

useHead只能与组件的setup和生命周期钩子一起使用

如果需要将js放置body区域末尾,直接添加参数

<script setup>useHead({script: [ {type: "text/javascript",src: 'https://cdnjs.cloudflare.com/ajax/libs/jquery/3.7.0/jquery.min.js',body:true}]})
</script>

引入外部CSS:

<script setup>useHead({link: [{rel: 'preconnect',type: "text/css",href: 'https://fonts.googleapis.com'},{rel: 'stylesheet',type: "text/css",href: 'https://fonts.googleapis.com/css2?family=Roboto&display=swap',crossorigin: ''},{rel: "stylesheet",type: "text/css",href: "https://unpkg.com/swiper@8/swiper-bundle.css",},]})
</script>

扩展:

如果是本地的CSS获取JS要配置再public 的目录下,然后安装public文件目录约定访问路径进行访问即可,例如

useHead({script: [{src: "/js/jquery.js",},{src: "/js/slide.js",},],
});

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

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

相关文章

算法萌新闯力扣:存在重复元素II

力扣题&#xff1a;存在重复元素II 开篇 这道题是217.存在重复元素的升级版&#xff0c;难度稍微提高。通过这道题&#xff0c;能加强对哈希表和滑动窗口的运用。 题目链接:219.存在重复元素II 题目描述 代码思路 1.利用哈希表&#xff0c;来保存数组元素及其索引位置 2.遍…

​软考-高级-系统架构设计师教程(清华第2版)【第16章 嵌入式系统架构设计理论与实践(P555~613)-思维导图】​

软考-高级-系统架构设计师教程&#xff08;清华第2版&#xff09;【第16章 嵌入式系统架构设计理论与实践&#xff08;P555~613&#xff09;-思维导图】 课本里章节里所有蓝色字体的思维导图

将ArduinoIDE库文件移动到其他磁盘的方法

本文主要介绍更改软件包位置Arduino IDE &#xff08;含2.0以上版本&#xff09;的方法。 Arduino IDE 默认将软件包安装到 C 盘&#xff0c;如果你使用的开发板较多&#xff0c;产生的库文件很大&#xff0c;会导致 C 盘可用空间不足&#xff0c;博主只用了ESP开发板&#xf…

【51单片机系列】C51基础

本文内容是关于C51语言的基础内容的&#xff0c;包括C51的数据类型、变量、运算符、函数以及reg52.h文件中的内容&#xff0c;有些与C中相同的内容没有记录在此&#xff0c;比如常量、某些变量、表达式、程序结构、数组等没有涉及。 文章目录 C51的数据类型1. C51中的基本数据类…

QT基础入门【QSS】 伪状态,冲突解决、级联介绍

伪状态 伪状态的含义:伪状态指的是可以根据小部件的状态限制样式规则应用的标记。这些状态描述了小部件在特定情况下的状态,比如鼠标悬停、选中等状态。 伪状态的使用:伪状态出现在选择器的末尾,通过冒号(:)进行标记。比如,当鼠标悬停在 QPushButton(按钮)上时,下面…

【Mysql】复合查询详解+实战操作(多表查询、自链接、子查询等)

&#x1f308;欢迎来到Python专栏 &#x1f64b;&#x1f3fe;‍♀️作者介绍&#xff1a;前PLA队员 目前是一名普通本科大三的软件工程专业学生 &#x1f30f;IP坐标&#xff1a;湖北武汉 &#x1f349; 目前技术栈&#xff1a;C/C、Linux系统编程、计算机网络、数据结构、Mys…

Nginx实现负载均衡

Nginx实现负载均衡 负载均衡的作用 1、解决单点故障&#xff0c;让web服务器构成一个集群 2、将请求平均下发给后端的web服务器 负载均衡的软硬件介绍 负载均衡软件&#xff1a; # nginx 四层负载均衡&#xff1a;stream&#xff08;nginx 1.9版本以后有stream模块&#x…

STM32硬件调试器不一定准确,proteus不一定准确

我在做实验的过程中&#xff0c;发现里面的那个变量ii一直都不变搞了很久没有发现问题&#xff0c; 然后怀疑是不是软件出了问题&#xff0c;然后直接只用单片机的一个灯泡来检测是否正常&#xff0c;发现&#xff1a;单片机里面正常&#xff0c;但是硬件调试的时候&#xff0…

LaTeX 数学公式常见问题及解决方案

本文汇总了博主在使用 LaTeX 写文档过程中遇到的所有数学公式常见问题及对应的 LaTeX 解决方案 持续更新... 目录 1. 连等式2. 公式重新开始编号2.1 图片/表格重新编号 1. 连等式 在数学公式推导过程中常常会遇到如 Figure 1 所示的连等式&#xff0c;一般需要保证等号或者不等…

sqli-labs(Less-3)

1. 通过构造id1’ 和id1’) 和id1’)–确定存在注入 可知原始url为 id(‘1’) 2.使用order by 语句猜字段数 http://127.0.0.1/sqlilabs/Less-3/?id1) order by 4 -- http://127.0.0.1/sqlilabs/Less-3/?id1) order by 3 --3. 使用联合查询union select http://127.0.0.1…

CTF-PWN-tips

文章目录 overflowscanfgetreadstrcpystrcat Find string in gdbgdbgdb peda Binary ServiceFind specific function offset in libc手工自动 Find /bin/sh or sh in library手动自动 Leak stack addressFork problem in gdbSecret of a mysterious section - .tlsPredictable …

036、目标检测-锚框

之——对边缘框的简化 目录 之——对边缘框的简化 杂谈 正文 1.锚框操作 2.IoU交并比 3.锚框标号 4.非极大值抑制 5.实现 拓展 杂谈 边缘框这样一个指定roi区域的操作对卷积神经网络实际上是很不友好的&#xff0c;这可能会对网络感受野提出一些特定的要求&#xff0…

【脑与认知科学】【n-back游戏】

请参考课堂内容&#xff0c;设计一种测试工作记忆的实验方法&#xff0c;并选择三位同学作为被试测试工作记忆。请画出实验流程图&#xff0c;叙述实验测试目标&#xff0c;并分析实验结果。 举例&#xff1a;一般我们选择n_back来测试对数字或字母的记忆&#xff0c;选择色块实…

[深度学习]卷积神经网络的概念,入门构建(代码实例)

# 不再任何人,任何组织的身上倾注任何的感情,或许这就是能活得更开心的办法 0.写在前面: 卷积神经网络的部分在之前就已经有所接触,这里重新更全面地总结一下关于深度学习中卷积神经网络的部分.并且在这里对如何构建代码,一些新的思想和网络做出一点点补充,同时会持续更新一些…

传递函数的推导和理解

传递函数的推导和理解 假设有一个线性系统&#xff0c;在一般情况下&#xff0c;它的激励 x ( t ) x(t) x(t)与响应 y ( t ) y(t) y(t)所满足的的关系&#xff0c;可用下列微分方程来表示&#xff1a; a n y ( n ) a n − 1 y ( n − 1 ) a n − 2 y ( n − 2 ) ⋯ a 1 y…

k8s上Pod生命周期、重启策略、容器探测简介

目录 一.Pod的创建过程 二.Pod的终止过程 三.Pod的重启策略&#xff08;restartPolicy&#xff09; 1.Always 2.OnFailture 3.Never 4.示例 四.Pod生命周期内的5种状态&#xff08;相位&#xff09; 1.Pending 2.Running 3.Succeeded 4.Failed 5.Unknown 五.初始…

Pytorch reshape用法

这里-1是指未设定行数&#xff0c;程序自动计算&#xff0c;所以这里-1表示任一正整数 example reshape(-1, 1) 表示&#xff08;任意行&#xff0c;1列&#xff09;&#xff0c;4行4列变为16行1列reshape(1, -1) 表示&#xff08;1行&#xff0c;任意列&#xff09;&#xf…

微内核操作系统

微内核操作系统 采用微内核结构的操作系统与传统的操作系统相比&#xff0c;其优点是提高了系统的灵活性、可扩充性&#xff0c;增强了系统的可靠性&#xff0c;提供了对分布式系统的支持。其原因如下&#xff1a; ① 灵活性和可扩展性&#xff1a;由于微内核OS的许多功能是由…

SpringCache

1、基本信息 Spring缓存方案&#xff1a;JDK内置的缓存(ConcurrentHashMap)、第三方缓存组件(Caffeine)、分布式的缓存实现(Memcahed、Redis)。 ConcurrentHashMap是JUC之中提供最为重要的技术实现。SpringCache之中为了便于缓存结构的管理&#xff0c;在“org.s…

flutter TabBar指示器

第一层tabView import package:jade/configs/PathConfig.dart; import package:jade/customWidget/MyCustomIndicator.dart; importpackage:jade/homePage/promotion/promotionPost/MyPromotionListMainDesc.dart; import package:jade/homePage/promotion/promotionPost/MyPr…