Nuxt3入门

---

前言

上一篇文章（了解Vue3预渲染）探讨了Vue的预渲染方案，但是预渲染对于首屏有动态内容的网页还是有着较大的局限性，需要考虑使用SSR（服务端渲染），所以这篇文章来介绍一下基于Vue的SSR方案，即Nuxt框架，同时也会陆续把最近学习Nuxt3框架过程中的一些心得体会记录下来，分享给大家。那么开始吧~

---

一、Nuxt是什么？

1.SSR概念

SSR全称是 Server-Side Rendering，即服务端渲染。与客户端渲染 CSR（Client-Side Rendering）不同的是，SSR输出的是一个渲染完成的HTML，整个渲染过程是在服务器端进行的。 用户访问网址后得到的是一个完全呈现的HTML 页面，其中包含网站所需的所有信息，无需等待任何 JavaScript 或 CSS 文件加载。这意味着访问网站的用户将能够比在等待JavaScript 文件加载时只是看着空白屏幕更快地看到所有内容；另外搜索引擎爬虫可以直接看到完全渲染的页面，也有利于网页搜索引擎优化，即 SEO（Search Engine Optimization）。

2.Nuxt

Nuxt 是一个基于Vue.js的、可用来创建服务端渲染（SSR）应用的通用应用框架，对应 React 技术栈的叫做 Next.js 框架，两者名字长得很像，都是支持 SSR 技术的框架，由于我没使用过Next.js，所以无法对比就不介绍了Next了，只对比 Nuxt2 。

Nuxt3优势
①：全面拥抱Vue3
②：全面支持TypeScript
③：自动导入与引用（包括 Vue3 的 setup 语法）
④：支持所有渲染模式和所有环境
⑤：充分支持Vue生态系统（如：Vite、Pinia）

特点：
①：基于目录结构约定式开发
②：允许使用路由规则为每个路由使用不同的渲染模式或缓存策略

3.Hydration概念

当浏览器请求启用通用（服务器端+客户端）渲染的 URL 时，服务器会向浏览器返回完全渲染的 HTML 页面。无论页面是提前生成并缓存还是动态渲染，在某个时刻，Nuxt 都会在服务器环境中运行 JavaScript (Vue.js) 代码，生成 HTML 文档。用户立即获得我们应用程序的内容，这与客户端渲染相反。此步骤类似于PHP 或 Ruby 应用程序执行的传统服务器端渲染。
为了不失去客户端渲染方法的优点，例如动态界面和页面转换，一旦下载了 HTML 文档，客户端（浏览器）就会加载在后台服务器上运行的 JavaScript 代码。浏览器再次解释它（因此称为通用渲染），Vue.js 控制文档并启用交互性。
使静态页面在浏览器中具有交互性称为Hydration。（"Hydration"有翻译为“水化”，也有翻译为“水合作用”）

二、Nuxt3准备

1.Node版本

Nuxt3 需要在 Node.js 版本 v16.10.0 或以上运行，在终端输入以下命令可查看当前node版本号。

node -v

附个 Node.js 官网地址 ，看看最新Node.js版本出到多少了，有没有惊讶到了。

2.nvm

我们在项目开发过程中，不同的项目可能依赖不同版本的NodeJS，当然不可能为了一个项目卸载重装Node，通常使用 nvm 这个工具管理版本，NVM：Node Version Manage，即Node的版本管理工具。使用NVM，可以很方便地在多个NodeJS版本之间进行切换。安装NVM前，建议先卸载电脑上现有的NodeJS。

• NVM 官网
• NVM for Windows

nvm ls               // 查看已安装node版本
nvm install vXX      // 安装对应vXX版本的node
nvm uninstall vXX    // 卸载对应vXX版本的node
nvm use xxx          // 选择使用XXX版本

三、创建一个Nuxt3应用

npx nuxi init <project-name>

创建完并且安装好依赖后就可以运行dev命令开启本地服务器访问页面了，Welcome to Nuxt!

运行命令	描述
npm run dev	启动开发服务器
npm run build	打包命令。使用混合渲染模式创建一个.output目录，其中包含所有应用程序、服务器和依赖项，可用于生产。可通过node、pm2等启动后提供WEB服务。
npm run generate	打包之后每个页面都生成了HTML页面，只有首屏的数据是之前渲染好了，但是其它数据还是从后台获取，要想改变首屏的数据的话，需要重新打包发布才行。可以部署在任何静态托管服务上。
npm run preview	运行build命令后启动服务器以预览应用程序
npm run postinstall	在应用程序中创建.nuxt目录并生成类型

四、应用场景

Nuxt.js是一个非常强大的框架，但是并不是所有类型的网页都必须使用SSR技术。由于使用SSR需要服务端渲染每一个请求，对服务器资源要求高，尤其是高并发访问的情况，会大量占用服务端CPU资源。我们需要根据业务需求来决定使用什么技术栈去开发页面。

1.SSR

如果项目首屏是动态数据的，对首屏速度要求高且很在乎在搜索引擎的排名，可以考虑使用SSR。

2.SSG

如果项目首屏数据与用户不是强关联的、内容相对稳定的且需要SEO的可以考虑使用预渲染 SSG（Static Site Generation），Nuxt也可以做SSG，避免服务端的渲染压力。

3.CSR

如果网站只是内部产品不需要SEO，或者项目较小不太在意首屏性能的，或者项目是富交互和动态内容的应用，那么还是直接用Vue是最明智的选择。可以通过优化项目体积及其他优化方法如：骨架屏或者添加loading图等方式来优化用户体验。

---

总结

以上就是全部内容，这篇文章主要介绍了SSR方面的概念，以及创建了 Nuxt3 框架的应用。在前端领域技术确实是日新月异，Nuxt3目前来说还是一门比较新的技术，同时也是选择VUE技术栈去做SSR比较完善的解决方案，所以值得我们去学习这个框架，“技多不压身”。学习任何一门语言框架初期都离不开看文档和多做实战项目这两个步骤，后续我会继续分享总结Nuxt3的实践心得。

如果此篇文章对您有帮助，欢迎您【点赞】、【收藏】！也欢迎您【评论】留下宝贵意见，共同探讨一起学习~

---

扩展阅读

• Nuxt 官网
• Nuxt 中文网