【Nuxt】内置组件和全局样式使用
内置组件
Nuxt3框架也提供一些内置的组件,常用的如下:
- SEO组件:Html、Body、Head、Title、Meta、Style、Link、NoScript、Base
- NuxtWelcome:欢迎页面组件,该组件是@nuxt/ui的部分
- NuxtLayout:是Nuxt自带的页面布局组件
- NuxtPage:是Nuxt自带的页面占位组件
- 需要显示位于目录中的顶级或嵌套页面pages/
- 是对router-view的封装
- ClientOnly:该组件中默认插槽的内容只在客户端渲染
- 而fallback插槽的内容只在服务器端渲染
- NuxtLink:是Nuxt自带的页面导航组件
- 是Vue Router
<RouterLink>组件和HTML<a>标签的封装
- 是Vue Router

<script setup lang="ts"></script><template><h2>这是首页</h2>
<!-- 1. 普通用法--><ClientOnly fallback-tag="h3" fallback="loading..."><h3>我只会在客户端渲染</h3></ClientOnly>
<!-- 2. 插槽用法--><ClientOnly><h3>我只会在客户端渲染</h3><template #fallback><h3>loading...</h3></template></ClientOnly>
</template><style scoped></style>
<template><div>
<!-- NuxtPage 是对 router-view 的封装--><NuxtPage /></div>
</template>
<script setup></script>
全局样式
基础使用:
- 在assets(非必须)中编写全局样式,比如:globel.scss
- 接着在nuxt.config中的css选项中配置
- 接着执行npm i -D sass即可

main.css
.page-container {color: hotpink;
}
global.scss
$color: lightBlue;.global-container {color: $color;
}
variables.scss
$fsColor: lightgreen;
@mixin border() {border: 1px solid $fsColor;
}
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: {enabled: true},css: ['@/assets/styles/main.css','@/assets/styles/global.scss']
});
index.vue
<script setup lang="ts"></script><template><h2 class="page-container">这是首页</h2><!-- 1. 普通用法--><ClientOnly fallback-tag="h3" fallback="loading..."><h3 class="global-container">我只会在客户端渲染</h3></ClientOnly><!-- 2. 插槽用法--><ClientOnly><h3 class="home-container">我只会在客户端渲染</h3><template #fallback><h3>loading...</h3></template></ClientOnly>
</template><style scoped lang="scss">
//第一种写法:@import 前后导入相同变量会出现覆盖的情况
//@import "@/assets/styles/variables.scss";//第二种写法:@use 使用命名空间(as * 默认不使用命名空间) 而且性能更好
@use "@/assets/styles/variables.scss" as myVariables;
.home-container {color: myVariables.$fsColor;@include myVariables.border();
}
</style>
app.vue
<template><div><div class="page-container">这是 app 页面</div><div class="global-container">这也是 app 页面</div>
<!-- NuxtPage 是对 router-view 的封装--><NuxtPage /></div>
</template>
<script setup></script>
<style scoped></style>
以上的情况配置中导入了 css 文件和 scss 全局样式文件,在单个组件中导入了 全局变量文件。
如果不在单个组件中导入 全局变量文件,也是可以在配置中导入的。
assets
index.vue
<script setup lang="ts"></script><template><h2 class="page-container">这是首页</h2><!-- 1. 普通用法--><ClientOnly fallback-tag="h3" fallback="loading..."><h3 class="global-container">我只会在客户端渲染</h3></ClientOnly><!-- 2. 插槽用法--><ClientOnly><h3 class="home-container">我只会在客户端渲染</h3><template #fallback><h3>loading...</h3></template></ClientOnly>
</template><style scoped lang="scss">
//第一种写法:@import 前后导入相同变量会出现覆盖的情况
//@import "@/assets/styles/variables.scss";//第二种写法:@use 使用命名空间(as * 默认不使用命名空间) 而且性能更好
//@use "@/assets/styles/variables.scss" as myVariables;
//@use "@/assets/styles/variables.scss" as *;
.home-container {color: $fsColor;@include border();
}
</style>
nuxt.config.ts
// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({compatibilityDate: '2024-04-03',devtools: {enabled: true},css: ['@/assets/styles/main.css','@/assets/styles/global.scss'],vite: {css: {preprocessorOptions: {scss: {// 会自动给 **scss 所有模块** 引入 variables.scssadditionalData: `@import "@/assets/styles/variables.scss";`}}}}
});

相关文章:
【Nuxt】内置组件和全局样式使用
内置组件 Nuxt3框架也提供一些内置的组件,常用的如下: SEO组件:Html、Body、Head、Title、Meta、Style、Link、NoScript、BaseNuxtWelcome:欢迎页面组件,该组件是nuxt/ui的部分NuxtLayout:是Nuxt自带的页面布局组件NuxtPage:是N…...
Java中spring boot validation 自定义注解使用
创建一个注解 Target({ElementType.FIELD})//需要写注解的三三个要素 Retention(RUNTIME) Documented Constraint(validatedBy {IsSystemYesNoVaildation.class})//绑定 在这里会报错 你需要去实现 public interface IsSystemYesNo {String message() default "数据字典&…...
Android笔试面试题AI答之广播(1)
文章目录 1.简述广播的分类和使用场景 ?一、广播分类二、使用场景举例总结 2.广播的两种注册方式的区别?1. 注册位置与方式2. 生命周期与持久性3. 接收广播的时机4. 安全性与权限5. 优先级与有序广播总结 3.简述广播发送和接收的原理 ?一、广…...
微软商店无法加载,检查你的连接-解决方案
微软商店默认直连国内的服务器。 如果有代理,关闭代理就可以恢复网络了。 但是我就是想用代理,我感觉代理更快, 搜索了很多办法,都没有生效。 然后我在哔哩哔哩的视频下方,看到大家留言,测试了一下&#x…...
数据结构实验报告-树与二叉树
桂 林 理 工 大 学 实 验 报 告 一、实验名称: 实验6 树和二叉树 二、实验内容: 1.编写二叉树的递归遍历算法,实现:给定一棵二叉树的“扩展先序遍历序列”,创建这棵二叉树。 (1)输出二叉树的先序遍历的结点序列。 (2)输出二…...
基于Django+MySQL球馆场地预约系统的设计与实现(源码+论文+部署讲解等)
博主介绍:✌全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术栈介绍:我是程序员阿龙ÿ…...
8 MQTT
8 MQTT 1、相关概念2、MQTT的操作过程3、MQTT协议3.1 固定报文3.2 连接报文3.3 确认连接请求3.4 构造订阅报文3.5 订阅确认报文3.6 发布报文3.7 其他报文 1、相关概念 MQTT [1] 全名为Message Queuing Telemetry Transport,是一种基于TCP/IP协议上传输的轻量级通信…...
【文件系统】抽象磁盘的存储结构 CHS寻址法 | sector数组 | LAB数组
目录 1.为什么要抽象 2.逻辑抽象_版本1 2.1sector数组 2.2index转化CHS 3.逻辑抽象_版本2 3.1LBA数组 3.2LAB下标转化sector下标 文件其实就是在磁盘中占有几个扇区的问题❗文件是很多个sector的数组下标❗文件是有很多块构成的❗❗文件由很多扇区构成------>文件…...
基于python旅游推荐系统(源码+论文+部署讲解等)
博主介绍:✌全网粉丝10W,csdn特邀作者、博客专家、CSDN新星计划导师、Java领域优质创作者,博客之星、掘金/华为云/阿里云/InfoQ等平台优质作者、专注于Java技术领域和学生毕业项目实战,高校老师/讲师/同行前辈交流✌ 技术栈介绍:我是程序员阿龙ÿ…...
Mysql大单表JSON优化
优化方案 MySQL 8.0.32 中,有几种方法可以优化存储 JSON 字符串的数据表。以下是一些建议,可以帮助您减少存储空间: 使用压缩: MySQL 8.0 支持表级压缩,可以通过修改表来启用压缩。 ALTER TABLE your_table ROW_FORMATCOMPRESS…...
电脑开机启动项管理小工具,绿色免安装
HiBit Startup Manager 是一款功能强大的启动项管理工具,旨在帮助用户管理和优化计算机的自动启动程序。该软件通过添加或删除应用程序、编辑它们的属性以及管理流程、服务、任务调度程序和上下文菜单来实现这一目标。 HiBit Startup Manager 提供了以下主要功能&a…...
一例AutoHotkey语言生成的文件夹病毒分析
概述 这是一个使用AutoHotkey语言编写的文件夹病毒,使用ftp服务器来当作C2,通过U盘传播,样本很古老,原理也很简单,这种语言的样本还是第一次见到,记录一下。 样本的基本信息 PE32库: AutoIt(3.XX)[-]编译…...
【机器学习第7章——贝叶斯分类器】
机器学习第7章——贝叶斯分类器 7.贝叶斯分类器7.1贝叶斯决策论7.2 朴素贝叶斯分类器条件概率的m估计 7.3 极大似然估计优点基本原理 7.4 贝叶斯网络7.5 半朴素贝叶斯分类器7.6 EM算法7.7 EM算法实现 7.贝叶斯分类器 7.1贝叶斯决策论 一个医疗判断问题 有两个可选的假设&#…...
C++ QT开发 学习笔记(3)
C QT开发 学习笔记(3) - WPS项目 标准对话框 对话框类说明静态函数函数说明QFileDialog文件对话框getOpenFileName()选择打开一个文件getOpenFileNames()选择打开多个文件getSaveFileName()选择保存一个文件getExistingDirectory()选择一个己有的目录getOpenFileUrl()选择打幵…...
【Python实战】如何优雅地实现文字 二维码检测?
前几篇,和大家分享了如何通过 Python 和相关库,自动化处理 PDF 文档,提高办公效率。 【Python实战】自动化处理 PDF 文档,完美实现 WPS 会员功能【Python实战】如何优雅地实现 PDF 去水印?【Python实战】一键生成 PDF…...
行为型设计模式3:模板方法/备忘录/解释器/迭代器
设计模式:模板方法/备忘录/解释器/迭代器 (qq.com)...
思源笔记软件的优缺点分析
在过去一年里,我用了很多款笔记,从word文档到onenote到语雀再到思源,最后坚定的选择了思源笔记 使用感受 首先是用word文档来记笔记,主要是开始时不知道笔记软件怎么好用,等到笔记越来越膨胀的时候我发现,…...
追问试面试系列:Dubbo
欢迎来到Dubbo系列,在面试中被问到Dubbo相关的问题时,大部分都是简历上写了Dubbo,或者面试官想尝试问问你对Dubbo是否了解。 本系列主要是针对面试官通过一个点就使劲儿往下问的情况。 面试官:说说你们项目亮点 好的面试官 我们这个项目的技术亮点在于采用了Spring Cloud…...
动手学深度学习V2每日笔记(卷积层)
本文主要参考沐神的视频教程 https://www.bilibili.com/video/BV1L64y1m7Nh/p2&spm_id_from333.1007.top_right_bar_window_history.content.click&vd_sourcec7bfc6ce0ea0cbe43aa288ba2713e56d 文档教程 https://zh-v2.d2l.ai/ 本文的主要内容对沐神提供的代码中个人不…...
qcom ucsi probe
ucsi glink 注册一个ucsi 设备,和pmic glink进行通信,ucsi作为pmic glink的一个client。 lkml的patch https://lkml.org/lkml/2023/1/30/233 dtsi中一般会定义 qcom,ucsi-glink 信息,用于和驱动进行匹配 static const struct of_device_id …...
XCTF-web-easyupload
试了试php,php7,pht,phtml等,都没有用 尝试.user.ini 抓包修改将.user.ini修改为jpg图片 在上传一个123.jpg 用蚁剑连接,得到flag...
地震勘探——干扰波识别、井中地震时距曲线特点
目录 干扰波识别反射波地震勘探的干扰波 井中地震时距曲线特点 干扰波识别 有效波:可以用来解决所提出的地质任务的波;干扰波:所有妨碍辨认、追踪有效波的其他波。 地震勘探中,有效波和干扰波是相对的。例如,在反射波…...
CTF show Web 红包题第六弹
提示 1.不是SQL注入 2.需要找关键源码 思路 进入页面发现是一个登录框,很难让人不联想到SQL注入,但提示都说了不是SQL注入,所以就不往这方面想了 先查看一下网页源码,发现一段JavaScript代码,有一个关键类ctfs…...
以下是对华为 HarmonyOS NETX 5属性动画(ArkTS)文档的结构化整理,通过层级标题、表格和代码块提升可读性:
一、属性动画概述NETX 作用:实现组件通用属性的渐变过渡效果,提升用户体验。支持属性:width、height、backgroundColor、opacity、scale、rotate、translate等。注意事项: 布局类属性(如宽高)变化时&#…...
中南大学无人机智能体的全面评估!BEDI:用于评估无人机上具身智能体的综合性基准测试
作者:Mingning Guo, Mengwei Wu, Jiarun He, Shaoxian Li, Haifeng Li, Chao Tao单位:中南大学地球科学与信息物理学院论文标题:BEDI: A Comprehensive Benchmark for Evaluating Embodied Agents on UAVs论文链接:https://arxiv.…...
postgresql|数据库|只读用户的创建和删除(备忘)
CREATE USER read_only WITH PASSWORD 密码 -- 连接到xxx数据库 \c xxx -- 授予对xxx数据库的只读权限 GRANT CONNECT ON DATABASE xxx TO read_only; GRANT USAGE ON SCHEMA public TO read_only; GRANT SELECT ON ALL TABLES IN SCHEMA public TO read_only; GRANT EXECUTE O…...
HarmonyOS运动开发:如何用mpchart绘制运动配速图表
##鸿蒙核心技术##运动开发##Sensor Service Kit(传感器服务)# 前言 在运动类应用中,运动数据的可视化是提升用户体验的重要环节。通过直观的图表展示运动过程中的关键数据,如配速、距离、卡路里消耗等,用户可以更清晰…...
Go 并发编程基础:通道(Channel)的使用
在 Go 中,Channel 是 Goroutine 之间通信的核心机制。它提供了一个线程安全的通信方式,用于在多个 Goroutine 之间传递数据,从而实现高效的并发编程。 本章将介绍 Channel 的基本概念、用法、缓冲、关闭机制以及 select 的使用。 一、Channel…...
LLMs 系列实操科普(1)
写在前面: 本期内容我们继续 Andrej Karpathy 的《How I use LLMs》讲座内容,原视频时长 ~130 分钟,以实操演示主流的一些 LLMs 的使用,由于涉及到实操,实际上并不适合以文字整理,但还是决定尽量整理一份笔…...
并发编程 - go版
1.并发编程基础概念 进程和线程 A. 进程是程序在操作系统中的一次执行过程,系统进行资源分配和调度的一个独立单位。B. 线程是进程的一个执行实体,是CPU调度和分派的基本单位,它是比进程更小的能独立运行的基本单位。C.一个进程可以创建和撤销多个线程;同一个进程中…...
