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

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种 第一种&#xff0c;使用立即执行函数方式 for (var i 1; i < 5; i) {(fuction(j){setTimeout(function timer() {console.log…...

C#入门 017 字段,属性,索引器,常量

字段&#xff0c;属性&#xff0c;索引器&#xff0c;常量都表示数据 字段 什么是字段 字段(field)是一种表示与对象或类型(类与结构体)关联的变量字段是类型的成员&#xff0c;又称“成员变量&#xff0c;写在类体里面与对象关联的字段亦称“实例字段&#xff0c;表示某个对…...

磐石云语音助手拦截介绍

呼叫中心用户实际应用场景下最高会有超过30%的和语音助手&#xff1b;无声主要是进入了语音信箱;如&#xff1a;“听到滴声后留言”&#xff0c;”漏话提醒““发送请按1&#xff0c;重录请按2”以及拨打过程中客户主动拒接产生的”您拨打的用户正忙“&#xff0c;”关机“”停…...

JSP执行过程及其与Servlet执行效率的比较

JSP&#xff08;Java Server Pages&#xff09;和Servlet都是Java Web开发中常用的技术&#xff0c;它们都用于动态生成Web页面。然而&#xff0c;JSP和Servlet在执行过程和效率上存在一些差异。本文将详细探讨JSP的执行过程&#xff0c;并比较JSP与Servlet的执行效率。 一、J…...

open3d

open3d open3d用于 3D 数据处理的现代库。 简介 Open3D 是一个开源库&#xff0c;支持快速开发处理 3D 数据的软件。Open3D 前端公开了一组精心挑选的 C 和 Python 数据结构和算法。后端经过高度优化&#xff0c;并设置为并行化。Open3D 是从零开始开发的&#xff0c;具有一更…...

Vue中优雅的使用Echarts的三种方式

一、原始方法直接使用 1、安装ECharts&#xff1a; npm install echarts --save 2、创建一个Vue公共组件 EChart.vue&#xff1a; <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&#xff08;Java Database Connectivity&#xff09;是Ja…...

深入了解Scratch:引导初学者开启编程之旅

引言 在当今数字化时代&#xff0c;编程已不再是成年人的专利&#xff0c;而是一项逐渐向低年龄段普及的技能。Scratch作为一款面向儿童和青少年的图形化编程语言&#xff0c;以其简单易用且充满趣味性的特点&#xff0c;成为了许多初学者学习编程的首选工具。本文将深入探讨S…...

js复制内容到剪切板

复制内容到剪切板 最近预报一个需求需要点击按钮复制当前到行的内容到剪切板&#xff0c; 所以写了这个工具 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 # 批大小&#xff0c;输入序列长度 input_size,hidden_size 2,3 # 输入特征大小&a…...

企业官网的在线客服,如何提高效果?

企业官网的在线客服&#xff0c;如何提高效果&#xff1f; 作者&#xff1a;开源呼叫中心系统 FreeIPCC&#xff0c;github地址&#xff1a;https://github.com/lihaiya/freeipcc 提高企业官网在线客服的效果&#xff0c;是提升客户体验、增强客户满意度和忠诚度的关键。一个…...

「实战应用」如何可视化 DHTMLX Scheduler 中的资源工作量?

DHTMLX Scheduler是一个全面的 UI 组件&#xff0c;用于处理面向业务的 Web 应用程序中复杂的调度和任务管理需求。但是&#xff0c;某些场景可能需要自定义解决方案。例如&#xff0c;如果项目的资源&#xff08;即劳动力&#xff09;有限&#xff0c;则需要确保以更高的精度分…...

论文阅读《BEVFormer》

BEVFormer: Learning Bird’s-Eye-View Representation from Multi-Camera Images via Spatiotemporal Transformers 目录 摘要1 介绍2 相关工作2.1 基于Transformer的2D感知 摘要 3D视觉感知任务对于自动驾驶系统至关重要&#xff0c;包括基于多相机图像的3D检测和地图分割。…...

sql专题 之 sql的执行顺序

文章目录 sql的执行顺序sql语句的格式实际的执行顺序&#xff1a;虚拟表 vs 数据集虚拟表 结果集总结嵌套查询在sql查询中的执行顺序 前文我们了解了sql常用的语句&#xff0c;这次我们对于这些语句来个小思索 戳这里→ 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加密算法的轮次&#xff0c;一般建议为32轮 #define TEA_ROUNDS 32 #define DELTA 0x9e3779b9// TEA加密函数 v…...

SpringBoot-17-MyBatis动态SQL标签之常用标签

文章目录 1 代码1.1 实体User.java1.2 接口UserMapper.java1.3 映射UserMapper.xml1.3.1 标签if1.3.2 标签if和where1.3.3 标签choose和when和otherwise1.4 UserController.java2 常用动态SQL标签2.1 标签set2.1.1 UserMapper.java2.1.2 UserMapper.xml2.1.3 UserController.ja…...

IDEA运行Tomcat出现乱码问题解决汇总

最近正值期末周&#xff0c;有很多同学在写期末Java web作业时&#xff0c;运行tomcat出现乱码问题&#xff0c;经过多次解决与研究&#xff0c;我做了如下整理&#xff1a; 原因&#xff1a; IDEA本身编码与tomcat的编码与Windows编码不同导致&#xff0c;Windows 系统控制台…...

深入剖析AI大模型:大模型时代的 Prompt 工程全解析

今天聊的内容&#xff0c;我认为是AI开发里面非常重要的内容。它在AI开发里无处不在&#xff0c;当你对 AI 助手说 "用李白的风格写一首关于人工智能的诗"&#xff0c;或者让翻译模型 "将这段合同翻译成商务日语" 时&#xff0c;输入的这句话就是 Prompt。…...

相机Camera日志实例分析之二:相机Camx【专业模式开启直方图拍照】单帧流程日志详解

【关注我&#xff0c;后续持续新增专题博文&#xff0c;谢谢&#xff01;&#xff01;&#xff01;】 上一篇我们讲了&#xff1a; 这一篇我们开始讲&#xff1a; 目录 一、场景操作步骤 二、日志基础关键字分级如下 三、场景日志如下&#xff1a; 一、场景操作步骤 操作步…...

23-Oracle 23 ai 区块链表(Blockchain Table)

小伙伴有没有在金融强合规的领域中遇见&#xff0c;必须要保持数据不可变&#xff0c;管理员都无法修改和留痕的要求。比如医疗的电子病历中&#xff0c;影像检查检验结果不可篡改行的&#xff0c;药品追溯过程中数据只可插入无法删除的特性需求&#xff1b;登录日志、修改日志…...

多场景 OkHttpClient 管理器 - Android 网络通信解决方案

下面是一个完整的 Android 实现&#xff0c;展示如何创建和管理多个 OkHttpClient 实例&#xff0c;分别用于长连接、普通 HTTP 请求和文件下载场景。 <?xml version"1.0" encoding"utf-8"?> <LinearLayout xmlns:android"http://schemas…...

循环冗余码校验CRC码 算法步骤+详细实例计算

通信过程&#xff1a;&#xff08;白话解释&#xff09; 我们将原始待发送的消息称为 M M M&#xff0c;依据发送接收消息双方约定的生成多项式 G ( x ) G(x) G(x)&#xff08;意思就是 G &#xff08; x ) G&#xff08;x) G&#xff08;x) 是已知的&#xff09;&#xff0…...

关于iview组件中使用 table , 绑定序号分页后序号从1开始的解决方案

问题描述&#xff1a;iview使用table 中type: "index",分页之后 &#xff0c;索引还是从1开始&#xff0c;试过绑定后台返回数据的id, 这种方法可行&#xff0c;就是后台返回数据的每个页面id都不完全是按照从1开始的升序&#xff0c;因此百度了下&#xff0c;找到了…...

Linux简单的操作

ls ls 查看当前目录 ll 查看详细内容 ls -a 查看所有的内容 ls --help 查看方法文档 pwd pwd 查看当前路径 cd cd 转路径 cd .. 转上一级路径 cd 名 转换路径 …...

[10-3]软件I2C读写MPU6050 江协科技学习笔记(16个知识点)

1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16...