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中路由的基本使用,敬请期待!
相关文章:
NUXT3学习日记二(样式配置、引入组件库、区分在服务端还是在客户端渲染)
上一章已经给大家分享官网下载的nuxt3了,下面正式进入我所要说的内容吧 一、初始化样式 想必大家从我的git下载下来的nuxt3,能看到nuxt.config.ts这个文件了吧。 这里我们有两种css配置方式 1、css:[~/assets/base.scss] 这种方式不能在scss文件中定义…...
FPGA/Verilog,Quartus环境下if-else语句和case语句RT视图对比/学习记录
基本概念 RTL(Register - Transfer - Level)视图:是一种硬件描述语言的抽象层次,用于描述数字电路中寄存器之间的数据传输和操作。在这个层次上,可以看到电路的基本结构,如寄存器、组合逻辑、多路复用器等…...
Javascript高级—闭包问题
闭包问题 循环中赋值为引用的问题 for (var i 1; i < 5; i) {setTimeout(function timer() {console.log(i)}, i * 1000) }解决方法有3种 第一种,使用立即执行函数方式 for (var i 1; i < 5; i) {(fuction(j){setTimeout(function timer() {console.log…...
C#入门 017 字段,属性,索引器,常量
字段,属性,索引器,常量都表示数据 字段 什么是字段 字段(field)是一种表示与对象或类型(类与结构体)关联的变量字段是类型的成员,又称“成员变量,写在类体里面与对象关联的字段亦称“实例字段,表示某个对…...
磐石云语音助手拦截介绍
呼叫中心用户实际应用场景下最高会有超过30%的和语音助手;无声主要是进入了语音信箱;如:“听到滴声后留言”,”漏话提醒““发送请按1,重录请按2”以及拨打过程中客户主动拒接产生的”您拨打的用户正忙“,”关机“”停…...
JSP执行过程及其与Servlet执行效率的比较
JSP(Java Server Pages)和Servlet都是Java Web开发中常用的技术,它们都用于动态生成Web页面。然而,JSP和Servlet在执行过程和效率上存在一些差异。本文将详细探讨JSP的执行过程,并比较JSP与Servlet的执行效率。 一、J…...
open3d
open3d open3d用于 3D 数据处理的现代库。 简介 Open3D 是一个开源库,支持快速开发处理 3D 数据的软件。Open3D 前端公开了一组精心挑选的 C 和 Python 数据结构和算法。后端经过高度优化,并设置为并行化。Open3D 是从零开始开发的,具有一更…...
Vue中优雅的使用Echarts的三种方式
一、原始方法直接使用 1、安装ECharts: npm install echarts --save 2、创建一个Vue公共组件 EChart.vue: <template><div :style"{width: 100%, height: 300px}" ref"chart"></div> </template><scri…...
SpringBoot配置文件/日志
目录 一,SpringBoot配置文件 1,配置文件的格式: 2,properties 3,yml 1,properties与yml的转换 2,读取配置选哪个中的内容 3,单双引号的差异: 4,配置对象: 5,配置集合/配置map 6,yml的优缺点: 二,验证码: 学习目的: 实现样例: 接口定义: 代码总结: 三,日志: 1,概…...
微服务架构面试内容整理-SpringCloud Netflix与Spring Cloud Alibaba比较
Spring Cloud Netflix 和 Spring Cloud Alibaba 都是用于构建微服务架构的解决方案,但它们在设计理念、组件和使用场景上存在一些差异。以下是它们的比较: 1. 服务注册与发现 ● Spring Cloud Netflix:使用 Eureka 作为服务注册和发现的组件。Eureka 是基于 REST 的,适合服…...
JDBC魔法:连接MySQL数据库与数据操作的秘籍
文章目录 一. JDBC介绍二. 数据库驱动1.DriverManager2.Connection3.PreparedStatement4.ResultSet 三. JDBC连接MySQL1. 加载驱动2. 获得连接3. 关闭连接 四. JDBC实现数据新增五. JDBC实现数据删除 一. JDBC介绍 JDBC(Java Database Connectivity)是Ja…...
深入了解Scratch:引导初学者开启编程之旅
引言 在当今数字化时代,编程已不再是成年人的专利,而是一项逐渐向低年龄段普及的技能。Scratch作为一款面向儿童和青少年的图形化编程语言,以其简单易用且充满趣味性的特点,成为了许多初学者学习编程的首选工具。本文将深入探讨S…...
js复制内容到剪切板
复制内容到剪切板 最近预报一个需求需要点击按钮复制当前到行的内容到剪切板, 所以写了这个工具 export function copyText(text: string, prompt: string | null 已成功复制到剪切板!) {if (navigator.clipboard) {return navigator.clipboard.writeText(text).th…...
代码 RNN原理及手写复现
29、PyTorch RNN的原理及其手写复现_哔哩哔哩_bilibili 笔记连接: https://pan.baidu.com/s/1_Sm7ptEiJtTTq3vQWgOTNg?pwd2rei 提取码: 2rei import torch import torch.nn as nn bs,T2,3 # 批大小,输入序列长度 input_size,hidden_size 2,3 # 输入特征大小&a…...
企业官网的在线客服,如何提高效果?
企业官网的在线客服,如何提高效果? 作者:开源呼叫中心系统 FreeIPCC,github地址:https://github.com/lihaiya/freeipcc 提高企业官网在线客服的效果,是提升客户体验、增强客户满意度和忠诚度的关键。一个…...
「实战应用」如何可视化 DHTMLX Scheduler 中的资源工作量?
DHTMLX Scheduler是一个全面的 UI 组件,用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是,某些场景可能需要自定义解决方案。例如,如果项目的资源(即劳动力)有限,则需要确保以更高的精度分…...
论文阅读《BEVFormer》
BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers 目录 摘要1 介绍2 相关工作2.1 基于Transformer的2D感知 摘要 3D视觉感知任务对于自动驾驶系统至关重要,包括基于多相机图像的3D检测和地图分割。…...
sql专题 之 sql的执行顺序
文章目录 sql的执行顺序sql语句的格式实际的执行顺序:虚拟表 vs 数据集虚拟表 结果集总结嵌套查询在sql查询中的执行顺序 前文我们了解了sql常用的语句,这次我们对于这些语句来个小思索 戳这里→ sql专题 之 常用命令 sql的执行顺序 SQL语句的执行顺序是…...
Vue3 -- 基于Vue3+TS+Vite项目【项目搭建及初始化】
兼容性注意: Vite 需要 Node.js 版本 18+ 或 20+。然而,有些模板需要依赖更高的 Node 版本才能正常运行,当你的包管理器发出警告时,请注意升级你的 Node 版本。【摘抄自vite官网】 这里我用的node版本是 v18.20.2 创建项目: 创建项目我们可以使用npm、yarn、pnpm、bun …...
CTF-RE: TEA系列解密脚本
// // Created by A5rZ on 2024/10/26. //#ifndef WORK_TEA_H #define WORK_TEA_H#endif //WORK_TEA_H#include <cstdint> #include <cstdio>// 定义TEA加密算法的轮次,一般建议为32轮 #define TEA_ROUNDS 32 #define DELTA 0x9e3779b9// TEA加密函数 v…...
Python并发安全性重构白皮书(GIL禁用场景下的原子操作黄金标准)
第一章:Python并发安全性重构白皮书(GIL禁用场景下的原子操作黄金标准)当通过 PyPy、Cython(启用 nogil)、或 Python 3.12 的实验性子解释器(PEP 684)等路径绕过全局解释器锁(GIL&am…...
BilibiliDown:B站视频下载的完整解决方案
BilibiliDown:B站视频下载的完整解决方案 【免费下载链接】BilibiliDown (GUI-多平台支持) B站 哔哩哔哩 视频下载器。支持稍后再看、收藏夹、UP主视频批量下载|Bilibili Video Downloader 😳 项目地址: https://gitcode.com/gh_mirrors/bi/BilibiliDo…...
对 OS:TEP 的 MLFQ 策略的一点思考
1.SJF 调度算法SJF 没啥好说的, 书上讲的很清楚了, SJF 就是最短任务优先原则, 其设计初衷是想解决 FIFO 的糟糕的周转时间的问题.但是, 正如书上所说, 这玩意主打一个秩序井然, 只能处理所有任务同时到队列的情况, 要是某堆进程不按这套路出牌, 那 SJF 立马完蛋, 书上就有一个…...
深入解析Python中ort.InferenceSession的底层实现与性能优化
1. 揭开ort.InferenceSession的神秘面纱 第一次接触ort.InferenceSession时,我完全被它的性能震惊了。作为一个用Python加载ONNX模型的标准入口,它看起来就是个普通的类实例化操作,但背后却隐藏着C和Python的完美协作。这种设计让开发者既能享…...
实战演练:基于Copaw下载的博客代码,在快马平台上快速构建并部署可访问的全栈应用
今天想和大家分享一个实战经验:如何基于Copaw下载的代码,在InsCode(快马)平台上快速构建并部署一个全栈博客应用。整个过程非常流畅,特别适合想快速验证想法的开发者。 项目背景与需求分析 最近在Copaw上找到一个博客系统的代码骨架&#x…...
AI选包助手:让快马智能推荐并配置浏览器插件开发所需的npm依赖
AI选包助手:让快马智能推荐并配置浏览器插件开发所需的npm依赖 最近想开发一个浏览器插件,功能很简单:抓取当前网页的标题、主要文本内容和所有图片链接,然后整理成Markdown格式一键导出。作为一个前端开发者,我知道这…...
Llama-3.2V-11B-cot入门必看:Streamlit会话状态管理保障多用户隔离
Llama-3.2V-11B-cot入门必看:Streamlit会话状态管理保障多用户隔离 1. 项目概述 Llama-3.2V-11B-cot是基于Meta Llama-3.2V-11B-cot多模态大模型开发的高性能视觉推理工具,专为双卡4090环境深度优化。该工具通过Streamlit框架构建了宽屏友好的交互界面…...
Stable Yogi Leather-Dress-Collection效果展示:2.5D视角下皮衣动态褶皱与身体贴合度真实感
Stable Yogi Leather-Dress-Collection效果展示:2.5D视角下皮衣动态褶皱与身体贴合度真实感 想象一下,你是一位动漫角色设计师,需要为角色设计一套充满质感的皮衣。传统的流程需要你手绘线稿、上色、刻画光影和褶皱,整个过程耗时…...
煤矿智能化验收必备:针对睡岗、离岗识别的AI视觉解决方案
在煤矿智能化建设中,确保井下作业人员的安全与规范操作是重中之重。睡岗、离岗等违规行为不仅影响生产效率,更可能引发严重的安全事故。因此,在煤矿智能化验收环节,一套高效精准的针对睡岗、离岗识别的AI视觉解决方案不可或缺。一…...
AutoHotkey自动化效率提升指南:从入门到进阶的全场景应用技巧
AutoHotkey自动化效率提升指南:从入门到进阶的全场景应用技巧 【免费下载链接】antimicrox Graphical program used to map keyboard buttons and mouse controls to a gamepad. Useful for playing games with no gamepad support. 项目地址: https://gitcode.co…...
