当前位置: 首页 > news >正文

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",},],
});

相关文章:

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

引入外部JS&#xff1a; <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区…...

Docker 可视化面板 ——Portainer

Portainer 是一个非常好用的 Docker 可视化面板&#xff0c;可以让你轻松地管理你的 Docker 容器。 官网&#xff1a;Portainer: Container Management Software for Kubernetes and Docker 【Docker系列】超级好用的Docker可视化工具——Portainer_哔哩哔哩_bilibili 环境 …...

Java 教育局民办教育信息服务与监管平台

1) 项目背景 按照《中华人民共和国民办教育促进法》和《中华人民共和国政府信息公开条例》的相关规定&#xff0c;为满足学生和家长、社会各界获取权威信息的需求&#xff0c;着力解决服务老百姓最后一公里问题&#xff0c;达到宣传民办教育和引导家长择校的效果&#xff0…...

小迪笔记(1)——操作系统文件下载反弹SHELL防火墙绕过

名词解释 POC&#xff1a;验证漏洞存在的代码&#xff1b; EXP&#xff1a;利用漏洞的代码&#xff1b; payload&#xff1a;漏洞利用载荷&#xff0c; shellcode&#xff1a;漏洞代码&#xff0c; webshell&#xff1a;特指网站后门&#xff1b; 木马&#xff1a;强调控制…...

Pytorch D2L Subplots方法对画图、图片处理

问题代码 def show_images(imgs, num_rows, num_cols, titlesNone, scale1.5): #save """绘制图像列表""" figsize (num_cols * scale, num_rows * scale) _, axes d2l.plt.subplots(num_rows, num_cols, figsizefigsize) axes axes.flatten…...

MATLAB算法实战应用案例精讲-【目标检测】YOLOV5(补充篇)

目录 算法原理 YOLOv5数据集训练 软硬件背景: 数据集准备 配置文件 模型训练...

WPF中可视化树和逻辑树的区别是什么

在WPF中&#xff0c;用户界面元素被组织成树形结构。这种结构主要分为两种&#xff1a;逻辑树&#xff08;Logical Tree&#xff09;和可视化树&#xff08;Visual Tree&#xff09;。它们在设计上各有特点和用途。 逻辑树&#xff08;Logical Tree&#xff09; 逻辑树是WPF中…...

小迪安全笔记(2)——web应用架构搭建漏洞HTTP数据包代理服务器

Web应用环境架构类 开发语言&#xff1a;php、java、python、ASP、ASPX等程序源码&#xff1a;用的人多了&#xff0c;就成CMS了。中间件容器&#xff1a;IIS、Apache、Nginx、Tomcat、Weblogic、Jboos、glasshfish等数据库类型&#xff1a;Access、Mysql、Mssql、Oracle、Redi…...

[AI]ChatGPT4 与 ChatGPT3.5 区别有多大

ChatGPT 3.5 注册已经不需要手机了&#xff0c;直接邮箱认证就可以&#xff0c;这可真算是好消息&#xff0c;坏消息是 ChatGPT 4 还是要收费。 那么 GPT-3.5 与 GPT-4 区别有多大呢&#xff0c;下面简单测试一下。 以从 TDengine 订阅数据为例&#xff0c;TDengine 算是不太小…...

node实战——koa实现文件上传

文章目录 ⭐前言⭐koa实现文件上传⭐foxapi测试⭐总结⭐结束⭐前言 大家好,我是yma16,本文分享关于node实战——node实战——koa实现文件上传。 本文适用对象:前端初学者转node方向,在校大学生,即将毕业的同学,计算机爱好者。 node系列往期文章 node_windows环境变量配置…...

C++中的this指针

C中的this指针 this 实际上是成员函数的一个形参&#xff0c;在调用成员函数时将对象的地址作为实参传递给 this。不过 this 这个形参是隐式的&#xff0c;它并不出现在代码中&#xff0c;而是在编译阶段由编译器默默地将它添加到参数列表中。 this指针是类的指针&#xff0c…...

分析日志的一般套路

日志文件很多怎么快速查看&#xff1f; 整机日志一般会有统一的文件名命名规则&#xff08;如包含时间点&#xff09;&#xff0c;可以根据问题现象时间点大致定位到相应的文件根据日志文件的修改时间属性&#xff0c;定位到相应的文件根据时间点全文件夹搜索内容&#xff0c;…...

使用Flink处理Kafka中的数据_题库子任务_Java语言实现

2024年职业院校技术大赛-高职大数据应用开发赛项专题。 使用Flink处理Kafka中的数据_题库子任务1、2、3_Java语言实现使用Flink处理Kafka中的数据_题库子任务4、5、6_Java语言实现使用Flink处理Kafka中的数据_题库子任务7、8、9_Java语言实现...

k8s运维管理

node管理 node隔离与恢复 1.使用patch命令 #实现node隔离调度 kubectl patch node node1 -p {"spec":{"unschedulable":true}} #节点信息多了一项SchedulingDisabled node1 Ready,SchedulingDisabled <none> 7d3h v1.18.20 #解除 kubectl …...

【最新Tomcat】IntelliJ IDEA通用配置Tomcat教程(超详细)

前言 IntelliJ IDEA是一个强大的集成开发环境&#xff0c;能够大大简化Java应用程序的开发和部署过程。而Tomcat作为一个流行的Java Web服务器&#xff0c;其与IntelliJ IDEA的整合能够提供便捷的开发环境&#xff0c;让开发人员更专注于代码的创作与优化。 在配置IntelliJ IDE…...

安装2023最新版PyCharm来开发Python应用程序

安装2023最新版PyCharm来开发Python应用程序 Install the Latest JetBrains PyCharm Community to Develop Python Applications Python 3.12.0最新版已经由其官网python.org发布&#xff0c;这也是2023年底的最新的版本。 0. PyCharm与Python 自从1991年2月20日&#xff0…...

【c++随笔13】多态

【c随笔13】多态 多态性&#xff08;Polymorphism&#xff09;在面向对象编程中是一个重要概念&#xff0c;它允许以统一的方式处理不同类型的对象&#xff0c;并在运行时动态确定实际执行的方法或函数。一、什么是多态性&#xff1f;1、关键概念&#xff1a;C的多态性2、多态定…...

数据结构【DS】图的应用

图的连通性问题 最少边数 最多边数 无向图非连通 &#x1d48e;&#x1d7ce; &#x1d48e;&#x1d48f;−&#x1d7d0;∗(&#x1d48f;−&#x1d7cf;)/&#x1d7d0; 无向图连通 &#x1d48e;&#x1d48f;−&#x1d7cf; &#x1d48e;&#x1d48f;∗(&#…...

图像滤波处理

滤波处理是图像处理中常用的技术之一&#xff0c;用于去除图像中的噪声、平滑图像、边缘检测等。以下是几种常见的滤波处理方法&#xff1a; 1. 均值滤波 (Mean Filtering) 原理&#xff1a; 均值滤波使用一个固定大小的滤波器&#xff0c;在图像上滑动并取周围像素的平均值来…...

中间件安全:Apache 目录穿透.(CVE-2021-41773)

中间件安全&#xff1a;Apache 目录穿透.&#xff08;CVE-2021-41773&#xff09; Apache 的 2.4.49、2.4.50 版本 对路径规范化所做的更改中存在一个路径穿越漏洞&#xff0c;攻击者可利用该漏洞读取到Web目录外的其他文件&#xff0c;如系统配置文件、网站源码等&#xff0c…...

Pixel Couplet Gen快速上手:三步完成像素春联生成器本地部署与微信小程序对接

Pixel Couplet Gen快速上手&#xff1a;三步完成像素春联生成器本地部署与微信小程序对接 1. 项目概览 Pixel Couplet Gen是一款融合传统春节文化与现代像素艺术风格的AI春联生成器。通过ModelScope大模型驱动&#xff0c;它能够将用户输入的文字愿望转化为富有创意的像素风格…...

Qt消息框(QMessageBox)的全面使用指南

1.1 预定义消息框类型Qt提供6种标准消息类型&#xff0c;通过静态方法快速调用&#xff1a;类型调用方法适用场景消息提示框QMessageBox::information()普通信息展示警告提示框QMessageBox::warning()操作风险警示错误提示框QMessageBox::critical()严重错误警示确认选择框QMes…...

Wan2.2-I2V-A14B多场景应用:文旅宣传/电商主图/社交媒体动态生成

Wan2.2-I2V-A14B多场景应用&#xff1a;文旅宣传/电商主图/社交媒体动态生成 1. 开箱即用的视频创作利器 想象一下&#xff0c;你只需要输入一段文字描述&#xff0c;就能自动生成一段高清视频。这就是Wan2.2-I2V-A14B文生视频模型带来的革命性体验。无论你是文旅行业的宣传人…...

Go Routine 调度与系统线程绑定

Go语言凭借其轻量级并发模型Goroutine&#xff0c;成为高并发场景下的明星语言。Goroutine的魔力源于其高效的调度机制&#xff0c;而它与系统线程的绑定关系更是性能优化的关键。本文将揭开Goroutine调度与线程绑定的技术面纱&#xff0c;从运行时调度器、线程池管理、工作窃取…...

第 2 章 控制流 知识点精讲

2.1 布尔值核心知识点布尔值是表示真假的两种状态&#xff0c;是控制流的基础。True&#xff1a;表示真、成立、肯定。False&#xff1a;表示假、不成立、否定。关键特性布尔值是 Python 的基本数据类型之一&#xff0c;类型为 bool。它们是关键字&#xff0c;必须大写。在数值…...

开源工具DLSS Swapper:提升游戏帧率的智能版本管理方案

开源工具DLSS Swapper&#xff1a;提升游戏帧率的智能版本管理方案 【免费下载链接】dlss-swapper 项目地址: https://gitcode.com/GitHub_Trending/dl/dlss-swapper 在3A游戏画面日益精美的今天&#xff0c;如何在不牺牲画质的前提下提升帧率成为玩家面临的普遍挑战。…...

智慧微电网设计模拟:最优光储配置一键生成

在新能源渗透率持续提升的背景下&#xff0c;智慧微电网作为分布式能源利用的核心载体&#xff0c;其光储配置的合理性直接决定能源利用效率与经济效益。传统配置设计依赖人工测算&#xff0c;存在耗时久、参数匹配度低、优化空间有限等问题&#xff0c;而智慧微电网设计模拟系…...

SEO_避开常见误区,正确理解SEO的核心价值(127 )

SEO的核心价值&#xff1a;避开常见误区&#xff0c;正确理解 在当今互联网时代&#xff0c;SEO&#xff08;搜索引擎优化&#xff09;无疑是提升网站流量、吸引潜在客户的重要手段。许多企业在SEO实践中常常陷入一些误区&#xff0c;无法正确理解SEO的核心价值&#xff0c;导…...

Enhancing Large Language Model Reasoning with Knowledge Graph Paths: A Faithful and Interpretable Ap

1. 为什么大模型需要知识图谱的"导航系统"&#xff1f; 想象一下&#xff0c;你被突然扔进一个陌生城市&#xff0c;手上只有一本过期的旅游指南。这时候如果有个本地人拿着最新地图给你指路&#xff0c;是不是完全不一样&#xff1f;这就是当前大语言模型&#xff0…...

NSSCTF做题记录十 | [巅峰极客 2022 决赛]开端:strangeTempreture

[巅峰极客 2022 决赛]开端&#xff1a;strangeTempreture随便点击一个流量包&#xff0c;右击点击追踪流&#xff0c;TCP 流把这几个字母拼接到一起&#xff0c;下面还有很多ZmxhZ3s5N2JmZWIwMy1mYTVjLWFhNmYtYWQxZS05YzVkMzhjNzQ0OWV9base64 解码&#xff0c;得到 flagflag{97…...