一、Nuxt 简介

欢迎来到您的实践 Nuxt.js Web 开发之旅。在本章中，我们将查看 Nuxt 内部，看看是什么构成了这个框架。我们将带您了解 Nuxt 的功能，您将了解 Nuxt 所支持的不同类型应用的优缺点。最后但并非最不重要的一点是，您将发现将 Nuxt 用作通用 SSR 应用、静态站点生成器和单页应用的巨大潜力。

在本章中，我们将介绍以下主题：

• 从 Vue 到 Nuxt
• 为什么要使用 Nuxt？
• 申请类别
• Nuxt 作为通用 SSR 应用
• Nuxt 作为静态站点生成器
• Nuxt 作为单页应用

让我们开始吧！

从 Vue 到 Nuxt

Nuxt 是一个更高级别的 Node.js web 开发框架，用于创建 Vue 应用，可在两种不同模式下开发和部署：通用（SSR）或单页应用（SPA）。此外，您可以在 Nuxt 中将 SSR 和 SPA 部署为静态生成的应用。即使您可以选择 SPA 模式，Nuxt 的全部功能仍在于其通用模式或用于构建通用应用的服务器端渲染（SSR）。通用应用用于描述可以在客户端和服务器端执行的 JavaScript 代码。但是，如果您希望开发一个经典的（或标准的/传统的）SPA，它只在客户端执行，您可能需要考虑使用香草 VUE。

Note that an SPA mode Nuxt app is slightly different from a classic SPA. You will find out more about it later in this book and briefly in this chapter.

Nuxt 是在 Vue 之上创建的，具有一些额外的功能，如异步数据、中间件、布局、模块和插件，这些功能先在服务器端执行应用，然后在客户端执行应用。这意味着该应用的渲染速度通常比传统的服务器端（或多页）应用快。

Nuxt 与以下软件包一起预安装，因此您无需安装它们，而您可以在标准 Vue 应用中进行安装：

• Vue（https://vuejs.org/ ）
• Vue 路由（https://router.vuejs.org/ ）
• Vuex（https://vuex.vuejs.org/ ）
• Vue 服务器渲染器（https://ssr.vuejs.org/ ）
• Vue 元（https://vue-meta.nuxtjs.org/ ）

除此之外，Nuxt 还使用 webpack 和 Babel 编译代码，并将其与以下 webpack 加载程序捆绑在一起：

• Vue 加载器（https://vue-loader.vuejs.org/ ）
• 巴别塔装载机（https://webpack.js.org/loaders/babel-loader/ ）

简而言之，webpack 是一个模块绑定器，可以绑定 JavaScript 应用中的所有脚本、样式、资产和图像，而 Babel 是一个 JavaScript 编译器，可以将下一代 JavaScript（ES2015+）编译或传输到与浏览器兼容的 JavaScript（ES5），以便您可以在当前浏览器上运行代码。

For more information about webpack and Babel, please visit https://webpack.js.org/ and https://babeljs.io/, respectively.

当您通过 JavaScriptimport语句或require方法导入文件时，webpack 使用他们所谓的加载程序对文件进行预处理。您可以编写加载程序，但在 Vue 文件中编译代码时不必这样做，因为它们是由 Babel 社区和 Vue 团队为您创建的。我们将在下一节中发现 Nuxt 附带的强大功能以及这些加载程序提供的功能。

为什么要使用 Nuxt？

Nuxt 等框架的存在是因为传统 SPA 的缺点和多页应用（MPAs的服务器端呈现）。我们可以将 Nuxt 视为服务器端渲染 MPA 和传统 SPA 的混合体。因此，它被称为“普遍的”或“同构的”。因此，能够进行服务器端渲染是 Nuxt 的定义特性。在本节中，我们将带您了解 Nuxt 的其他突出功能，这些功能将使您的应用开发变得轻松有趣。我们将介绍的第一个功能允许您通过在文件中使用.vue扩展名来编写单文件 Vue 组件。

编写单文件组件

有几种方法可以用来创建 Vue 组件。使用Vue.component创建一个全局 Vue 组件，如下所示：

Vue.component('todo-item', {...})

另一方面，可以使用普通 JavaScript 对象创建本地 Vue 组件，如下所示：

const TodoItem = {...}

如果在小型项目中使用 Vue，这两种方法是可管理和可维护的，但是在大型项目中，如果同时有大量具有不同模板、样式和 JavaScript 方法的组件，则很难管理这两种方法。

因此，单文件组件应运而生，在这种情况下，我们只为每个 Vue 组件使用一个.vue文件。如果你的应用中需要不止一个组件，那么只需将它们分成多个.vue文件即可。在每个组件中，您都可以编写仅与特定组件相关的模板、脚本和样式，如下所示：

// pages/index.vue
<template>
  <p>{{ message }}</p>
</template>

<script>
export default {
  data () {
    return { message: 'Hello World' }
  }
}
</script>

<style scoped>
p {
  font-size: 2em;
  text-align: center;
}
</style>

在这里，您可以看到我们如何拥有一个 HTML 模板，该模板打印来自 JavaScript 脚本的消息，以及描述模板表示的 CSS 样式，所有这些都在一个.vue文件中。这使您的代码更具组织性和可读性。真好，不是吗？这只能通过vue-loader和网页包实现。在 Nuxt 中，我们只在.vue文件中写入组件，而不管它们是/components/、/pages/还是/layouts/目录中的组件。我们将在第 2 章Nuxt入门中对此进行更详细的探讨。现在，我们来看看 Nuxt 特性，它允许您直接编写 ES6JavaScript。

写作 ES2015+

Nuxt 可以直接编译 ES6+代码，而无需担心在 webpack 中配置和安装 Babel。这意味着您可以直接编写 ES6+代码，您的代码将被编译成 JavaScript，可以在旧浏览器上运行。例如，在使用asyncData方法时，您经常会看到以下解构赋值语法：

// pages/about.vue
<script>
export default {
  async asyncData ({ params, error }) {
    //...
  }
}
</script>

前面的代码中使用了解构赋值语法，将 Nuxt 上下文中的属性解包为不同的变量，我们可以将这些变量用于asyncData方法中的逻辑。

For more information about the Nuxt context and ECMAScript 2015 features, please visit https://nuxtjs.org/api/context and https://babeljs.io/docs/en/learn/, respectively.

只有通过babel-loader和 webpack 才能使用 Nuxt 编写 ES6。您可以在 Nuxt 中编写的不仅仅是解构赋值语法，还包括async函数、await运算符、arrow函数、import语句等等。CSS 预处理器呢？如果您使用流行的 CSS 预处理器（如 Sass、Less 或手写笔）编写 CSS 样式，但是如果您是 Sass 人员，而不是 Less 人员，也不是手写笔人员，Nuxt 可以支持其中任何一种吗？简而言之，答案是肯定的。我们将在下一节找到这个问题的详细答案。

用预处理器编写 CSS

在 Nuxt 中，您可以选择您最喜欢的 CSS 预处理器来编写应用的样式，无论是 Sass、Less 还是手写笔。它们已在 Nuxt 中为您预先配置。您可以在查看他们的配置 https://github.com/nuxt/nuxt.js/blob/dev/packages/webpack/src/config/base.js 。因此，您只需要在 Nuxt 项目中安装预处理器及其网页包加载器。例如，如果希望使用 Less 作为 CSS 预处理器，只需在 Nuxt 项目中安装以下依赖项：

$ npm i less --save-dev
$ npm i less-loader --save-dev

然后，您可以通过在<style>块中将lang属性设置为“Less”来开始编写 Less 代码，如下所示：

// pages/index.vue
<template>
  <p>Hello World</p>
</template>

<style scoped lang="less">
@align: center;
p {
  text-align: @align;
}
</style>

从这个示例中，您可以看到，编写现代 CSS 样式与用 Nuxt 编写现代 JavaScript 一样简单。所有你需要做的就是安装你最喜欢的 CSS 预处理器和它的网页包加载器。在接下来的章节中，我们将在本书中使用较少的内容，但现在，让我们了解 Nuxt 提供的其他功能。

有关这些预处理器及其网页包加载程序的更多信息，请访问以下链接：

• http://lesscss.org/ 价格更低
• https://webpack.js.org/loaders/less-loader/ 对于较少的装载机
• https://sass-lang.com/ 用于 Sass
• https://webpack.js.org/loaders/sass-loader/ 用于 sass 装载机
• http://stylus-lang.com/ 用于手写笔
• https://github.com/shama/stylus-loader 用于触针加载器

Even though PostCSS is not a preprocessor, if you want to use it in a Nuxt project, please visit the guide provided at https://nuxtjs.org/faq/postcss-plugins.

使用模块和插件扩展 Nuxt

Nuxt 是在模块化体系结构的基础上创建的。这意味着您可以为您的应用或 Nuxt 社区扩展无限的模块和插件。这也意味着你可以从 Nuxt 和 Vue 社区中选择大量的模块和插件，这样你就不必为你的应用重新设计它们。链接如下：

• 上的 Awesome numxt.jshttps://github.com/nuxt-community/awesome-nuxt#official 用于 Nuxt 模块
• 上的精彩 Vue.jshttps://github.com/vuejs/awesome-vue#components--Vue 组件、库和插件的库

模块和插件只是 JavaScript 函数。现在不要担心它们之间的区别；我们将在第 6 章编写插件和模块中讨论这一点。

添加路由之间的转换

与传统的 Vue 应用不同，在 Nuxt 中，您不必使用包装器<transition>元素来处理元素或组件上的 JavaScript 动画、CSS 动画和 CSS 转换。例如，如果您想在导航到特定页面时将fade转换应用到该页面，您只需将转换名称（例如fade）添加到该页面的transition属性中即可：

// pages/about.vue
<script>
export default {
  transition: {
    name: 'fade'
  }
}
</script>

然后，您可以在.css文件中创建过渡样式：

// img/transitions.css
.fade-enter,
.fade-leave-to {
  opacity: 0;
}

.fade-leave,
.fade-enter-to {
  opacity: 1;
}

.fade-enter-active,
.fade-leave-active {
  transition: opacity 3s;
}

当导航到/about路线时，“淡入”转换将自动应用于about页面。很酷，不是吗？如果代码或类名在这一点上对您来说有点难以理解，请不要担心；我们将在第 4 章、添加视图、路线和过渡中详细介绍此过渡功能。

管理元素

此外，与传统的 Vue 应用不同，您可以直接管理应用的<head>块，而无需安装额外的 Vue 包来处理它—vue-meta。您只需通过head属性将<title>、<meta>和<link>所需的数据添加到任何页面。例如，您可以通过应用的 Nuxt 配置文件管理全局<head>元素：

// nuxt.config.js
export default {
  head: {
    title: 'My Nuxt App',
    meta: [
      { charset: 'utf-8' },
      { name: 'viewport', content: 'width=device-width, initial-scale=1' },
      { hid: 'description', name: 'description', content: 'My Nuxt app is 
       about...' }
    ],
    link: [
      { rel: 'icon', type: 'img/x-icon', href: '/favicon.ico' }
    ]
  }
}

Nuxt 将为您将此数据转换为 HTML 标记。同样，我们将在第 4 章添加视图、路线和过渡中了解此功能并对其进行更详细的探讨。

使用 Web 包绑定和拆分代码

Nuxt 使用 webpack 将代码打包、缩小并拆分成块，从而加快应用的加载速度。例如，在一个包含两个页面（index/home 和 about）的简单 Nuxt 应用中，客户端会得到类似的块：

Hash: 0e9b10c17829e996ef30 
Version: webpack 4.43.0 
Time: 4913ms 
Built at: 06/07/2020 21:02:26 
                         Asset       Size  Chunks                         Chunk Names 
../server/client.manifest.json   7.77 KiB          [emitted]               
                      LICENSES  389 bytes          [emitted]               
                app.3d81a84.js   51.2 KiB       0  [emitted] [immutable]  app 
        commons/app.9498a8c.js    155 KiB       1  [emitted] [immutable]  commons/app 
commons/pages/index.8dfce35.js   13.3 KiB       2  [emitted] [immutable]  commons/pages/index 
        pages/about.c6ca234.js  357 bytes       3  [emitted] [immutable]  pages/about 
        pages/index.f83939d.js   1.21 KiB       4  [emitted] [immutable]  pages/index 
            runtime.3d677ca.js   2.38 KiB       5  [emitted] [immutable]  runtime 
 + 2 hidden assets 
Entrypoint app = runtime.3d677ca.js commons/app.9498a8c.js app.3d81a84.js

服务器端的数据块如下所示：

Hash: 8af8db87175486cd8e06 
Version: webpack 4.43.0 
Time: 525ms 
Built at: 06/07/2020 21:02:27 
               Asset       Size  Chunks             Chunk Names 
      pages/about.js   1.23 KiB       1  [emitted]  pages/about 
      pages/index.js   6.06 KiB       2  [emitted]  pages/index 
           server.js   80.9 KiB       0  [emitted]  app 
server.manifest.json  291 bytes          [emitted]   
 + 3 hidden assets 
Entrypoint app = server.js server.js.map

这些区块和构建信息是在您使用 Nuxtnpm run build命令构建应用进行部署时生成的。我们将在第 14 章中使用 linter、格式化器和部署命令更详细地了解这一点。

除此之外，Nuxt 还使用了 webpack 中的其他优秀功能和插件，如静态文件和资产服务（资产管理）、热模块替换、CSS 提取（extract-css-chunks-webpack-plugin）、构建和观看时的进度条（webpackbar）等等。有关更多信息，请访问以下链接：

• https://webpack.js.org/guides/code-splitting/ 用于代码拆分
• https://webpack.js.org/concepts/manifest/ 用于舱单

• https://webpack.js.org/guides/asset-management/ 用于资产管理

• https://webpack.js.org/concepts/hot-module-replacement/ 用于热模块更换

• https://webpack.js.org/plugins/mini-css-extract-plugin/ 用于 CSS 提取
• https://github.com/nuxt/webpackbar webpackbar的（Nuxt 核心团队开发的插件）

这些来自 webpack、Babel 和 Nuxt 本身的强大功能将使您的现代项目开发变得有趣和简单。现在，让我们来看看各种应用类型，看看为什么在构建下一个 Web 应用时应该使用或不应该使用 NUXT。

申请类别

今天的 web 应用与几十年前的 web 应用大不相同。在那些日子里，我们的选择和解决方案越来越少。今天，它们正在开花。无论我们称它们为“应用”还是“应用”，它们都是一样的。在本书中，我们将称之为“应用”。因此，我们可以将当前的 web 应用分类如下：

• 传统的服务器端渲染应用
• 传统温泉
• 通用 SSR 应用
• 静态生成的应用

让我们逐一了解它们的优缺点。我们首先来看最古老的应用类型——传统的服务器端渲染应用。

传统的服务器端渲染应用

服务器端呈现是在屏幕上的浏览器上将数据和 HTML 传递到客户端的最常用方法。当网络产业刚刚起步时，这是唯一的方法。在传统的服务器呈现的应用或动态网站中，每个请求都需要从服务器重新呈现到浏览器的新页面。这意味着您将在发送到服务器的每个请求中再次重新加载所有脚本、样式和模板。重新加载和重新渲染的想法听起来一点也不令人信服和优雅。尽管现在使用 AJAX 可以减轻一些重新加载和重新渲染的负担，但这会增加应用的复杂性。

让我们来看看这些类型应用的优缺点。

优点：

• 更好的搜索引擎优化性能：由于客户端（浏览器）获得包含所有数据和 HTML 标记的完成页面，特别是属于该页面的元标记，搜索引擎可以抓取该页面并对其进行索引。
• 更快的初始加载时间：由于页面和内容在发送到客户端浏览器之前由服务器端脚本语言（如 PHP）在服务器端呈现，因此我们在客户端快速获取呈现的页面。此外，不需要像传统 SPA 那样编译 JavaScript 文件中的网页和内容，因此应用在浏览器上加载速度更快。

缺点：

• 较差的用户体验：由于每个页面都需要重新呈现，并且此过程需要在服务器上花费时间，因此用户必须等待所有内容重新加载到浏览器上，这可能会影响用户体验。大多数情况下，我们只在新请求提供时才需要新数据；我们不需要重新生成 HTML 基，例如导航栏和页脚，但无论如何，我们都会重新呈现这些基元素。我们可以使用 AJAX 只渲染特定组件，但这会使开发更加困难和复杂。
• 后端和前端逻辑紧密耦合：视图和数据通常在同一个应用中一起处理。例如，在典型的 PHP 框架应用（如 Laravel）中，您可以呈现视图（https://laravel.com/docs/7.x/views ），带有模板引擎，如拉威尔帕格（https://github.com/BKWLD/laravel-pug 在一条路线上。或者，如果您将 Express 用于传统的服务器端渲染应用，则可以使用模板引擎，如 Pug（https://pugjs.org/api/getting-started.html 或 vuexpress（https://github.com/vuexpress/vuexpress 用于渲染视图（https://expressjs.com/en/guide/using-template-engines.html 。对于典型的传统服务器端渲染应用，在这两个框架中，视图与后端逻辑耦合，即使我们可以使用模板引擎提取视图层。后端开发人员必须知道什么是视图（例如，home.pug）用于每个特定的路由或控制器。另一方面，前端开发人员必须在与后端开发人员相同的框架内处理视图。这增加了项目的复杂性。

传统单页应用（SPA）

与服务器端呈现的应用不同，SPA 是客户端呈现（CSR）应用，使用 JavaScript 在浏览器中呈现内容，而不需要在使用过程中重新加载新页面。因此，您不需要将内容呈现到 HTML 文档中，而是从服务器获取基本的 HTML，内容将使用 JavaScript 在浏览器中加载，如下所示：

<!DOCTYPE html>
<html>
<head>
  <meta charset="utf-8">
  <title>Vue App</title>
</head>
<body>
  <div id="app"></div>
  <script src="https://unpkg.com/vue/dist/vue.js" type="text/javascript"></script>
  <script src="/path/to/app.js"type="text/javascript"></script>
</body>
</html>

这是一个非常简单的 Vue 应用，其中有一个容器<div>，其中只有app作为 ID，里面没有其他内容，后跟两个<script>元素。第一个<script>元素将加载 Vue.js 库，第二个将加载呈现应用内容的 Vue 实例，如下所示：

// path/to/app.js
const app = new Vue({
  data: {
    greeting:'Hello World!'
  },
  template: '<p>{{ greeting }}</p>'
}).$mount('#app')

让我们来看看这种应用的优缺点。

优点：

• 更好的用户体验：SPA 在初始加载后呈现内容时速度更快。大多数资源，如 CSS 样式、JavaScript 代码和 HTML 模板，在应用的整个生命周期内只加载一次。之后只会来回发送数据；基本 HTML 和布局保持不变，因此提供了流畅和更好的用户体验。

• 更容易开发和部署：SPA 开发相对更容易启动，不需要服务器和服务器端脚本语言。您只需使用file://URI从本地机器开始开发即可。它也更容易部署，因为它由 HTML、JavaScript 和 CSS 文件组成；你可以把它们放到远程服务器上，然后马上上线。

缺点：

• 搜索引擎性能差：SPA 是赤裸裸的单一 HTML 页面，大多没有标题和段落标签供搜索引擎爬虫爬行。SPA 内容是通过 JavaScript 加载的，爬虫程序通常无法执行，因此 SPA 在 SEO 中通常表现不佳。
• 初始加载时间慢：大多数资源，如 CSS 样式、JavaScript 代码和 HTML 模板，在应用的整个生命周期内只加载一次，因此我们需要在开始时一次加载大量这些资源文件。通过这样做，应用的初始加载时间通常会变慢，尤其是在大型 SPA 中。

通用服务器端渲染应用（SSR）

正如我们在上一节中了解到的，传统的服务器端渲染应用和 SPA 都有优点和缺点。编写 SPA 有很多好处，但也有一些东西你会失去：网络爬虫遍历你的应用的能力，以及在应用最初加载时降低性能。这与编写传统的服务器端渲染应用相反，还有一些东西是你没有的，比如更好的用户体验和 SPA 中客户端开发的乐趣。理想情况下，客户端渲染和服务器端渲染可以根据用户体验和性能进行平衡。这就是通用服务器端渲染（SSR）弥补差距的地方。

自 2009 年 Node.js 发布以来，JavaScript 已经成为一种同构语言。同构的意思是，代码可以在客户端和服务器端同时运行。同构（通用）JavaScript 可以定义为客户端和服务器端应用的混合体。这是一种新的 web 应用方法，可以弥补传统 SSR 应用和传统 SPA 的缺点。这就是 Nuxt 所属的类别。

在 universal SSR 中，您的应用将首先在服务器端预加载、预呈现页面，并将呈现的 HTML 发送到浏览器，然后在其剩余生命周期内切换到客户端操作。从头开始构建通用 SSR 应用可能会很乏味，因为在实际开发过程开始之前需要进行大量配置。这就是 Nuxt 的目标，它通过预设您轻松创建 SSR Vue 应用所需的所有配置来实现。

尽管通用 SSR 应用是现代 web 开发中的一个很好的解决方案，但这些类型的应用仍然有其优缺点。让我们检查一下。

优点：

• 更快的初始加载时间：在 universal SSR 中，JavaScript 和 CSS 被分割成块，资产被优化，页面在服务于客户端浏览器之前在服务器端呈现。所有这些选项都有助于加快初始加载时间。
• 更好的 SEO 支持：由于在客户端提供服务之前，所有页面都在服务器端以适当的元内容、标题和段落呈现，因此搜索引擎爬虫可以遍历页面以提高应用的 SEO 性能。
• 更好的用户体验：通用 SSR 应用在初始加载后就像传统 SPA 一样工作，页面和路由之间的转换是无缝的。只有数据在不重新呈现 HTML 内容的情况下来回传输。所有这些功能都有助于提供更好的总体用户体验。

缺点：

• 需要 Node.js 服务器：在服务器端运行 JavaScript 需要一个 Node.js 服务器，因此必须先设置服务器，然后才能使用 Nuxt 编写应用。
• 复杂的开发：java T1。在通用 SSR 应用中运行 JavaScript 代码可能会混淆，因为一些 java 脚本插件和库只在客户端运行，例如引导和 ZURB 基金会用于样式和 DOM 操作。

静态生成的应用

静态生成的应用在静态站点生成器的帮助下预生成，并作为静态 HTML 页面存储在托管服务器上。Nuxt 附带一个nuxt generate命令，该命令可从您在 Nuxt 中开发的通用 SSR 或 SPA 应用中为您生成现成的静态页面。在构建步骤中，它会将每个路由的 HTML 页面预呈现到生成的/dist/文件夹中，如下所示：

-| dist/
----| index.html
----| favicon.ico
----| about/
------| index.html
----| contact/
------| index.html
----| _nuxt/
------| 2d3427ee2a5aa9ed16c9.js
------| ...

您可以将这些静态文件部署到静态托管服务器，而无需 Node.js 或任何服务器端支持。因此，当应用最初加载到浏览器上时——无论您请求的是哪条路线——您都将立即获得完整内容（如果是从 universal SSR 应用导出的），并且应用将在之后像传统 SPA 一样运行。

让我们来看看这些类型应用的优缺点。

优点：

• 快速初始加载时间：由于每个路由都是预先生成的静态 HTML 页面，有自己的内容，因此在浏览器上加载速度很快。
• 有利于 SEO:静态生成的 web 应用允许搜索引擎完美地抓取 JavaScript 应用，就像传统的服务器端渲染应用一样。
• 更容易部署：因为静态生成的 web 应用只是静态文件，这使得它们更容易部署到 GitHub 页面等静态托管服务器。

缺点：

• 无服务器端支持：由于静态生成的 web 应用只是静态 HTML 页面，仅在客户端运行，这意味着 Nuxt 的nuxtServerInit操作方法和 Node.js HTTP 请求和响应对象没有运行时支持，它们仅在服务器端可用。所有数据都将在构建步骤中预呈现。
• 无实时渲染：静态生成的 web 应用适用于只提供构建时预渲染的静态页面的应用。如果您正在开发一个需要从服务器进行实时渲染的复杂应用，那么您可能应该使用 universal SSR 来替代 Nuxt 的全部功能。

从这些类别中，您可能已经发现 Nuxt 与通用 SSR 应用和静态生成的应用是一致的。除此之外，它也与单页应用一致，但与传统 SPA 不同，您将在第 15 章中了解更多关于与 Nuxt创建 SPA 的内容。

现在，让我们更好地看看 Nuxt 关于您将在本书中创建的应用的类型。我们将从 Nuxt 开始，它是一个通用的 SSR 应用。

Nuxt 作为通用 SSR 应用

许多年前，我们使用服务器端脚本语言（如 ASP、Java、服务器端 JavaScript、PHP 和 Python）来创建具有模板引擎的传统服务器端应用，以呈现应用的视图。这导致了我们在上一节中遇到的紧耦合缺点。

因此，随着 Nuxt、Next（等通用 SSR 框架的兴起 https://nextjs.org/ 、角度通用（https://angular.io/guide/universal ），我们可以利用它们的全部功能，通过替换模板引擎（如 Pug）（来将视图与服务器端脚本应用永久解耦 https://pugjs.org/ 、车把（https://handlebarsjs.com/ 、细枝（https://twig.symfony.com/ ），还有更多我们一直在深度回复的内容。如果我们认为 Nuxt 是一个 Tay-T12-前端服务器端 To1313App 和 Express（或其他）一个 Ty14 T14 后端服务器端 SUT1515 应用，我们可以看到它们是如何完美互补的。例如，我们可以使用 Express 在localhost:4000处创建一个后端服务器端应用，用于在 API 路由（例如，/）上以 JSON 格式提供数据：

{
  "message": "Hello World"
}

然后，在前端服务器端，我们可以使用 Nuxt 作为在localhost:3000上运行的通用 SSR 应用，通过从我们的 Nuxt 应用中的页面发送 HTTP 请求来使用上述数据，如下所示：

// pages/index.vue
async asyncData ({ $http }) {
  const { message } = await $http.$get('http://127.0.0.1:4000')
  return { message }
}

现在，我们将 Nuxt 作为服务器和客户端，处理应用的视图和模板，而 Express 只处理服务器端逻辑。我们不再需要模板引擎来展示我们的内容。因此，这一次，也许我们不需要学习那么多模板引擎，也不需要担心它们之间的斗争，因为我们现在有了通用的引擎——Nuxt。

我们将向您展示如何在 Nuxt 和 Koa（另一个 No.js 服务器端框架类似于 Express）中创建跨域应用，在第 12 章 AuthT1 中，AuthT2 创建用户登录和 API 身份验证 T3。

Note that in the preceding code, we used the Nuxt HTTP module to make the HTTP request. However, we will mostly use vanilla Axios or theNuxt Axios modulethroughout this book for HTTP requests. For more information about the Nuxt HTTP module, please visit https://http.nuxtjs.org/.

You also can use the Nuxt Content module to act as headless CMS so that you can serve your app content from Markdown, JSON, YAML, XML, and CSV files that can be stored "locally" in your Nuxt project. However, in this book, we will be using and creating external APIs to serve our content in order to avoid the tightly coupled issue that we found in the traditional server-side apps in the first place. For more information about the Nuxt Content module, please visit https://content.nuxtjs.org/.

Nuxt 作为静态站点生成器

尽管服务器端渲染是 Nuxt 的主要功能，但它还是一个静态站点生成器，用于在静态站点中预渲染 Nuxt 应用，如为静态生成的应用类别提供的示例所示。在传统的单页应用和服务器端呈现的应用之间，它可能是两个世界中最好的。虽然可以从静态 HTML 内容中获得更好的 SEO，但您不再需要 Node.js 和 Nuxt 的运行时支持。但是，您的应用仍将像 SPA 一样运行。

更重要的是，在静态生成过程中，Nuxt 有一个爬虫程序，可以对应用中的链接进行爬网，生成动态路由，并将远程 API 中的数据保存为payload.js文件，保存在/dist/文件夹中的/static/文件夹中。然后，这些有效负载用于服务最初从 API 请求的数据。这意味着您不再调用 API。这可以保护您的 API 不受公众的攻击，也可能不受攻击者的攻击。

在第 14 章中，您将学习如何使用 linter、格式化器和部署命令从 Nuxt 使用远程 API 生成静态站点，在本书的最后一章第 18 章中，您将使用 CMS 和 GraphQL创建 Nuxt 应用。

Nuxt 作为单页应用

如果您有任何原因阻止将 Nuxt 用作服务器端渲染应用，Nuxt 非常适合开发单页应用。正如我们在本章开头提到的，Nuxt 提供了两种开发应用的模式：universal和spa。这意味着您只需在项目配置中的mode属性中指定spa，我们将在下一章详细探讨。

所以，您可能会想，如果我们可以使用 Nuxt 开发 SPA，那么为什么还要再使用 Vue 呢？事实上，您可以从 Nuxt 开发的 SPA 与 Vue 开发的 SPA 略有不同。从 Vue 构建的 SPA 是传统 SPA，而从 Nuxt 构建的 SPA 是“静态”SPA（我们称之为 Nuxt SPA）——您的应用页面在构建时预先呈现。这意味着部署 Nuxt SPA 在技术上与静态生成 Nuxt universal SSR 应用相同–两者都需要相同的 Nuxt 命令：nuxt generate。

这可能会令人困惑，您可能想问，静态生成的 SSR 应用和静态生成的 SPA 之间有什么区别？区别非常明显——与静态生成的 SSR 应用相比，静态生成的 SPA 没有页面内容。静态生成的 SPA 与您的应用页面和“空”HTML 一起预先呈现，就像传统的 SPA 一样，没有页面内容。这是令人困惑的，但请放心，我们将在本书接下来的章节中解决所有这些问题。特别是，您将了解在 Nuxt 中开发 SPA 的权衡以及如何克服这些权衡。

您将在第 15 章、使用 Nuxt创建 SPA 中学习如何开发 Nuxt SPA 并使用远程 API 生成静态 Nuxt SPA。

总结

做得好！你已经完成了进入 Nuxt 旅程的第一章。在本章中，您了解了 Nuxt 框架的组成部分；也就是说，Vue（Nuxt 的起源）、webpack 和 Babel。您了解了 Nuxt 提供的各种功能，例如编写 Vue 单文件组件（.vue文件）、ES2015+JavaScript（ES6）、带有预处理器的 CSS（Sass、Less、触控笔）的能力。您还可以使用模块和插件扩展应用，添加应用路由之间的转换，管理应用中每个路由或页面的<head>元素和元内容。除此之外，您还介绍了从 webpack 和 Babel 导入的大量优秀功能，例如捆绑、缩小和拆分代码。您还了解到，您可以从 Nuxt 社区为您的 Nuxt 项目访问大量插件和模块。

除了这些强大的功能外，您还了解了每种可用应用的优缺点：传统服务器端渲染应用、传统单页应用（SPA）、通用服务器端渲染应用（SSR）和静态生成应用。您还了解到，Nuxt 应用实际上与通用 SSR 应用和静态生成应用的类别一致。然后，您了解到 Nuxt 也适用于单页应用，但与传统 SPA 不同。最后，您研究了将 Nuxt 用于通用 SSR 应用、静态生成的应用和单页应用，本书将详细介绍所有这些应用。

在下一章中，您将学习如何安装 Nuxt 和创建一个简单的 Nuxt 应用，并了解 Nuxt 脚手架工具附带的默认目录结构。您还将了解如何自定义 Nuxt 应用，并了解 Nuxt 中提供的资产。所以，请继续关注！

---

版权属于：月萌API www.moonapi.com，转载请注明出处

本文链接：https://moonapi.com/news/12875.html