简介

Nuxt是一个在MIT许可下的开源框架，用于构建现代和高性能的网络应用，可以部署在任何运行JavaScript的平台上。

什么是Nuxt？

为了了解Nuxt是什么，我们需要了解我们需要什么来创建一个现代的应用程序:

• 带来响应式和web组件的JavaScript框架, 我们选择 Vue.js.
• 一个支持开发中热模块替换的打包器以及将你的代码打包到生产, 我们同时支持 webpack 5 和 Vite.
• 一个转码器，用于编写最新的JavaScript语法，同时支持传统的浏览器, 我们使用 esbuild 来实现.
• 一个在开发中为你的应用提供服务的服务器, 同时也支持 服务端渲染 或 API 路由, Nuxt 使用 h3 支持部署的多样性 例如 serverless, workers, Node.js 以及无与伦比的性能.
• 一个处理客户端导航的路由库, 我们选择 vue-router.

这只是冰山一角，想象一下，你必须为你的项目设置所有这些，使其工作，然后，随着时间的推移维护它。自2016年10月以来，我们一直在这样做，调整所有的配置，为任何Vue应用程序提供最佳的优化和性能。

Nuxt处理了这个问题，并提供了前台和后台的功能，所以你可以专注于重要的事情: 创建你的web应用.

视图引擎

Nuxt使用Vue.js作为视图引擎。所有Vue 3的功能都可以在Nuxt中使用。你可以在关键概念部分阅读关于Vue与Nuxt整合的细节。

Automation and conventions

Nuxt uses conventions and an opinionated directory structure to automate repetitive tasks and allow developers to focus on what matters. The configuration file can still customize and override its default behaviors.

• Auto-imports
• File-system routing and API layer
• Data-fetching utilities
• Zero-config Typescript support
• Configured build tools

渲染模式

Nuxt提供不同的渲染模式，以适应不同的使用情况:

• 通用渲染（服务器端渲染和水合）
• 仅在客户端进行渲染
• 完全静态网站的生成
• 混合渲染（按路由的缓存策略）

服务器引擎

Nuxt的服务器引擎 Nitro 解锁新的全栈能力.

在开发过程中，它使用Rollup和Node.js workers来处理你的服务器代码和上下文隔离。它还通过读取server/api/中的文件和server/middleware/中的服务器中间件生成你的服务器API。

在生产中，Nitro将你的应用程序和服务器构建到一个通用的.output目录中。这个输出是轻量级的: 最小化并删除任何Node.js模块（polyfills除外）。你可以在任何支持JavaScript的系统上部署这个输出，从Node.js、Serverless、Workers、Edge-side渲染或纯粹的静态。

生产就绪

Nuxt应用程序可以部署在Node或Deno服务器上，预先渲染以托管在静态环境中，或部署到serverless和边缘供应商。

模块化

模块系统允许用自定义功能和与第三方服务的集成来扩展Nuxt。

架构

Nuxt是由不同 核心包 组成的:

• 核心引擎: nuxt
• 打包器: @nuxt/vite-builder 和 @nuxt/webpack-builder
• 命令行界面: nuxi
• 服务器引擎: nitro
• 开发套件: @nuxt/kit
• Nuxt 2 Bridge: @nuxt/bridge

我们建议阅读每个概念，以全面了解Nuxt的能力和每个包的范围。

Are you Nuxt?

Nuxt是你的Vue.js项目的骨干，在保持灵活性的同时，给予你的项目结构以信心。

通过强大的模块生态系统和钩子引擎的扩展，它可以很容易地连接你的REST或GraphQL端点，最喜欢的CMS，CSS框架和更多。对PWA和AMP的支持只需要一个模块就可以完成你的Nuxt项目。

Contribute

Do you want to get involved in the evolution of Nuxt? Follow the contribution guide 👉