1. NUXT.JS 框架入门

本文档的PDF版本可在此处获取 |HERE|。

本文中的示例可在此处获取 |HERE|。

本文是四篇系列文章中的一篇：

|通过示例了解 PHP7|；

这些都是面向初学者的文档。文章遵循逻辑顺序，但彼此关联较为松散：

文档 [1] 介绍了 PHP 7 语言。仅对 PHP 感兴趣、而不关注后续文章中涉及的 JavaScript 的读者，请在此停止阅读；
文档 [2–4] 旨在为文档 [1] 中开发的税费计算服务器构建一个 JavaScript 客户端；
第3和第4篇文档中涉及的JavaScript框架[vue.js]和[nuxt.js]需要掌握ECMAScript的最新版本，特别是第6版。因此，文档[2]专为不熟悉该版本JavaScript的读者而设计。它引用了文档[1]中构建的税费计算服务器。因此，阅读[2]的读者有时需要回溯查阅文档[1]；
一旦掌握了 ECMAScript 6，我们就可以转向 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]。这些网页包含JavaScript代码，该代码实现了Web数据服务[2]的客户端，以及Web页面片段服务器[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>
    <!-- built files will be auto injected -->
  <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月