Nuxt（一）

最新推荐文章于 2025-05-20 17:19:11 发布

秃头老大爷

最新推荐文章于 2025-05-20 17:19:11 发布

阅读量2.5k

点赞数 20

CC 4.0 BY-SA版权

文章标签：前端

本文链接：https://blog.youkuaiyun.com/htdkc/article/details/143749461

1.Nuxt概述

NUXT 是一个基于 Vue.js 的轻量级应用框架，可用来创建服务端渲染 (SSR) 应用，也可充当静态站点引擎生成静态站点应用，具有优雅的代码结构分层和热加载等特性。NUXT使用服务端渲染技术，可以获得更快的内容到达时间，无需等待所有的 JavaScript 都完成下载并执行，产生更好的用户体验。服务端渲染又称 SSR (Server Side Render) ，是指在服务端就完成页面的内容，而不是在客户端通过AJAX请求才获取数据

官网:Nuxt: The Intuitive Vue Framework · Nuxt

2.特点

1.服务器端渲染（SSR）

Nuxt 通过在服务器端渲染页面的初始 HTML，将渲染后的页面发送给浏览器。浏览器在接收到 HTML 后可以更快地显示内容，同时搜索引擎爬虫也能够更好地理解页面内容，从而提高 SEO 效果

2.静态站点生成（SSG）

Nuxt 可以根据页面的路由和数据预先生成静态页面。例如，一个博客网站可以在构建阶段就生成每一篇博客文章的静态 HTML 页面，这些页面可以直接部署到静态文件服务器上，访问速度快且成本较低。在部署后，当用户请求页面时，服务器直接发送预先生成的静态页面，无需进行服务器端渲染的计算。

3.自动路由生成

Nuxt 能够根据项目的文件结构自动生成路由。例如，如果有一个pages/index.vue文件，Nuxt 会自动创建一个根路由（/）；如果有一个pages/about.vue文件，会自动生成/about路由。

这种自动路由生成机制简化了路由的配置过程，特别是在构建大型应用时，可以节省大量时间并减少出错的可能性。同时，也方便开发者快速理解和维护项目的路由结构。

4.模块系统

Nuxt 拥有丰富的模块系统。这些模块可以用于扩展 Nuxt 应用的各种功能，如添加样式框架（如 Tailwind CSS、Bootstrap）、集成状态管理工具（如 Vuex）、实现国际化等。

3.工作原理

在服务器端（SSR）
- 当服务器收到一个请求时，Nuxt 会根据请求的路由查找对应的组件。然后，它会在服务器端实例化组件，执行组件的asyncData或fetch方法（如果存在）来获取数据。
- 例如，在一个产品页面组件中，如果有一个asyncData方法用于获取产品详情数据，Nuxt 会在服务器端执行这个方法，获取数据后将数据和组件一起渲染成 HTML。这个 HTML 会被发送到浏览器。
在客户端
- 浏览器接收到服务器发送的 HTML 后，会加载和解析 JavaScript 代码。Nuxt 会将服务器端渲染的内容进行 “激活”，使得页面可以具有交互性。
- 例如，在产品页面中，虽然初始 HTML 已经显示了产品详情，但如果有一个按钮用于添加产品到购物车，这个按钮的交互功能（如更新购物车状态、发送请求到服务器等）会在客户端通过 JavaScript 代码来实现。同时，Nuxt 也会处理客户端的路由导航等功能，确保页面的切换流畅。