前后端分离是现代 Web 开发中最为推崇的一种开发方式，如何使用 Express.js 和 Vue.js 来搭建前后端分离项目呢？本文将详细介绍该过程。
什么是 Express.js？
Express.js 是一个基于 Node.js 平台的开放式 Web 应用程序框架，它提供了丰富的 HTTP 工具和中间件，是一种流行的后端开发框架。
什么是 Vue.js？
Vue.js 是一个渐进式 JavaScript 框架，它用于构建交互式的用户界面。Vue.js 可以将页面划分成多个组件，每个组件具有独立的状态和视图，可以轻松地进行搭建和维护。
准备工作
在开始使用 Express.js 和 Vue.js 搭建项目之前，我们需要确保安装了以下软件和库：
步骤一：创建 Express.js 服务器
首先，我们需要创建一个 Express.js 服务器，用于提供后端 API，代码如下：
-- -------------------- ---- ------- ----- ------- - ------------------- ----- --- - ---------- --------------------- ----- ---- -- - ---------- -------- ------- ------- --- --- ----- ---- - ---------------- -- ----- ---------------- -- -- - ------------------- -- --------- -- ---- ---------- ---
在该代码中，我们创建了一个简单的 Express.js 应用程序，其中 /api/hello 路径的请求将返回一条 Hello, World! 的消息。
在终端中运行 node app.js 命令或使用 Visual Studio Code 中的终端运行该代码。
可以使用 Postman 工具来测试该 Express.js 应用程序。打开 Postman 工具，创建一个 GET 请求，输入地址 http://localhost:3000/api/hello，执行请求将会返回 Hello, World! 的消息。
步骤二：创建 Vue.js 前端项目
接下来，我们需要创建一个 Vue.js 前端项目，其中包含一个简单的页面，用于调用上一步中创建的后端 API。
在终端中执行以下命令，创建一个空的 Vue.js 项目：
vue create frontend
按照命令行提示输入项目名称和其他信息，等待命令执行完成。
在该命令执行完成后，我们需要将 Vue.js 项目中的默认页面修改为一个包含按钮的页面，代码如下：
-- -------------------- ---- -------
----------
-----
------- ------------------------------- ----------------
------- ------- --------
------
-----------
--------
------ ------- -
------ -
------ -
-------- ---
--
--
-------- -
----- ------------------- -
----- -------- - ----- --------------------
----- ---- - ----- ----------------
------------ - -------------
--
--
--
---------
-------
--------在该代码中，我们定义了一个包含按钮和消息显示器的 Vue.js 组件，点击按钮后将会调用上一步中创建的 Express.js 后端 API，并将返回的消息显示在页面上。
在终端中运行 npm run serve 命令或使用 Visual Studio Code 中的终端运行该代码。
打开浏览器，输入网址 http://localhost:8080，页面应该显示出一个按钮。点击该按钮将会调用后端 API，并显示出一条消息。
步骤三：将 Vue.js 前端部署到 Express.js 服务器
完成前两步之后，我们已经成功地创建了一个前端和一个后端，接下来我们需要将前端部署到后端中，以实现前后端分离的项目。
在终端中进入 Vue.js 项目目录：
cd frontend
执行以下命令将 Vue.js 项目打包，并将打包后的代码复制到 Express.js 服务器中：
npm run build cp -r dist/* ../public/
在该命令中，我们使用 npm run build 命令打包 Vue.js 项目，然后使用 cp 命令将打包后的代码复制到 Express.js 服务器中 public 目录下。这样，我们就成功将前端部署到后端服务器中了。
最后，在终端中运行 node app.js 命令或使用 Visual Studio Code 中的终端运行该代码，打开浏览器，输入网址 http://localhost:3000，页面应该显示出一个按钮。点击该按钮将会调用后端 API，并显示出一条消息。至此，我们已经成功搭建了一个前后端分离的项目。
总结
本文使用 Express.js 和 Vue.js 两种流行的框架搭建了一个前后端分离项目，并详细介绍了该过程的每一步。在实际项目开发中，前后端分离的开发方式可以增强项目的可维护性和可扩展性，并提高开发效率。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/64ec196af6b2d6eab3666016