1. NUXT.JS框架简介

本文档中的 PDF 已发布 |HERE|。

本文的示例可通过 |HERE| 获取。

本文属于四篇系列文章之一：

这些都是面向初学者的文档。各文章虽有逻辑关联，但耦合度较低：

文档 [1] 介绍了 PHP 7 语言。仅对 PHP 语言感兴趣、而不关注后续文章中 JavaScript 语言的读者可止步于此；
文档 [2-4] 旨在为文档 [1] 中开发的税费计算服务器构建一个 JavaScript 客户端；
第3和第4篇文章中提到的JavaScript框架[vue.js]和[nuxt.js]，需要掌握ECMASCRIPT最新版本（即第6版）的JavaScript知识。因此，文档 [2] 专为不熟悉该版本 JavaScript 的用户而设计。该文档引用了文档 [1] 中构建的税款计算服务器。阅读[2]文档时，读者有时可能需要参考[1]文档；
一旦掌握了 ECMASCRIPT，即可开始学习 VUE.JS 框架，该框架支持构建在 SPA 模式（单页应用程序）下于浏览器中运行的 JavaScript 客户端。即文档 [3]。该文档既涉及文档 [1] 中构建的税款计算服务器，也涉及文档 [2] 中构建的独立 JavaScript 客户端代码。阅读 [3] 文档时，有时需要参考 [1] 和 [2] 文档；
一旦掌握了 VUE.JS，即可开始学习 NUXT.JS 框架，该框架可用于构建在 SSR 模式（服务器端渲染）下于浏览器中运行的 JavaScript 客户端。它既引用了[1]文档中构建的税款计算服务器，在[2]中构建的独立JavaScript客户端代码，以及在[3]文档中开发的[vue.js]应用程序。因此，阅读 [4] 的读者有时需要参考 [1]、[2] 和 [3] 这三个文档；

本文档延续了文档 [3] 中基于框架 VUE.JS 所开展的工作。

本节关注以下架构：

在 [1] 中，Web 浏览器向用户显示来自 [3] 服务器的 [5, 7] Web 页面。这些网页包含实现 [2] 数据 Web 服务客户端的 JavaScript，以及实现 [3] 网页片段服务器的客户端；
在 [2] 中，Web 服务器是一个数据服务器。它可以采用任何编程语言编写。它不会生成传统意义上的网页（如 HTML、CSS、JavaScript），除非是第一次运行。但该首页可从传统Web服务器（[3]，非数据服务器）获取。随后，初始页面的JavaScript将通过向充当数据服务器的Web服务器（[2]）获取待显示的数据（[4]），从而生成应用程序的各个网页。它还可以从网页服务器 [3] 获取网页片段 [5] 来包装这些数据；
在 [4] 中，用户发起操作；
在 [6,7] 中：他接收由网页片段包装的数据；

[nuxt.js] |https://fr.nuxtjs.org/| 框架将使我们能够实现以下功能：

应用程序的首页由服务器 [node.js] [3] 提供。此外，应用程序的其他页面也位于同一服务器上。当用户在浏览器中手动输入其 URL 时，这些页面会被交付。这些页面嵌入了 [vue.js] 应用程序（大致如此）；
一旦首页在浏览器中加载完毕，该应用程序便表现得如同一个典型的 [vue.js] 应用程序。在上述示意图中，它将与数据服务器 [2] 进行交互；

最终，该应用程序的行为与 [vue.js] 应用程序一致，但第一页以及用户手动输入 URL 时除外。在这些情况下，页面将从 [3] 服务器上获取。当搜索引擎请求应用程序的各个页面时，它会从 [3] 服务器获取页面。这些页面可能已针对 SEO 进行了优化（搜索引擎优化）。而在[vue.js]应用程序中，搜索引擎收到的页面（SEO）则意义不大。例如，在文档[3]的税务计算服务器客户端应用程序中，浏览器在启动应用程序时收到的页面如下：


<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <link rel="icon" href="/client-vuejs-impot/favicon.ico">
    <title>vuejs</title>
  <link href="/client-vuejs-impot/app.js" rel="preload" as="script"></head>
  <body>
    <noscript>
      <strong>We're sorry but vuejs doesn't work properly without JavaScript enabled. Please enable it to continue.</strong>
    </noscript>
    <div id="app"></div>
    <!--生成的文件将被自动注入 -->
  <script type="text/javascript" src="/client-vuejs-impot/app.js"></script></body>
</html>

这是浏览器加载的唯一页面。应用程序中的所有其他页面均由 JavaScript 动态生成，无需浏览器介入。某些搜索引擎仅满足于此页面。而另一些则更进一步，会执行页面中包含的 JavaScript（如上文第 9 行）。此时会生成另一页面。该页面可能包含异步操作以获取待显示的数据。在此情况下，搜索引擎不会等待，因此最终呈现的将是未完成的页面。大家或许还记得，我们的税务计算服务器客户[vue.js]就是这种情况：在加载第一页的过程中，它会异步地与税务计算服务器初始化一个jSON会话。在此特定情况下，这不会影响搜索引擎抓取的页面。但对于其他应用程序，这可能会在 SEO 方面造成负面影响。

通过 [nuxt.js]，我们可以为应用程序的每一页向搜索引擎提供更具代表性的页面。

本文档中的脚本均附有注释，并附有控制台执行结果。部分内容还提供了补充说明。阅读本文档需主动思考：要理解一个脚本，必须同时阅读其代码、注释及执行结果。

文档中的示例可在此处查看。

服务器应用程序 PHP 7 可在此处进行测试。

Serge Tahé，2019年12月