nuxt3使用记录一:框架摸索

之前直接用的Vue3,后面为了seo,了解到Vue3用SSR渲染很复杂,甚至衍生了出nuxt3这个框架,这个框架在github已经有50K star了,也已经是个非常成熟的框架了,不过我感觉国内的资料也不多,看来国内接受新事物的速度依然很慢,大厂估计都自研了,小公司就用老方法PHP啥的。

学习nuxt3最详细的资料也就是官方文档,不过,说实话也很不详细。我研究了几天,说难其实也不难,说简单也不简单,因为整个框架按约定的自动配置的东西非常多,不了解的话,不知道框架的运作机制,都不知道哪些文件该放哪里。
下面根据实践经验,记录一些觉得官方文档没详细介绍,又不那么好理解的东西

nuxt3 的SSR渲染原理

与Vue3传统渲染对比

Vue3的原始渲染,是单文件组件,渲染的结果是一个html加一个js和css文件等,服务器通过nginx等代理,让客户端可以获取到这个html文件(就跟获取个普通文件是一样的),浏览器访问html,从而再次加载js和其他静态文件,完全由客户端去解析js文件。所以服务器不需要nodeJS环境

优势劣势就不去对比了,网上很多,这里最大的问题是搜索引擎是不会爬取js里面的内容的,所以非常不利于seo。所以需要用到SSR渲染

SSR也就是能把Vue的页面,在服务器端就给渲染成静态的html页面,它是有网页的内容的,所以搜索引擎的爬虫能够直接获取到里面的内容,从而提高了seo,这里的服务器就需要有nodeJS环境去解析js文件从而渲染页面

nuxt3渲染机制(个人理解,可能有误)

但是这里有个问题,页面的有些数据是由后端动态提供的,所以在渲染页面前,需要先从后端获取数据。nuxt3解决该问题的办法,是在客户端和后端之间,还设置了一层server端:

客户端<——>server<——>后端

所以,在官方文档里,看到http请求方式大多是await的同步请求,和之前用axios的异步差异很大,以前都是要在.then()里面去处理后端的数据,否则客户端界面会卡死。而官方文档就描述的很不详细,其实它用await userfetch()向后端发起请求,那些场景都是在server端渲染页面时去做的,并不是客户端直接发起的请求,server把从后端获取的数据直接渲染成静态页面,再返回给客户端,客户端无需再次渲染,直接就展示页面。所以你看官方文档的代码老是await 。在真实业务上的客户端发起的http请求,还是要用promise进行异步请求。关于客户端的http请求,我也做了封装,感兴趣可以看看。

nuxt3框架一些不好理解的点

第三方组件引入

常见的就是引入UI组件,成熟的UI组件,应该都会适配NUXT3的,都会特别说明在NUXT3中如何引入,如何按需自动加载,自动导入等。如果没有官方适配的UI组件,建议换一个。
但是有时非用不可,也是可以的,就按照普通Vue3的引入方式,比如vite自动导入的(你说官方文档连vite的自动导入配置都没说明的,建议马上换一个),就在nuxt.config.tsvite下进行配置:

import AutoImport from "unplugin-auto-import/vite";
import Components from "unplugin-vue-components/vite";
import { NaiveUiResolver } from "unplugin-vue-components/resolvers";
export default defineNuxtConfig({.........其他配置// 下面是我引入naiveUI 的配置vite: {plugins: [AutoImport({imports: [{"naive-ui": [],},],}),Components({resolvers: [NaiveUiResolver()],}),],},
});

对,就照着原来的配置方法配置就好(除非官方有专门的nuxt配置说明),不过,有可能那些自动导入,按需导入的功能会失效。

路由

nuxt3的路由也是基于Vue-route封装的,所以从老项目迁移的时候,还能不换路由方式,但是它又做了封装,比如<router-view >就没用了,你得用<NuxtPage />来代替,关键它不如<router-view >自由,在嵌套路由上,nuxt限制很多。

nuxt3使用文件路由,根目录下的pages目录下的所有.vue文件都会根据文件名和目录名自动生成路由。这样可以省略路由配置,但是却加了很多限制,特别是嵌套路由。

比如我的页面是由顶部导航栏+左侧导航栏+中间区域组成,之前我用个layout组件分区域,然后<router-view >来切换中间区域的内容即可。但是不能直接用<NuxtPage />来实现。你必须按照他的嵌套路由规则,来实现嵌套路由,才能实现上面的这种布局。

而nuxt3中,像这种布局需求,需要用到layout组件来实现,如果你只有一种布局,建议直接卸载app.vue 上,这里的内容全局应用,也就意味着顶部导航栏始终存在于所有页面中。至于多种布局的,我还没研究,建议看官方文档琢磨下。

总之,nuxt3的路由很死板。刚用很不习惯。不过倒是省了一些代码

路由中间件

路由中间件也有固定的实现模板,先在根目录新建文件夹middleware这个文件夹的,然后新建一个route.global.ts文件,带global后缀的文件,意味着它全局应用,所有路由都会调用。然后其中的方法:

export default defineNuxtRouteMiddleware((to, from) => {if (to.path === "/") {return navigateTo("/home/about");}
});

对,这个方法的名称也是固定的,这里的所有几乎都是固定的,也就是框架的约定,你只要这么写,他就会自动加载了。再复杂的中间件我也没去研究了。

状态管理(简单理解为全局变量)

nuxt3框架提供了自带的状态管理模块useState(),你可以在任何地方像下面这样定义一个全局变量:const counter = useState<number>('counter', () =>1)
不过我建议在composables目录下新建一个ts文件来定义和初始化这些全局变量,因为这样可以避免在初始化前被调用,并且目录里的全局变量也会自动加载,所有地方直接使用,无需手动导入:
例如我在composables目录下新建一个locale.ts文件:

export const useCounter = () => {return useState<number>("counter", () => 1);
};

然后,你就可以在其他.vue和 .ts文件中引用该全局变量(无需手动导入useCounter):

let counter=useCounter().value

或者,你可以直接全局修改它的值:

useCounter().value++ // 任意地方进行全局修改

使用还是很简单的。所以,我放弃引入pinia了,因为我就是简简单单的定义一些全局变量,nuxt3自带的这个更好用。

静态项目构建

nuxt3默认生成的框架就自带了两种构建命令:

        "dev": "nuxt dev", // 开发环境直接运行"build": "nuxt build", // 混合渲染构建"generate": "nuxt generate", // 纯静态构建

nuxt3总体来说支持三种构建方式:

  1. 默认的混合渲染构建,对应的也就是SSR,不过它支持自定义配置,哪些页面静态构建,哪些还是走传统的SPA,我没深究,但是确实支持对每个页面的构建方式指定,对应的命令是:nuxt build
  2. 第二种是传统vue3的SPA构建,需要在nuxt.config.ts中配置ssr:false。这样就进行SPA构建,不过这种方式的话,建议直接使用vue3传统项目框架来整,然后执行nuxt build
  3. 第三种就是SSG构建,就是纯静态页面,这种构建最有利于seo,且无需server端渲染,是对客户端和服务端都最友好的方式,缺点就是页面是纯静态的,无法根据数据动态生成。对应的命令是:nuxt generate

我第一次构建挺顺利的,说明这个框架挺成熟的,就只遇到一个地方报错,我原先在pages目录下创建了个.ts文件,用来写一些通用的方法,这个文件在SSG构建时是不行的,也就是说pages目录下不允许有.ts文件。所以我就把这个文件挪到composables目录下去,就可以了。构建出来的页面也没啥问题,都挺好的。整体大小比SPA方式更小。

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

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

相关文章

notepad++绿色版添加右键菜单

解压路径 D:\Green\notepad_v8.0_x64_绿色版 添加右键菜单.reg 新建nodepad添加右键菜单.reg文件 Windows Registry Editor Version 5.00[HKEY_CLASSES_ROOT\*\shell\NotePad] "Edit with &Notepad" "Icon""D:\\Green\\notepad_v8.0_x64_绿色版…

BUUCTF:BUU UPLOAD COURSE 1[WriteUP]

构造一句话PHP木马 <?php eval(system($_POST[shell])); ?> 利用eval函数解析$shell的值使得服务器执行system命令 eval函数是无法直接执行命令的&#xff0c;只能把字符串当作php代码解析 这里我们构造的木马是POST的方式上传&#xff0c;那就用MaxHacKBar来执行 …

【vite】-【vite介绍】-【vite的基础应用】-【vite的高级应用】-【

目录 vite介绍vite的基础应用vite创建项目vite创建vue3项目vite创建vue2项目vite创建react项目 vite中使用css的各种功能vite中使用tsvite中处理静态资源的方法vite集成eslint和prettiervite中的env环境变量 vite的高级应用 vite介绍 一、特点&#xff1a; 开发时效率极高开箱…

瘦身Spring Boot应用(thinJar)

瘦身Spring Boot应用(thinJar) 简介 我们使用Spring Boot提供的spring-boot-maven-plugin打包Spring Boot应用&#xff0c;可以直接获得一个完整的可运行的jar包&#xff0c;把它上传到服务器上再运行就极其方便。 但是这种方式也不是没有缺点。最大的缺点就是包太大了&…

Day:004(1) | Python爬虫:高效数据抓取的编程技术(数据解析)

数据解析-正则表达式 在前面我们已经搞定了怎样获取页面的内容&#xff0c;不过还差一步&#xff0c;这么多杂乱的代码夹杂文字我们怎样 把它提取出来整理呢&#xff1f;下面就开始介绍一个十分强大的工具&#xff0c;正则表达式&#xff01; 正则表达式是对字符串操作的一种…

前端node使用WebSocket实现实时通信例子

首先先下载ws库 npm install ws server.js [自定义websocket服务器,记得先用node启动] const WebSocket require(ws);const wss new WebSocket.Server({ port: 8888 });wss.on(connection, function connection(ws) {console.log(Client connected);ws.on(message, functi…

华为ensp中高级acl (控制列表) 原理和配置命令 (详解)

作者主页&#xff1a;点击&#xff01; ENSP专栏&#xff1a;点击&#xff01; 创作时间&#xff1a;2024年4月6日23点18分 高级acl&#xff08;Access Control List&#xff09;是一种访问控制列表&#xff0c;可以根据数据包的源IP地址、目标IP地址、源端口、目标端口、协议…

Golang | Leetcode Golang题解之第13题罗马数字转整数

题目&#xff1a; 题解&#xff1a; var symbolValues map[byte]int{I: 1, V: 5, X: 10, L: 50, C: 100, D: 500, M: 1000}func romanToInt(s string) (ans int) {n : len(s)for i : range s {value : symbolValues[s[i]]if i < n-1 && value < symbolValues[s…

识别语序成语的简单神经网络

成语是汉语中的一种特殊表达形式&#xff0c;而语序成语则更加特殊&#xff0c;需要通过特定的语序才能表达其含义。在这篇文章中&#xff0c;我们将使用简单的神经网络来识别具有特定语序的成语。 首先&#xff0c;我们定义了一个数据集&#xff0c;其中包含了一些语序成语和…

关于 VScode, 点击文件右键或者在文件夹中没有 【 在vscode中打开选项】 解决办法

关于 VScode, 点击文件右键或者在文件夹中没有 【 在vscode中打开选项】 解决办法 段子手-168 2024-4-6 1、在任意位置创建一个文本文件。如&#xff1a;a.txt 2、复制以下代码到 a.txt 文本文件中。 &#xff08;注&#xff1a; 以 ; 开头的 , 是备注信息 , 不需要做任何修…

基于单片机高压输电线路微机保护系统设计

**单片机设计介绍&#xff0c;基于单片机高压输电线路微机保护系统设计 文章目录 一 概要二、功能设计三、 软件设计原理图 五、 程序六、 文章目录 一 概要 基于单片机高压输电线路微机保护系统设计是一个涉及电力系统继电保护的复杂工程。该系统主要利用单片机作为控制核心&…

在类Unix平台实现TCP服务端

在类Unix平台实现TCP客户端 创建服务器socket 在TCP服务器代码中&#xff0c;我们创建一个socket&#xff0c;然后调用bind函数&#xff0c;绑定到这个socket&#xff1a; // 创建本地地址配置信息struct addrinfo hints;// 清空hints的东西&#xff0c;为设置新的信息做准备…

博客部署001-centos安装docker

1、安装docker 1.1 卸载旧版本的 Docker sudo yum remove docker \docker-client \docker-client-latest \docker-common \docker-latest \docker-latest-logrotate \docker-logrotate \docker-engine1.2 设置 Docker 仓库 安装 Docker Engine 之前&#xff0c;首先需要设置…

redis 哨兵

文章目录 前言主从复制的问题怎么人工恢复故障主节点 Redis Setinel 架构使用 docker 来配置哨兵结构安装 docker编排 redis 主从节点编排 redis 哨兵节点 观察哨兵模式的作用主从切换的具体流程小结 前言 redis 主从复制模式下, 一旦主节点出现故障, 不能提供服务的时候, 就需…

C++ | Leetcode C++题解之第13题罗马数字转整数

题目&#xff1a; 题解&#xff1a; class Solution { private:unordered_map<char, int> symbolValues {{I, 1},{V, 5},{X, 10},{L, 50},{C, 100},{D, 500},{M, 1000},};public:int romanToInt(string s) {int ans 0;int n s.length();for (int i 0; i < n; i) …

jmeter下载与使用

下载 官网下载地址&#xff1a;Apache JMeter - Apache JMeter™ 由于jmeter是由java语言编写的&#xff0c;所以要先安装jdk1.8或者以上的版本 配置环境变量 配置classpath环境变量 %JMETER_HOME%\lib\ext\ApacheJMeter_core.jar;%JMETER_HOME%\lib\jorphan.jar;%JMETER_HO…

很详细的单应矩阵分解R、t过程

很详细的单应矩阵分解R、t过程 附赠自动驾驶学习资料和量产经验&#xff1a;链接 已有多种方法将单应矩阵H分解为R、t&#xff0c;在《Deeper understanding of the homography decomposition for vision-based control》一文中介绍了三种方法&#xff1a; O. Faugeras and F.…

react api:forwardRef

forwardRef 允许组件使用 ref 将 DOM 节点暴露给父组件。 ** import { forwardRef } from ‘react’; const MyInput forwardRef(function MyInput(props, ref) { // … }); 使用 forwardRef() 让组件接收 ref 并将其传递给子组件&#xff1a; forwardRef 返回一个可以在 …

Qt Creator 界面

&#x1f40c;博主主页&#xff1a;&#x1f40c;​倔强的大蜗牛&#x1f40c;​ &#x1f4da;专栏分类&#xff1a;QT❤️感谢大家点赞&#x1f44d;收藏⭐评论✍️ 目录 一、认识 Qt Creator 界面 1、总览 2、左边栏 3、代码编辑区 4、UI设计界面 5、构建区 一、认识 …

摄影杂记一

摄影小白&#xff0c;最近买了一台微单&#xff0c;型号是佳能R10&#xff0c;加上18-150套机镜头和佳能RF 50 F1.8定焦镜头。开始学习摄影。 PS&#xff1a;摄影穷三代&#xff0c;单反毁一生。嘿嘿。 一、分镜头拍摄四步提升法 B站&#xff1a;六斤 拍视频三件事&#xff1…