NUXT3学习日记二(样式配置、引入组件库、区分在服务端还是在客户端渲染)

上一章已经给大家分享官网下载的nuxt3了,下面正式进入我所要说的内容吧

一、初始化样式

想必大家从我的git下载下来的nuxt3,能看到nuxt.config.ts这个文件了吧。

这里我们有两种css配置方式

1、css:['~/assets/base.scss']

这种方式不能在scss文件中定义变量

2、下面这种方式可以使用变量,变量以$开头

使用scss的方式和在vue3中一样:

 

二、引入element plus/nuxt

通过下载命令:npm i element-plus @element-plus/nuxt -D 下载组件库

组件库网址:https://nuxt.com/modules/element-plus#exclude

由于我们没有main.js,所以我们需要在nuxt.config.ts文件中进行配置组件库

如下:

三、另外,怎么区别是服务端还是客户端渲染呢?

if里是服务端,else中是客户端,另外在控制台输出的带有SSR标志的服务端渲染输出的结果,同时服务端渲染也能在vscode终端输出,如图所示:

 

好了,今天就到这里,之后我会给大家分享nuxt3中路由的基本使用,敬请期待!

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

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

相关文章

2024AAAI | DiffRAW: 利用扩散模型从手机RAW图生成单反相机质量的RGB图像

文章标题:《DiffRAW: Leveraging Diffusion Model to Generate DSLR-Comparable Perceptual Quality sRGB from Smartphone RAW Images》 原文链接:DiffRAW 本文是清华大学深圳研究院联合华为发表在AAAI-2024上的论文(小声bb:华…

计算机视觉 ---图像模糊

1、图像模糊的作用: 减少噪声: 在图像获取过程中,例如通过相机拍摄或者传感器采集,可能会受到各种因素的干扰,从而引入噪声。这些噪声在图像上表现为一些孤立的、不符合图像主体内容的像素变化,如椒盐噪声&…

串口DMA接收不定长数据

STM32F767—>串口通信接收不定长数据的处理方法_stm32串口超时中断-CSDN博客 STM32-HAL库串口DMA空闲中断的正确使用方式解析SBUS信号_stm32 hal usart2 dma-CSDN博客 #define USART1_RxBuffSize 100 extern DMA_HandleTypeDef hdma_usart1_rx; //此处声明的变量在…

web实验3:虚拟主机基于不同端口、目录、IP、域名访问不同页面

创建配置文件: 创建那几个目录及文件,并且写内容: 为网卡ens160添加一个 IPv4 地址192.168.234.199/24: 再重新激活一下网卡ens160: 重启服务: 关闭防火墙、改宽松模式: 查看nginx端口监听情况:…

Jmeter中的监听器(二)

5--JSR223 Listener 用途 自定义数据处理:使用脚本语言处理测试结果,实现高度定制化的数据处理和分析。实时监控:实时处理和显示测试结果。集成外部系统:将测试结果发送到外部系统进行进一步处理和分析。日志记录:记…

DP动态规划基础题(Kadane算法)

动态规划(Dynamic Programming,简称DP)是一种在数学、管理科学、计算机科学、经济学和生物信息学等领域中使用的,通过把原问题分解为相对简单的子问题的方式求解复杂问题的方法。动态规划算法通常用于优化问题,特别是那…

计算机组成原理——进位计数制

1.认识不同进制 通常的我们日常生活中用到的都是十进制,比如买东西或者期末成绩等等,当然肯定不止这一种进制方法,相关的还有二进制、八进制、十六进制,还有古罗马数字,通常古罗马数字近似可以看作是五进制的数&#x…

《.addClass()》

《.addClass()》 .addClass() 是一个在网页设计和开发中常用的 jQuery 函数,用于向 HTML 元素添加一个或多个类名。这个函数在美化网页、实现动态效果以及改善用户体验方面发挥着重要作用。本文将详细介绍 .addClass() 函数的用法、优势以及在实际开发中的应用案例。 1. .ad…

function and task

任务和函数 在Verilog语言中提供了任务和函数,可以将较大的行为级设计划分为较小的代码段,允许设计者将需要在多个地方重复使用的相同代码提取出来,编写成任务和函数,这样可以使代码更加简洁和易懂。 1.1任务 任务的定义 任务定义…

【C++】用红黑树封装set和map

在C标准库中,set容器和map容器的底层都是红黑树,它们的各种接口都是基于红黑树来实现的,我们在这篇文章中已经模拟实现了红黑树 ->【C】红黑树,接下来我们在此红黑树的基础上来看看如何封装set和map。 一、共用一颗红黑树 我…

4399 C++面试题及参考答案

C 和 C++ 的区别是什么? C 语言是一种过程式编程语言,而 C++ 是在 C 语言基础上发展而来的面向对象编程语言。 从语法层面来看,C 语言没有类和对象的概念。 而在 C++ 中可以定义类,把数据和操作数据的函数封装在一起,像这样: class Point { public:int x;int y;Point(int…

类与实例

1 问题如何理解类与实例? 2 方法 类与实例 类(class)的概述:用来描述具有相同的属性和方法的对象的集合。它定义了该集合中每个对象所共有的属性和方法。对象是类的实例。 类是一类事物,实例是具体的一个事物。 编程与生活是相通的&#xff0…

kafka常见面试题总结

Kafka 核心知识解析 一、Kafka 消息发送流程 Kafka 发送消息涉及两个线程:main 线程和 sender 线程。在 main 线程中,会创建一个双端队列 RecordAccumulator,main 线程负责将消息发送给 RecordAccumulator,而 sender 线程则从 R…

Rust 所有权机制

Rust 所有权机制 本文示例代码地址 所有权是Rust中最独特的特性,它让Rust无需GC就可以保证内存安全。 什么是所有权? 所有权(ownership)是 Rust 用于如何管理内存的一组规则。所有程序都必须管理其运行时使用计算机内存的方式…

2024/11/4 计网强化

10: 17: 22: 09: 11: 12: 13: 14: 15: 18: 19: 20: 21: 16:

hutool-雪花算法 id 生成器

配置 workId 和 datacenterId 设置工作机器ID(workerId)和数据中心ID(datacenterId),这两个参数用于确保在分布式环境中生成的ID是唯一的。使用配置 yaml 文件的方式获取,配置方式参考:https:/…

CentOS 9 配置网卡

在 CentOS 9 中配置网卡,通常涉及以下几个步骤: 1. 查看网络接口 首先,确认系统上存在的网络接口。可以使用 ip 命令或 ifconfig 命令查看网络接口的状态。 ip a 或者: ifconfig 这将列出所有可用的网络接口(例如…

力扣104 : 二叉树最大深度

补:二叉树的最大深度 描述: 给定一个二叉树 root ,返回其最大深度。二叉树的 最大深度 是指从根节点到最远叶子节点的最长路径上的节点数。 何解? 树一般常用递归:递到叶子节点开始倒着处理

机器情绪及抑郁症算法

🏡作者主页:点击! 🤖编程探索专栏:点击! ⏰️创作时间:2024年11月12日17点02分 点击开启你的论文编程之旅https://www.aspiringcode.com/content?id17230869054974 计算机来理解你的情绪&a…

M4 lotus 源码编译安装

查看系统版本 sw_vers ProductName: macOS ProductVersion: 15.1安装依赖 xcode-select -p /Library/Developer/CommandLineToolsbrew install go jq pkg-config hwloc coreutilscurl --proto https --tlsv1.2 -sSf https://sh.rustup.rs | sh设置环境变量 export LIBRARY…