nuxt3使用记录一:框架摸索

2024-04-07 09:12

本文主要是介绍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方式更小。

这篇关于nuxt3使用记录一:框架摸索的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/882193

相关文章

postgresql使用UUID函数的方法

《postgresql使用UUID函数的方法》本文给大家介绍postgresql使用UUID函数的方法,本文给大家介绍的非常详细,对大家的学习或工作具有一定的参考借鉴价值,需要的朋友参考下吧... 目录PostgreSQL有两种生成uuid的方法。可以先通过sql查看是否已安装扩展函数,和可以安装的扩展函数

如何使用Lombok进行spring 注入

《如何使用Lombok进行spring注入》本文介绍如何用Lombok简化Spring注入,推荐优先使用setter注入,通过注解自动生成getter/setter及构造器,减少冗余代码,提升开发效... Lombok为了开发环境简化代码,好处不用多说。spring 注入方式为2种,构造器注入和setter

MySQL中比较运算符的具体使用

《MySQL中比较运算符的具体使用》本文介绍了SQL中常用的符号类型和非符号类型运算符,符号类型运算符包括等于(=)、安全等于(=)、不等于(/!=)、大小比较(,=,,=)等,感兴趣的可以了解一下... 目录符号类型运算符1. 等于运算符=2. 安全等于运算符<=>3. 不等于运算符<>或!=4. 小于运

使用zip4j实现Java中的ZIP文件加密压缩的操作方法

《使用zip4j实现Java中的ZIP文件加密压缩的操作方法》本文介绍如何通过Maven集成zip4j1.3.2库创建带密码保护的ZIP文件,涵盖依赖配置、代码示例及加密原理,确保数据安全性,感兴趣的... 目录1. zip4j库介绍和版本1.1 zip4j库概述1.2 zip4j的版本演变1.3 zip4

Python 字典 (Dictionary)使用详解

《Python字典(Dictionary)使用详解》字典是python中最重要,最常用的数据结构之一,它提供了高效的键值对存储和查找能力,:本文主要介绍Python字典(Dictionary)... 目录字典1.基本特性2.创建字典3.访问元素4.修改字典5.删除元素6.字典遍历7.字典的高级特性默认字典

Zabbix在MySQL性能监控方面的运用及最佳实践记录

《Zabbix在MySQL性能监控方面的运用及最佳实践记录》Zabbix通过自定义脚本和内置模板监控MySQL核心指标(连接、查询、资源、复制),支持自动发现多实例及告警通知,结合可视化仪表盘,可有效... 目录一、核心监控指标及配置1. 关键监控指标示例2. 配置方法二、自动发现与多实例管理1. 实践步骤

使用Python构建一个高效的日志处理系统

《使用Python构建一个高效的日志处理系统》这篇文章主要为大家详细讲解了如何使用Python开发一个专业的日志分析工具,能够自动化处理、分析和可视化各类日志文件,大幅提升运维效率,需要的可以了解下... 目录环境准备工具功能概述完整代码实现代码深度解析1. 类设计与初始化2. 日志解析核心逻辑3. 文件处

一文详解如何使用Java获取PDF页面信息

《一文详解如何使用Java获取PDF页面信息》了解PDF页面属性是我们在处理文档、内容提取、打印设置或页面重组等任务时不可或缺的一环,下面我们就来看看如何使用Java语言获取这些信息吧... 目录引言一、安装和引入PDF处理库引入依赖二、获取 PDF 页数三、获取页面尺寸(宽高)四、获取页面旋转角度五、判断

C++中assign函数的使用

《C++中assign函数的使用》在C++标准模板库中,std::list等容器都提供了assign成员函数,它比操作符更灵活,支持多种初始化方式,下面就来介绍一下assign的用法,具有一定的参考价... 目录​1.assign的基本功能​​语法​2. 具体用法示例​​​(1) 填充n个相同值​​(2)

Spring StateMachine实现状态机使用示例详解

《SpringStateMachine实现状态机使用示例详解》本文介绍SpringStateMachine实现状态机的步骤,包括依赖导入、枚举定义、状态转移规则配置、上下文管理及服务调用示例,重点解... 目录什么是状态机使用示例什么是状态机状态机是计算机科学中的​​核心建模工具​​,用于描述对象在其生命