nuxt3的一些知识点,持续更新

1.npx nuxi@latest init xx 命令执行失败

 ERROR  Error: Failed to download template from registry: Failed to download https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json: TypeError: fetch failed

解决办法:host加上
185.199.108.133 raw.githubusercontent.com
直接在浏览器下载https://raw.githubusercontent.com/nuxt/starter/templates/templates/v3.json,里面有个tar地址,下载下来,解压后进目录npm i 安装

2.a页面使用了useFetch获取服务端数据,跳转到b页面,从b页面又返回到a页面的时候useFetch又执行了一次,会不会影响体验?

先说服务端渲染的原理,就是服务端按vue文件先解析一遍计算出当前页面的html,客户端还是使用vue技术,所以vue的代码会同样下发到客户端;vue技术采用是spa的路由开发
模式,所以除了首次渲染是服务端渲染,后面的渲染都跟普通的vue开发一样,是客户端渲染。除非对路由加钩子,采用location的跳转方式,每页都进行服务端渲染

useFetch默认是阻塞的,所以体验上没有什么问题,并不会出现先渲染再请求再渲染的效果,也可以使用lazy的方式不阻塞,跟进实际情况使用

3.Hydration node mismatch告警的问题

这个错误的意思是渲染出来的dom跟vue里面的虚拟dom模型或变量不匹配,这类问题一般正常的写法碰不到,除非手动干预了,例如写if(process.server){}或if(process.client){},里面对
一些变量进行的改写,并渲染,但在客户端的环境里面又是不一致的,举例:

let data = ref("1")
if(process.server){data.value=2}<template><div>{{data}}</div></template>


解决办法,使用useSate,把let data = ref("1")改成let data = useSate("data1");对数据进行持久化,这样服务端修改的数据,在客户端同样就能读得到,解决一致性问题,使用useSate
就是要注意里面的key是这个项目唯一,补充:useDate的数据并不会保存在服务端,只是会把数据给客户端持久化,所以不用担心服务端内存问题

4.如何使用keepalive缓存页面

defineOptions({//需要keepalive的页面一定要给个名字name: "233",
});
definePageMeta({keepalive: true, //设置为keepAlive
});

5.nuxt的代码没看到import的代码

答:因为nuxt项目有自动import功能(刚用还不太习惯),首次启动比较慢

6.无法使用本地ip地址访问

解决办法:在nuxt.config.ts添加devServer的设置

export default defineNuxtConfig({devServer: {host: "0.0.0.0",port: 3000,},
});

7.如何修改根目录

解决办法:在nuxt.config.ts添加app,baseURL的设置

export default defineNuxtConfig({app: {baseURL: "/account-project",},
});

8.layouts,pages,components几个目录的潜在关系

假设app.vue的代码

<template><NuxtLayout><!-- Show Nuxt progress indicator on page change --><NuxtLoadingIndicator /><NuxtPage /></NuxtLayout>
</template>

components下面新建一个Window/index.vue的文件,在其他2个目录下面可以直接使用Window标签,无需引入
<NuxtLayout>默认会指向layouts/default.vue
<NuxtPage />默认会指向pages/index.vue

9.pages目录如何配置动态路由

例如,电商网站,每个分类都是动态的,分类下面有各种商品,可以这样配置
--分类页
pages/[class]/index.vue
--商品页
pages/[class]/[id].vue

通过代码

const route = useRoute();
// 当访问/1/2时,route.params.class将为1,route.params.id将为1
console.log(route.params);

其他的server,api,中间件,插件的了解后再补充

参考

https://nuxt.com/ 官网
https://nuxt.com.cn/docs/api/nuxt-config#keepalive
https://github.com/nuxt/examples

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

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

相关文章

“仿RabbitMQ实现消息队列”---整体架构与模块说明

顾得泉&#xff1a;个人主页 个人专栏&#xff1a;《Linux操作系统》 《C从入门到精通》 《LeedCode刷题》 键盘敲烂&#xff0c;年薪百万&#xff01; 一、概念性框架理解 我们主要实现的内容&#xff1a; 1.Broker服务器&#xff1a;消息队列服务器&#xff08;服务端&…

连通块中点的数量-java

本次我们通过连通块中点的数量来加深我们对并查集的基本操作和原理&#xff0c;并且知道如何在并查集中添加附属信息。 目录 前言☀ 一、连通块中点的数量☀ 二、算法思路☀ 1.无向图&#x1f319; 2.在a b之间连一条边&#xff0c;a b可能相等&#x1f319; 3.询问a和b是否在一…

Apache POI对Excel进行读写操作

1、什么是Apache POI ​ Apache POI 是一个处理Miscrosoft Office各种文件格式的开源项目。简单来说就是&#xff0c;我们可以使用 POI 在 Java 程序中对Miscrosoft Office各种文件进行读写操作。一般情况下&#xff0c;POI 都是用于操作 Excel 文件。 Apache POI 的应用场景&…

【为什么 Google Chrome 打开网页有时极慢?尤其是国内网站,如知网等】

要通过知网搜一点资料&#xff0c;发现怎么都打不开。而且B站&#xff0c;知乎这些速度也变慢了&#xff01;已经检查过确定不是网络的问题。 清空了记录&#xff0c;清空了已接受Cookie&#xff0c;清空了缓存内容……没用&#xff01;&#xff01;&#xff01; 不断搜索&am…

注意力机制详解

引言 在阅读一篇文章时&#xff0c;我们的大脑并不平等地处理每一个字词&#xff0c;而是根据上下文自动筛选出核心信息进行深入理解。注意力机制正是借鉴了这一生物学灵感&#xff0c;使得机器学习模型能够动态地分配其“注意力”资源&#xff0c;针对不同的输入部分赋予不同…

大数据信用报告分析和评估有什么意义

大数据信用这个词在现在已经是很常见的了&#xff0c;只要是申贷的朋友对它就不陌生&#xff0c;在明面上的信用资质刚刚满足审核要求&#xff0c;但又要把控风险的时候&#xff0c;这个时候大数据信用就会作为风控机构交叉核查的重要依据。那你知道大数据信用报告分析和评估有…

代码随想录——二叉搜索树的最小绝对差(Leetcode530)

题目链接 层序遍历 /*** Definition for a binary tree node.* public class TreeNode {* int val;* TreeNode left;* TreeNode right;* TreeNode() {}* TreeNode(int val) { this.val val; }* TreeNode(int val, TreeNode left, TreeNode right) …

if constexpr实现条件编译

#include <iostream>// 利用if constexpr实现了条件编译 template<typename T1, typename T2> void test_func() {if constexpr (std::is_same_v<T1, T2>) {std::cout << "hit stage\n";} else {std::cout << "miss\n";} }i…

Microsoft的Copilot现已登陆Telegram

每周跟踪AI热点新闻动向和震撼发展 想要探索生成式人工智能的前沿进展吗&#xff1f;订阅我们的简报&#xff0c;深入解析最新的技术突破、实际应用案例和未来的趋势。与全球数同行一同&#xff0c;从行业内部的深度分析和实用指南中受益。不要错过这个机会&#xff0c;成为AI领…

数据结构复习指导之插入排序

文章目录 排序 考纲内容 知识框架 复习提示 1.排序的基本概念 1.1排序的定义 2.插入排序 2.1直接插入排序 2.2折半插入排序 2.3希尔排序 知识回顾 排序 考纲内容 &#xff08;一&#xff09;排序的基本概念 &#xff08;二&#xff09;插入排序 直接插…

多线程基础知识-09

ThreadLocal 是什么 ThreadLocal 是 Java 中的一个类&#xff0c;它提供了线程局部变量的功能。每个 ThreadLocal 对象都维护了一个线程私有的变量副本&#xff0c;不同线程之间无法访问彼此的副本。这样可以保证每个线程都能够独立地操作自己的变量副本&#xff0c;而不会发生…

内网不能访问域名怎么办?

在网络应用中&#xff0c;我们常常遇到内网不能访问域名的问题。这是由于内网环境限制导致的&#xff0c;内网无法直接连接到公网&#xff0c;因而无法访问互联网上的域名。我们可以利用一些特殊技术和工具来解决这个问题。 天联组网技术的应用 天联组网是一种非常受欢迎的解决…

Java实战项目开发的个人技巧分享

前言 笔者目前从事一线 Java 开发今年是第 3 个年头了&#xff0c;从 0-1的 SaaS、PaaS 的项目做过&#xff0c;多租户下定制化开发项目也做过&#xff0c;项目的 PM 也做过... 在实际的开发中积累了一些技巧和经验&#xff0c;包括线上 bug 处理、日常业务开发、团队开发规范…

NetApp财季报告亮点:全闪存阵列需求强劲,云计算收入增长放缓但AI领域前景乐观

在最新的财季报告中&#xff0c;NetApp的收入因全闪存阵列的强劲需求而显著增长。截至2024年4月26日的2024财年第四季度&#xff0c;NetApp的收入连续第三个季度上升&#xff0c;达到了16.7亿美元&#xff0c;较前一年同期增长6%&#xff0c;超出公司指导中值。净利润为2.91亿美…

前端开发:$nextTick()的使用及原理

目录 前言 $nextTick()的概念 $nextTick()的用法和原理 1、$nextTick()用法 2、$nextTick()原理 $nextTick()的具体使用示例 拓展&#xff1a;面试中考察$nextTick()的底层原理 最后 前言 在前端开发中&#xff0c;涉及到JS原生的使用原理是非常重要的知识点&#xff0…

Kafka 消息保留策略及其影响详解

目录 Kafka 消息保留策略及其影响详解消息保留策略超过保留时间的消息删除过程删除过程对正在消费的消息和偏移量的影响不同保留时间设置的区别总结 博客示例题目&#xff1a;详解 Kafka 消息保留策略及其影响消息保留策略超过保留时间的消息删除过程删除过程对正在消费的消息和…

使用pytorch搭建textCNN、BERT、transformer进行文本分类

首先展示数据处理后的类型&#xff1a; 第一列为文本&#xff0c;第二类为标注的标签&#xff0c;数据保存在xlsx的表格中&#xff0c;分为训练集和验证集。 textCNN 直接上整个工程代码&#xff1a; import pandas as pd import numpy as np import torch from torch.util…

springMVC返回对象或List集合时报错 无法解析

报错信息 &#xff1a;No converter found for return value of type: class java.util.ArrayList 原因&#xff1a;没有导入json 所以java在返回对象时解析错误 解决&#xff1a;1、添加所需的依赖&#xff1a;确保在项目的依赖管理中添加了适当的 JSON 库&#xff0c;如 J…

c++函数基础总结

在给出的代码片段中&#xff0c;我们看到两部分内容&#xff1a;一个类定义和一个全局函数声明。让我们逐一分析它们&#xff1a; 类定义&#xff1a; cpp复制代码 class { public: void a(); }; 这个类定义是不完整的&#xff0c;因为它没有类名。但为了说明&#xff0c;我…

Linux开发工具(个人使用)

Linux开发工具 1.Linux yum软件包管理器1.1Linux安装程序有三种方式1.2注意事项1.3如何查看&#xff0c;安装&#xff0c;卸载软件包1.3.1查看软件包1.3.2安装软件包1.3.3卸载软件 2.Linux vim编辑器2.1vim的基本操作2.2vim正常模式命令集2.3vim底行模式命令集2.4vim配置 3.Lin…