01. Nuxt3简介与环境搭建

1. 前言
2. Nuxt3 的简介
3. Nuxt3 的安装
4. Nuxt3 的优势介绍
5. 结语

前言

笔者从 Nuxt2.x 开始接触这个框架，当年的选型，也主要因为它提供了开箱即用的 vue SSR 方案。当然，项目开始这一路走来，遇到的坑非常的多。不过相对于的技术收获也是很大的，因为我们不得不在这趟旅程中，接触许多平常未曾涉及的知识体系，这些对我们前端开发而言，大有裨益。

接下来，笔者也将用通俗易懂的文字和图片，带你进入 Nuxt3 的世界。

Nuxt3 的简介

Nuxt3 是基于 Vue3 发布的 SSR 框架，也是 Vue 全家桶系列的一员。如果你了解 Nuxt2，应该也了解 Nuxt3 的使命和用途。但是如果你不了解，你需要先知道两个概念。

• SPA 应用：也就是单页应用，这些多是在客户端的应用，不能进行 SEO 优化（搜索引擎优化）。
• SSR 应用：在服务端进行渲染，渲染完成后返回给客户端，每个页面有独立的 URL，对 SEO 友好。

所以如果你开发的应用是企业网站、商品展示 、博客这类型的展示型网站，就需要使用搜索引擎喜欢的 SSR 应用。当我们明白这两个概念后，再来看 Nuxt3 的使命。因为 Vue 开发的应用默认是单页应用（SPA 应用），但如果你想针对于搜索优化，就需要使用 Vue 的 SSR 模式开发，而 Nuxt3 就是 Vue 的 SSR 开发的框架。

上图是截取的 Nuxt3 官网的图片，列出 Nuxt3 的新特性，一共 12 个，让我们快速来解读一下。

1. 更轻量：以现代浏览器为基础的情况下，服务器部署和客户端产物最多减小 75 倍。
2. 更快：用动态服务端代码来优化冷启动。
3. Hybird：增量动态生成和其他高级模式现在都成为可能。
4. Suspense: 导航前后可在任何组件中获取数据。
5. Composition API : 使用 Composition API 和 Nuxt3 的 composables 实现真正的可复用性。
6. Nuxt CLI ： 权限的零依赖体验，助你轻松搭建项目和集成模块。
7. Nuxt Devtools ：专属调试工具，更多的信息和快速修复，在浏览器中高效工作。
8. Nuxt Kit ：全新的基于 TypeScript 和跨版本兼容的模块开发。
9. Webpack5 ： 更快的构建速度和更小的构建包，并且零配置。
10. Vite：用 Vite 作为你的打包器，体验轻量级的快速 HMR。
11. Vue3 ： 完全支持 Vue3 语法，这一点特别关键。
12. TypeScript：由原生 TypeScript 和 ESM 构成，没有额外配置步骤。

结语

以上就是本文关于 Nuxt3 教程的简介和环境搭建全部内容，如果你正好想学习 Nuxt3 的知识，就关注前端博客，下节我们将编写第一个 Nuxt3 的 Hello World 和讲解 Nuxt3 的目录结构相关知识，精彩不容错过哦！