[译]Nuxt 3 入门指南 - 前言 ｜ 青训营笔记

Sefank
341 阅读4分钟

这是我参与「第五届青训营」伴学笔记创作活动的第 13 天。

Nuxt 同时提供前端和后端功能，因此开发者可以专注于重要的事情：创建 Web 应用程序。

什么是Nuxt？

要了解 Nuxt 是什么，我们需要了解创建现代应用程序需要什么：

  • JavaScript 框架

    可引入响应式开发范式和 Web 组件的 JavaScript 框架，这里我们选择了 Vue.js。

  • Webpack 和 Vite

    一个 bundler，支持开发时的热模块替换（HMR）以及用于生产环境的代码打包（bundle），我们同时支持 Webpack 和 Vite。

  • 最新的 JavaScript 语法

    在支持传统浏览器的同时编写最新的 JavaScript 语法的代码转译工具，我们使用 esbuild 来实现这一点。

  • 服务端

    提供在开发时承载所开发应用的服务器，同时也要支持服务端渲染（Server-Side Rendering, SSR）或是 API 路由，Nuxt 使用 h3 来满足适用于多个用途的部署要求（serverless、worker、Node.js）并提供无与伦比的性能。

  • 路由库

    提供能处理客户端页面跳转（Navigation）的路由库，这里我们选择了 vue-router。

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

Nuxt 负责处理这些事情，并提供前端和后端功能，这样你就可以专注于重要的事情：创建你的Web应用程序。

视图引擎

Nuxt 使用 Vue.js 作为视图引擎。所有 Vue 3 功能在 Nuxt 中都可用。您可以在关键概念一节中阅读有关 Vue 与 Nuxt 集成的详细信息。

自动化和开发约定

Nuxt 使用约定和预设的目录结构来自动化重复性任务，并允许开发人员专注于功能开发。配置文件仍然可以自定义和覆盖其默认行为。

  • 自动导入
  • 文件系统路由和API层
  • 数据获取（Fetch）实用程序
  • 零配置 Typescript 支持
  • 预配置的构建工具

在关键概念一节了解更多信息。

渲染模型

Nuxt 提供不同的渲染模式以适应各种用例：

  • 通用渲染（服务器端渲染和脱水/注水）
  • 仅客户端渲染
  • 全静态站点生成
  • 混合渲染（按路由缓存策略）

在 Nuxt 渲染模式一节了解更多信息。

服务器引擎

Nuxt 服务器引擎 Nitro 解锁了新的全栈功能。

在开发模式中，它使用 Rollup 和 Node.js Worker 处理服务器代码并实现上下文隔离。它生成服务器API（定义于server/api/）以及服务器中间件（定义于server/middleware/）。

在生产模式中，Nitro 会将您的应用程序和服务器构建到一个统一的.output目录中。输出的产物是轻量化的：经过了压缩（minified），且去除了所有 Node.js 模块（polyfill 除外）。您可以将此输出部署到任何支持JavaScript的系统上，例如 Node.js、Serverless、Worker、边缘渲染（Edge-side rendering），甚至是纯静态系统。

在 Nuxt 服务器引擎一节了解更多信息。

生产就绪(production-ready)

Nuxt 应用程序可以部署在 Node 或 Deno 服务器上，可预渲染后托管于静态系统，也可部署到 serverless 和边缘节点提供商（edge provider）。

在部署一节了解更多信息。

模块化

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

在模块一节了解更多信息。

架构

Nuxt 由不同的核心包（core package）组成：

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

总结

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

它可通过强大的模块生态系统和钩子引擎进行扩展，使您可以轻松连接 REST 或 GraphQL Endpoint、最受欢迎的内容管理系统、CSS 框架等。PWA 和 AMP 支持距离您的 Nuxt 项目只有一个模块。

avatar
文章
阅读
粉丝