Nuxt入门

Nuxt是什么 ，有什么特点

1 是一个通用的 vue.js 框架，用于构建服务器端的渲染
2.基于文件的路由： 通过 page/ 目录结构定义路由，更好的组织应用程序，避免手动配置路由的需要
3.代码分割：自动把代码分成小块，有助于减少应用程序初始加载时间
4.内置服务器渲染
5.自动导入：在各自的目录中编写 vue 组件和可组合函数，使用时无需手动导入，享受树摇和优化 js 捆绑包的好处
6.数据获取工具：提供可用于处理与服务器渲染兼容的数据获取的可组合函数
7.零配置的 Typescript 支持：可以自动生成类型和 tsconfig.json 配置文件
8.配置好的构建工具：默认使用 Vite来支持开发中的热模块替换，在生产中将代码打包成符合最佳实践的形式

Nuxt 可以提供前端和后端功能，可以专注与创建 Web 工具

服务器端渲染

1. Nuxt 默认具备内置的服务器渲染能力（ssr），无需自己配置服务器，可以提供更快更高效的用户体验，改善搜索引擎优化和可访问性
2. Nuxt 是一个多功能框架，可以将整个应用程序静态渲染为静态托管，使用nuxt generate进行部署，通过ssr: false选项在全局禁用 SSR，通过设置routeRules选项实现混合渲染。

• 更快的初始化页面加载时间：Nuxt 向浏览器发送完全渲染的html页面可以立即显示，可以提供更快地页面加载时间和更好的用户体验（UX），特别是在网络比较慢的情况下
• 改善SEO：搜索引擎可以更好的索引SSR页面，html的内容立即可用不需要依赖JavaScript在客户端渲染内容
• 在低功率设备上的更好性能：减少了需要再客户端下载和执行JavaScript量，对于处理重型JavaScript应用程序可能有困难的低功率设备非常有益
• 更好的访问性：内容在初始化页面加载时立即可用，改善了依赖屏幕阅读器和其他辅助技术的用户的可访问性
• 更容易的缓存：页面可以在服务器端缓存，通过减少生成和发送内容所需的时间进一步提供性能

服务器引擎

• Nuxt的服务器引擎 [Nitro]开启了全新的全栈能力
• 开发中使用 Rollup 和Node.js 工作线程处理服务器代码和上下文隔离，通过读取server/api/ 中的文件生成你的服务器API，读取server/middleware/中的文件生成服务器中间件
• 在生产中，Nitro将应用程序和服务器构建为一个通用的.output目录。这个输出是轻量级的，通过压缩，不包含任何的Node.js模块（polyfills除外）
• 可以把输出不输到支持的JavaScript的任何系统上，包括Node.js、无服务器（Serverless）、Workers、边缘渲染或纯静态环境

模快化（在后面几节中）

Nuxt架构

Nuxt由不同的核心包组成：

• 核心引擎：nuxt
• 打包工具：@nuxt/vite-builder 和 @nuxt/webpack-builder
• 命令行界面：nuxi
• 服务器引擎：nitro
• 开发工具包：@nuxt/kit
• Nuxt 2桥接：@nuxt/bridge