2-《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》初识Nuxt3

《手把手教您使用Nuxt3框架(Nuxt3中文开发教程)》全文电子档将分章节陆续在“nuxt”微信订阅号原创发布，敬请关注。如果您等不及，急切提前阅读和实操，可以在订阅号中有偿获取完整电子教程和后续持续更新版本。

本教程配套示例源码下载和在线预览网址：https://www.dvtop.cn

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

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

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

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

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

2.1 框架特色

使用Vue3构建您的下一个应用，体验混合渲染、强大的数据获取和新功能。Nuxt3是一个开源框架，使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 构成 —— 没有额外的步骤。

2.2 渲染流程

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

2.3 版本演进

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

功能 / 版本	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	√	√	√