在现代 web 应用程序开发中，单页应用程序（Single Page Application，简称 SPA）是一种非常流行的方式。SPA 通过 JavaScript 动态更新页面内容，而不是使用传统的多页应用程序（Multi-page Application，简称 MPA）方式，这使得 SPA 具有更好的用户体验。
在本文中，我们将介绍如何使用 Express.js 和 Vue.js 创建一个单页应用程序。我们将探讨如何设置 Express.js 服务器，如何使用 Vue.js 创建前端应用程序，以及如何将两者结合起来创建一个完整的单页应用程序。
Express.js 服务器
Express.js 是一个流行的 Node.js web 应用程序框架，它提供了许多功能，例如路由、中间件、模板引擎等等。在本文中，我们将使用 Express.js 作为我们的服务器框架。
首先，我们需要安装 Express.js。打开命令行工具，并在项目文件夹中输入以下命令：
--- ------- ------- ------
安装完成后，我们可以创建一个名为 server.js 的新文件，并添加以下代码：
----- ------- - ------------------ ----- --- - --------- --------------------------------- ---------------- -- -- - ------------------- ------- -- ---- ------ --
在这段代码中，我们创建了一个新的 Express.js 应用程序实例，并将其保存在变量 app 中。我们还使用 app.use() 方法将 public 文件夹设置为静态文件夹，以便我们可以在其中放置我们的前端应用程序文件。最后，我们使用 app.listen() 方法启动服务器并将其设置为监听端口 3000。
Vue.js 前端应用程序
Vue.js 是一个流行的前端 JavaScript 框架，它允许我们轻松地创建交互式的用户界面。在本文中，我们将使用 Vue.js 创建我们的前端应用程序。
首先，我们需要安装 Vue.js。打开命令行工具，并在项目文件夹中输入以下命令：
--- ------- --- ------
安装完成后，我们可以创建一个名为 index.html 的新文件，并添加以下代码：
--------- -----
------
------
--------- -----------
-------
------
---- ---------
-- ------- --
------
------- ------------------------------------------------
--------
--- --- - --- -----
--- -------
----- -
-------- ------ -----
-
--
---------
-------
-------在这段代码中，我们创建了一个包含一个 div 元素的 HTML 文件。我们还在 head 元素中添加了一个标题，并在 body 元素中添加了一个 div 元素。我们还在 body 元素中添加了一个 Vue.js 脚本，该脚本创建了一个新的 Vue.js 实例，并将其绑定到 div 元素上。最后，我们在 Vue.js 实例的 data 属性中设置了一个名为 message 的变量，并在 div 元素中使用了它。
现在我们可以在浏览器中打开 index.html 文件，并看到 Hello Vue! 的消息。
结合 Express.js 和 Vue.js
现在我们已经创建了一个 Express.js 服务器和一个 Vue.js 前端应用程序。我们需要将它们结合起来创建一个完整的单页应用程序。
首先，我们需要将 Vue.js 应用程序文件放置在 public 文件夹中。我们可以将 index.html 文件重命名为 index.ejs，并使用以下代码替换 div 元素：
---- --------- ----- ------- ------ ------- ----------------------------------- ---------------- ------
在这段代码中，我们添加了一个按钮元素，该元素使用 Vue.js 的 v-on 指令绑定了一个 click 事件，该事件将调用 Vue.js 实例的 reverseMessage 方法。我们还在 p 元素中添加了一个 message 变量，并使用 Vue.js 的 {{ }} 语法将其绑定到该元素。
接下来，我们需要在 Express.js 中设置路由，以便我们可以在访问 / 路径时提供我们的 Vue.js 应用程序。我们可以在 server.js 文件中添加以下代码：
------------ ----- ---- -- - ----------------------- --
在这段代码中，我们使用 app.get() 方法设置了一个路由，该路由将在访问 / 路径时呈现 index.ejs 文件。
最后，我们需要将 Vue.js 实例的 reverseMessage 方法添加到我们的 Vue.js 脚本中。我们可以将以下代码添加到 index.ejs 文件中的 script 标记中：
--- --- - --- -----
--- -------
----- -
-------- ------ -----
--
-------- -
--------------- -------- -- -
------------ - -----------------------------------------
-
-
--在这段代码中，我们添加了一个 methods 属性，其中包含一个名为 reverseMessage 的方法。该方法将当前的 message 变量拆分为一个字符数组，反转该数组，然后将其重新组合为字符串。最后，我们将反转后的字符串设置为 message 变量。
现在我们可以启动服务器，并在浏览器中访问 http://localhost:3000，以查看我们的单页应用程序。我们应该能够看到一个包含 Hello Vue! 消息和一个按钮的页面。单击按钮应该会反转消息。
总结
在本文中，我们介绍了如何使用 Express.js 和 Vue.js 创建一个单页应用程序。我们学习了如何设置 Express.js 服务器，如何使用 Vue.js 创建前端应用程序，以及如何将两者结合起来创建一个完整的单页应用程序。我们还包含了示例代码，以帮助您更好地理解这些概念。希望本文对您有所帮助！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65f3fcc52b3ccec22fc68c74