大家好，我是村长。欢迎大家开启 Nuxt 全栈开发学习之旅！

第一篇我们称为概念篇。为什么我们要先从概念讲起哪？主要原因是不少小伙伴前端开发的时间不久，大家普遍接触的是 SPA 应用开发，且仅限于前端部分，对一些传统开发模式、渲染模式及服务端知识知之甚少，所以如果我们直接开始项目开发，可能会让大家对一些操作感到疑惑，因此我们先了解概念，给大家做一些铺垫。

在概念篇中，我们主要给大家介绍以下方面内容：

• Nuxt 特性和架构；
• 四种渲染模式差异和选择。

Vue 栈上层框架最佳选择

Nuxt 是一个基于 Vue 的上层全栈通用框架，它提供了大量优秀特性提升开发效率和体验，因此是 Vue 栈上层框架的最佳选择之一。

尤雨溪曾多次在各种前端大会中大力推荐 Nuxt，去年底 Nuxt3 稳定版正式发布，这是我们上手 Nuxt3 的最佳时刻，不管是 API，还是框架稳定性，亦或生态繁荣程度大家都不需要担心，我们会在后面教程中给大家演示诸多三方库的整合方法。

同时 Nuxt 也可以在全栈开发、SPA（单页应用）、SSR（服务端渲染）同构开发、SSG（静态站点生成）等场景发挥巨大作用，我们在后续的案例和项目中都会讨论和演示这些开发模式。

下面我们就带大家快速体验 Nuxt 提供的这些优秀特性。

开箱即用的开发环境

开发者对一款现代框架的一个重要要求就是开箱即用。在这方面 Nuxt 提供了如下能力：

• 整合 Vue3 作为视图引擎；
• 整合 Webpack5 和 Vite 作为打包工具；
• 提供最新 ES 语法，零配置 TS 支持；
• 内置 vue-router，基于文件的路由；
• 内置 SSR 友好的全局状态管理模块；
• 内置数据访问模块 useFetch 等等。

良好的开发体验

良好的开发体验主要来源于效率工具和避免重复劳动，这方面我们看一下 Nuxt 提供的能力：

• 基于文件的路由支持；
• 组件、依赖库、工具集的自动导入；
• 内置的数据获取模块和新的编程范式；
• 零配置的 TS 支持；
• 插件、模块、中间件等多种复用机制。

服务端能力

Nuxt 内置了 Nitro 服务端引擎，能够同时提供 SSR 和 API 路由支持，这也就是说，除了能够提供服务端渲染能力，我们还能编写服务端接口，这使我们拥有了全栈开发能力。另外 API 兼容 node、connect、express，未来也可以把应用发布到 Node.js、Serverless 等服务器运行环境。

不同场景解决方案

为了满足开发者多种场景开发需求，Nuxt 提供了 5 种渲染模式：

• 服务端渲染 SSR；
• 客户端渲染 SPA；
• 全静态内容生成 SSG；
• 混合渲染模式 Hybrid；
• 边缘渲染 Edge-render。

在后面章节中，我们也将给大家详细介绍这几种模式的异同和选择。

扩展能力

比起传统 Vue 项目，Nuxt 给予我们更多扩展能力和复用能力：

• 中间件：针对单个路由的扩展；
• 插件：针对 NuxtApp 的扩展；
• 模块：扩展 Nuxt 核心能力以及简化整合能力；
• 层：针对 Nuxt 应用的组件、工具和配置复用能力。

Nuxt 整体架构

Nuxt 框架由一些包组成，它们各有不同作用：

• 核心引擎：nuxt，实现核心功能，串联所有模块；

• 打包：@nuxt/vite-builder、@nuxt/webpack-builder；

• 命令行工具：nuxi，创建、调试、打包项目等；

• 服务端引擎：nitro，服务端渲染，API 路由；

• 开发包：@nuxt/kit，用于 Nuxt 模块开发；

• Nuxt 2 桥：@nuxt/bridge，用于 Nuxt2 项目中使用 Nuxt3 特性。

总结

本节全面了解 Nuxt 特性，以及它能给我们开发者带来什么。同时了解了 Nuxt 框架中各个组成包，实际开发中，由于有 nuxt 作为串联，除了 nuxi 之外，我们很少接触到其他包。但是如果我们要开发 Nuxt 模块，我们就需要用到 @nuxt/kit，或者我们想要在已有的 Nuxt2 项目中使用 Nuxt3 特性，我们就会需要用到 @nuxt/bridge。

预告

下一节，我们将全面了解 Nuxt 提供的 5 种渲染模式，这将为后续项目开发打好基础。