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

Nuxt快速学习开发 - Nuxt3静态资源Assets

Nuxt 使用两个目录来处理样式表、字体或图像等资产。

public/目录内容按原样在服务器根目录中提供。
assets/目录包含您希望构建工具(Vite 或 webpack)处理的所有资产。

public/目录
public目录用作静态资产的公共服务器,可在您的应用程序定义的URL上公开访问。
public/您可以从您的应用程序代码或通过根 URL 从浏览器中获取目录中的文件/。
例如,引用public/img/目录中的图像文件,可在静态 URL 获得/img/nuxt.png:

在这里插入图片描述

//app.vue
<template><img src="/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

assets/目录

Nuxt 使用Vite或webpack来构建和捆绑您的应用程序。这些构建工具的主要功能是处理 JavaScript 文件,但它们可以通过插件(对于 Vite)或加载器(对于 webpack)进行扩展,以处理其他类型的资产,如样式表、字体或 SVG。此步骤主要出于性能或缓存目的(例如样式表缩小或浏览器缓存失效)转换原始文件。
Nuxt 使用该assets/目录来存储这些文件,但该目录没有自动扫描功能,可以为它使用任何其他名称。
例如,如果构建工具配置为处理此文件扩展名,则引用将被处理的图像文件:

//app.vue
<template><img src="~/assets/img/nuxt.png" alt="Discover Nuxt 3" />
</template>

可以通过配置nuxt.config.ts配置别名,以便更好的访问资源,例:

//``nuxt.config.ts
export default defineNuxtConfig({alias: {//配置别名images: fileURLToPath(new URL("./assets/img", import.meta.url)),style: fileURLToPath(new URL("./assets/style", import.meta.url)),data: fileURLToPath(new URL("./assets/other", import.meta.url)),},)}
//app.vue
<template> <div> <img src="~/img/nuxt.png" /> </div> </template>

全局样式导入

要在 Nuxt 组件样式中全局插入语句,需要再nuxt.config.ts中配置vite选项 资产/_colors.scss资产/_colors.sass

assets/_colors.scss

$primary: #49240F;
$secondary: #E4A79D;
//``nuxt.config.ts
export default defineNuxtConfig({vite: {css: {preprocessorOptions: {sass: {additionalData: '@use "@/assets/_colors.scss" as *;'}}}}
})

相关文章:

Nuxt快速学习开发 - Nuxt3静态资源Assets

Nuxt 使用两个目录来处理样式表、字体或图像等资产。 public/目录内容按原样在服务器根目录中提供。 assets/目录包含您希望构建工具&#xff08;Vite 或 webpack&#xff09;处理的所有资产。 public/目录 public目录用作静态资产的公共服务器&#xff0c;可在您的应用程序定…...

为什么企业需要数据挖掘平台?哪个比较好呢?

什么是数据挖掘&#xff1f; 数据挖掘就是从大量的数据中去发现有用的信息&#xff0c;然后根据这些信息来辅助决策。听起来是不是跟传统的数据分析很像呢&#xff1f;实际上&#xff0c;数据挖掘就是智能化的数据分析&#xff0c;它们的目标都是一样的。但是&#xff0c…...

leetCode-hot100-链表专题

leetCode-hot100-链表专题 链表简介单链表单链表的使用例题206.反转链表19.删除链表的倒数第N个结点24.两两交换链表中的节点25.K个一组翻转链表 双向链表双向链表的使用 循环链表61.旋转链表141.环形链表142.环形链表Ⅱ LinkedListLinkedList的使用 链表简介 参考博客&#x…...

【ai】tx2-nx:配置tritonserver2.17.0-jetpack4.6 环境并运行例子

2.17.0 for jetpack 4.6运行需要 如果在jetson上构建Triton : Note: When building Triton on Jetson, you will require a newer version of cmake. We recommend using cmake 3.21.0. Below is a script to upgrade your cmake version to 3.21.0. You can use cmake 3.18.4…...

Spring和Spring Boot常用注解介绍及使用

Spring和Spring Boot框架通过丰富的注解集简化了Java开发&#xff0c;使得配置更加简洁且易于理解。 下面是一些常用的Spring和Spring Boot注解及其使用方式的简介&#xff1a; 目录 1. Component 2. Service 3. Repository 4. Controller 5. RestController 6. Autowire…...

【计算机毕业设计】211校园约拍微信小程序

&#x1f64a;作者简介&#xff1a;拥有多年开发工作经验&#xff0c;分享技术代码帮助学生学习&#xff0c;独立完成自己的项目或者毕业设计。 代码可以私聊博主获取。&#x1f339;赠送计算机毕业设计600个选题excel文件&#xff0c;帮助大学选题。赠送开题报告模板&#xff…...

笨蛋学算法之LeetCodeHot100_1_两数之和(Java)

package com.lsy.leetcodehot100;public class _Hot1_两数之和 {//自写方法public static int[] twoSum1(int[] nums, int target) {//定义存放返回变量的数组int[] arr new int[2];//遍历整个数组for (int i 0; i < nums.length; i) {//从第二个数开始相加判断for (int j…...

用ip link add link命令创建vlan子设备

用ip link add link命令创建vlan子设备 ip link add link 命令用于在 Linux 系统中创建网络设备&#xff0c;其中可以用它来创建 VLAN (Virtual Local Area Network) 子接口&#xff0c;这是一个典型的用法。 VLAN是一种在二层网络&#xff08;即数据链路层&#xff09;上区分…...

AD复用布局布线

在用AD软件绘制PCB时&#xff0c;如果有多个部分布线相同&#xff0c;则可以使用复用布局布线功能&#xff0c;加快并且方便PCB的绘制。 一、创建Room 1、绘制好的电路图创建Room 2、需要拷贝的电路图创建Room 二、PCB List操作 1、PCB List内设置 2、复制绘制完的线路图 3、…...

【深度学习驱动流体力学】采集OpenFOAM仿真的流体力学数据送入到强化学习DQN模型训练

目录 技术原理1. 数据准备与环境构建2. DQN模型的设计与训练3. 训练过程中的监控与可视化训练记录参考技术原理 1. 数据准备与环境构建 首先,数据从VTK文件中读取并处理,这些文件包含流体速度场数据。通过PyVista库提取速度场信息,并将其存储在NumPy数组中。数据集随后被划…...

国内公开数据

以下是一些关于国内政府部门公布的数据或互联网上开放数据的资源&#xff0c;包括CSV、JSON和Parquet格式&#xff1a; 国内政府部门公开数据 中国政府数据开放平台 链接: 数据开放平台概要: 提供来自中国各级政府的公开数据集&#xff0c;数据格式包括CSV、JSON等。 上海市公…...

QT QByteArray 的用法

QByteArray 是 Qt 中用于处理原始字节数据的类&#xff0c;类似于标准库中的 std::vector<char> 或 std::string&#xff0c;但具有更多适合Qt框架的功能。它可以用来处理文本和二进制数据&#xff0c;并提供了一些方便的方法进行数据操作。下面是一些常见的用法示例&…...

InPixio Photo Cutter v10 解锁版安装教程 (懒人抠图工具)

前言 InPixio Photo Cutter是一款懒人抠图工具&#xff0c;采用了增强的算法切割技术&#xff0c;可以在不影响图像质量的情况下&#xff0c;允许用户从照片中删除任何物体或人物&#xff0c;并且保持其完整的质量。你只需点击几下鼠标&#xff0c;便可从照片中剪下任何细节、…...

Java17 --- SpringSecurity之OAuth2

一、OAuth2 1.1、使用github以授权码方式 1.1.1、注册应用程序 1.1.2、测试代码 pom依赖 <dependency><groupId>org.springframework.boot</groupId><artifactId>spring-boot-starter-oauth2-client</artifactId></dependency> spring…...

服务器上线的一些事

最近不少人在上线上遇到问题 对于最近的上戏 进行一个坑或操作步骤的总结 以及遇到这些之后如何做 关于选项的选择 1 对于是否要在一个小时前释放 这个是看个人的 2 对于选择一台服务器还是两台呢&#xff1f;这个是最后限制 一台 这个免费的服务器 是有一个两百的额度的 选择…...

OceanBase-docker安装、连接数据库、修改mysql用户密码

OceanBase-docker安装、连接数据库、修改mysql用户密码 安装拉取镜像开启容器验证 连接数据库1.直接连接的方式修改数据库密码2.先进入镜像再连接数据库的方式进入镜像无密码有秘密 本人使用docker安装的oceanbase 安装 拉取镜像 docker pull oceanbase/oceanbase-ce:3.1.4 …...

浪潮(Inspur)服务器硬件监控指标解读

随着企业业务的快速发展&#xff0c;服务器的稳定运行成为保障业务连续性的关键。浪潮&#xff08;Inspur&#xff09;服务器以其卓越的性能和稳定性&#xff0c;在数据中心中扮演着重要角色。 为了确保服务器的稳定运行&#xff0c;监控易作为一款专业的IT基础设施监控软件&am…...

极简opencv操作xml文件

目标 修改xml文件&#xff0c;先产生一个临时文件&#xff0c;拷贝&#xff0c;修改&#xff0c;改名&#xff0c;使用opencv 非常简单地就可以搞定配置xml文件 code #include <opencv2/opencv.hpp> #include <iostream> #include <opencv2/core/utils/files…...

更换域名流程记录

华为云的服务器&#xff0c;阿里云购买的域名。 1.购买域名 2.在域名服务商绑定服务器ip&#xff08;以阿里云为例&#xff09; 控制台->域名控制台->域名列表->点击域名->域名解析->添加记录 记录类型填A , 主机记录“”或“www”&#xff0c;记录值填服务器i…...

CSS 实现电影信息卡片

CSS 实现电影信息卡片 效果展示 CSS 知识点 CSS 综合知识运用 页面整体布局 <div class"card"><div class"poster"><img src"./poster.jpg" /></div><div class"details"><img src"./avtar…...

深度学习在微纳光子学中的应用

深度学习在微纳光子学中的主要应用方向 深度学习与微纳光子学的结合主要集中在以下几个方向&#xff1a; 逆向设计 通过神经网络快速预测微纳结构的光学响应&#xff0c;替代传统耗时的数值模拟方法。例如设计超表面、光子晶体等结构。 特征提取与优化 从复杂的光学数据中自…...

React hook之useRef

React useRef 详解 useRef 是 React 提供的一个 Hook&#xff0c;用于在函数组件中创建可变的引用对象。它在 React 开发中有多种重要用途&#xff0c;下面我将全面详细地介绍它的特性和用法。 基本概念 1. 创建 ref const refContainer useRef(initialValue);initialValu…...

Unity3D中Gfx.WaitForPresent优化方案

前言 在Unity中&#xff0c;Gfx.WaitForPresent占用CPU过高通常表示主线程在等待GPU完成渲染&#xff08;即CPU被阻塞&#xff09;&#xff0c;这表明存在GPU瓶颈或垂直同步/帧率设置问题。以下是系统的优化方案&#xff1a; 对惹&#xff0c;这里有一个游戏开发交流小组&…...

【WiFi帧结构】

文章目录 帧结构MAC头部管理帧 帧结构 Wi-Fi的帧分为三部分组成&#xff1a;MAC头部frame bodyFCS&#xff0c;其中MAC是固定格式的&#xff0c;frame body是可变长度。 MAC头部有frame control&#xff0c;duration&#xff0c;address1&#xff0c;address2&#xff0c;addre…...

mongodb源码分析session执行handleRequest命令find过程

mongo/transport/service_state_machine.cpp已经分析startSession创建ASIOSession过程&#xff0c;并且验证connection是否超过限制ASIOSession和connection是循环接受客户端命令&#xff0c;把数据流转换成Message&#xff0c;状态转变流程是&#xff1a;State::Created 》 St…...

【Go】3、Go语言进阶与依赖管理

前言 本系列文章参考自稀土掘金上的 【字节内部课】公开课&#xff0c;做自我学习总结整理。 Go语言并发编程 Go语言原生支持并发编程&#xff0c;它的核心机制是 Goroutine 协程、Channel 通道&#xff0c;并基于CSP&#xff08;Communicating Sequential Processes&#xff0…...

CRMEB 框架中 PHP 上传扩展开发:涵盖本地上传及阿里云 OSS、腾讯云 COS、七牛云

目前已有本地上传、阿里云OSS上传、腾讯云COS上传、七牛云上传扩展 扩展入口文件 文件目录 crmeb\services\upload\Upload.php namespace crmeb\services\upload;use crmeb\basic\BaseManager; use think\facade\Config;/*** Class Upload* package crmeb\services\upload* …...

大语言模型(LLM)中的KV缓存压缩与动态稀疏注意力机制设计

随着大语言模型&#xff08;LLM&#xff09;参数规模的增长&#xff0c;推理阶段的内存占用和计算复杂度成为核心挑战。传统注意力机制的计算复杂度随序列长度呈二次方增长&#xff0c;而KV缓存的内存消耗可能高达数十GB&#xff08;例如Llama2-7B处理100K token时需50GB内存&a…...

关键领域软件测试的突围之路:如何破解安全与效率的平衡难题

在数字化浪潮席卷全球的今天&#xff0c;软件系统已成为国家关键领域的核心战斗力。不同于普通商业软件&#xff0c;这些承载着国家安全使命的软件系统面临着前所未有的质量挑战——如何在确保绝对安全的前提下&#xff0c;实现高效测试与快速迭代&#xff1f;这一命题正考验着…...

站群服务器的应用场景都有哪些?

站群服务器主要是为了多个网站的托管和管理所设计的&#xff0c;可以通过集中管理和高效资源的分配&#xff0c;来支持多个独立的网站同时运行&#xff0c;让每一个网站都可以分配到独立的IP地址&#xff0c;避免出现IP关联的风险&#xff0c;用户还可以通过控制面板进行管理功…...