Nuxt3：自动导入渲染模式服务器引擎生产部署模块化

什么是Nuxt？

Nuxt是Vue.js项目的支柱，在保持灵活性的同时，提供了构建项目的结构。

构建一个 现在的Web 程序 需要什么

• JS 框架[提供了反应性和web 组件] Vue / React
• 路由库 [处理客户端路由库]
• 构建工具 [支持热模块替换和在生产中解析代码] Vite / Webpack
• 编译器 [可以在支持旧浏览器的同时编写最新的JavaScript语法] esbuild
• 应用服务 [后台数据支撑以及服务端渲染等] Node / Go / Java

Nuxt 特性

1. 自动化和约定

自动导入

• Nuxt 自动导入
• Vue 自动导入 (Vue 属性和生命周期 自动导入)
• 基础目录导入Nuxt直接自动导入在定义目录中创建的文件:
  • components/ for Vue components.
  • composables/ for Vue composables.
  • utils/ for helper functions and other utilities.
• Explict 导入
• 关闭自动导入

2. 无须配置TypeScript

3.渲染模式

1.服务端渲染

优点

1. 性能好 [用户可以立即访问页面的内容 ]
2. SEO优化好

缺点

1. 服务器和浏览器环境不提供相同的api

2.客户端渲染

优点

1. 开发速度快 [无须担心代码服务器兼容性，可以直接使用 window这样浏览器专用API]
2. 支持离线 [因为代码完全运行在浏览器中，它可以很好地保持工作，即使互联网不可用]

缺点

1. 性能不佳 [用户需要等待浏览器下载，解析和运行JS文件。 根据网络和设备，加载需要一些时间]
2. SEO优化差 [因为搜索引擎爬虫在第一次尝试索引页面时不会等待界面完全呈现。您的内容将花更多的时间在纯客户端呈现的搜索结果页面中显示和更新]

3. 静态站点生成

4. 混合渲染

混合呈现允许每个路由使用路由规则不同的缓存规则，并决定服务器应该如何响应给定URL上的新请求。

服务器引擎 Nitro

Nitro 引擎 文档

Nuxt服务器引擎Nitro解锁新的全栈功能。 它还通过读取server/API/中的文件和从server/middleware/中的服务器中间件生成服务器API。

生产部署

部署文档

Nuxt应用程序可以部署在Node或Deno服务器上，预呈现为托管在静态环境中，或者部署到无服务器和边缘提供程序。

模块化

开发 Nuxt 模块文档

可以集成第三方服务到项目中。