Nuxt.js介绍

Nuxt.js 是一个基于 Vue.js 的通用应用框架,一个用于 Vue.js 开发 SSR 应用的一站式解决方案。它的优点是将原来几个配置文件要完成的内容整合在了一个 nuxt.config.js 中,封装与扩展性完美地契合。

Nuxt.js 默认集成了 Vue RouterVuexSSR,构建采用 Webpack 处理代码的自动化构建工作(如打包、代码分层、压缩等)。和 Express 框架相比,两者都是采用 Node.js 服务提供传统的服务端渲染功能,但是 Nuxt.js 主要和 Vue.js 结合,更加适合熟悉 Vue API 的前端开发使用,用户可以把 Nuxt.js 想象成在服务端使用的 Vue.js

Nuxt.js 应用一个完整的服务器请求到渲染的过程如图 10-11 所示。

image 2024 02 24 15 32 24 726
Figure 1. 图10-11 Nuxt.js 渲染流程

Nuxt.js 应用的大部分页面都是采用服务端渲染的(而非 Vue.js 服务端渲染,其更加专注首屏内容),并且这些渲染功能都由服务端进行处理,同时也有一部分组件生命周期在服务端和客户端运行(主要是 beforeCreatecreated),当一个请求进入 Nuxt.js 时,进行容器的初始化,然后执行一些中间件逻辑,包括组件到 DOM 的生成和布局等,然后经过一些校验,最后进入 asyncData 方法,这个方法是 Nuxt.jsVue 组件上扩展的用来获取异步数据的方法,使得可以在设置组件的数据之前能够异步进行处理,最终将组件、DOM 和数据结合生成 HTML 返回给浏览器进行渲染。当客户端浏览器进行渲染时,也会执行 Nuxt.jsbeforeCreatedcreated 方法。

总结下来,如果项目完全依赖服务端渲染,并且相对复杂,再加上比较熟悉 Node.js 后端相关的技术,采取 Nuxt.js 来开发项目是一个不错的选择。