Nuxt

互联网前端技术的发展总是适应着用户需求和互联网环境变化，从传统页面和数据混合一起的 SSR（服务端渲染），到前后台分离的 CSR（客户端渲染），再到基于 Nuxt 的混合渲染，都是为了满足各种场景下应用的需求，并没有谁好谁差，也有可能同一个项目使用多种方式组合使用，最终适合自己应用和最高性价比的就是最佳。

Nuxt 是基于 Vite、Vue3 和 Nitro 的 Nuxt 框架的全新重写，具有一流的 TypeScript 支持，是两年多研究、社区反馈、创新和实验的结果。

Nuxt.js 是基于 Vue.js 创建的混合渲染应用框架，一般使用 Nuxt.js 多是用来解决 SEO 的问题。

Nuxt.js 和 Vue.js 也有些区别，主要包括：目标产物、网页渲染流程、部署流程、项目入口页面、路由配置、vite 配置、生命周期、后台数据获取、状态持久化等。

注意：Nuxt 使用 MIT 许可证，意味着您在软件和软件的所有副本中包含版权声明和许可声明后，就有使用、复制、修改、合并、出版发行、散布、再授权及贩售软件及软件的副本的权利。

框架特色

使用 Vue3 构建您的下一个应用，体验混合渲染、强大的数据获取和新功能。Nuxt 是一个开源框架，使 Web 开发变得简单而强大。

更轻量	更快	Hybrid
以现代浏览器为目标的情况下，服务器部署和客户端产物最多可达 75 倍的减小。	用动态服务端代码分割来优化冷启动，由 Nitro 提供能力。	增量静态生成和其他高级模式现在都成为可能。
Suspense	Composition API	Nuxt CLI
导航前后皆任何组件中获取数据。	使用 Composition API 和 Nuxt 3 的 composables 实现真正的可复用性。	全新的零依赖体验，助您轻松搭建项目和集成模块。
Nuxt Devtools	Nuxt Kit	Webpack 5
更多的信息和快速修复，在浏览器中高效工作。	全新的基于 TypeScript 和跨版本兼容的模块开发。	更快的构建速度和更小的构建产物，并且零配置。
Vite	Vue3	TypeScript
用 Vite 作为你的打包器，体验轻量级的快速 HMR。	Vue3 会成为您下一个应用的坚实基础。	由原生 TypeScript 和 ESM 构成 —— 没有额外的步骤。

渲染流程

Nuxt 的渲染方式可以通过约定或配置来划分（包括客户端渲染、服务端渲染、混合渲染），也可以通过部署方式决定（如 CDN 边缘计算渲染），以适应各种应用场景。其实日常应用较多的是混合渲染，以下图介绍渲染总体流程。

版本演进

对 Nuxt 最近 3 个版本进行比较，Nuxt 是混合渲染开发的首选。

功能 / 版本	Nuxt 2	Nuxt Bridge	Nuxt 3
Vue	2	2	3
Stability	Stable	Semi-stable	Stable
Performance	√Fast	√√Faster	√√√Fastest
Nitro Engine	×	√	√
ESM support	Partial	Better	√
TypeScript	Opt-in	Partial	√
Composition API	×	Partial	√
Options API	√	√	√
Components Auto Import	√	√	√
<script setup> syntax	×	Partial	√
Auto Imports	×	√	√
webpack	4	4	5
Vite	Partial	Partial	√
Nuxi CLI	×	nuxi	nuxi
Static sites	√	√	√

知识准备

如果您对 JavaScript 不了解，请先访问附 2 网站简单学习后再使用本教程。Nuxt 推荐使用 Typescript（是 JavaScript 的一个超集），可增加代码的可读性和可维护性，但也可以使用 JavaScript 语言，代码文件使用扩展名 *.js 或 *.ts 区分，在 Vue 中使用 <script lang="js"></script> 或 <script lang="ts"></script> 来区分。对于初学者，推荐先使用 JavaScript（js）。

如果您对 Vue 不了解，请先简单学习 vue3 后再使用本教程。Nuxt 使用 Vue3 的 script 写法，如选项式 API 或组合式 API（推荐），再引用 Nuxt 的 API 一起使用，两种方式不能同时出现。

对于不熟悉的知识点可以边学习边查资料实践，本教程实操完成后，您将系统理解 Nuxt 体系、优劣和各技术点，能基于 Nuxt 独立开发和部署项目。