在 Express.js 中，Pug 是一种流行的模板引擎，它可以帮助您更轻松地创建动态的 HTML 页面。本文将详细介绍如何在 Express.js 中使用 Pug 模板引擎。
安装 Pug
在使用 Pug 之前，您需要在项目中安装它。您可以使用以下命令来安装 Pug：
--- ------- --- ------
这将会在项目中安装 Pug，并将其添加到您的 package.json 文件中。
配置 Express.js
在使用 Pug 之前，您需要在 Express.js 应用程序中配置它。在您的 Express.js 应用程序中，您需要添加以下代码：
------------- -------- ------- ---------------- -----------
第一行代码告诉 Express.js 使用 Pug 模板引擎来呈现视图。第二行代码告诉 Express.js 在哪里找到视图文件。在上面的代码中，我们将视图文件放在项目根目录下的 views 文件夹中。
创建 Pug 视图
现在，您需要创建一个 Pug 视图来呈现页面。在 views 文件夹中创建一个名为 index.pug 的文件，并添加以下代码：
----
----
----- -- ----- --- ----
----
-- ------ ------这是一个非常简单的 Pug 视图，它将呈现一个标题为“我的第一个 Pug 页面”的 HTML 页面，并在页面正文中包含一个标题为“Hello, World!”的标题。
使用 Pug 视图
现在，您需要告诉 Express.js 使用 Pug 视图来呈现页面。在您的 Express.js 应用程序中，您需要添加以下代码：
------------ -------- ----- ---- - -------------------- ---
这将告诉 Express.js 在访问根路径时呈现名为 index 的 Pug 视图。
运行应用程序
现在，您可以运行您的 Express.js 应用程序并查看您的 Pug 视图。在命令行中输入以下命令：
---- ------
这将启动您的 Express.js 应用程序。现在，您可以在浏览器中访问 http://localhost:3000，应该可以看到一个标题为“Hello, World!”的页面。
总结
在本文中，我们详细介绍了如何在 Express.js 中使用 Pug 模板引擎。我们学习了如何安装 Pug、在 Express.js 中配置 Pug、创建 Pug 视图以及使用 Pug 视图呈现页面。我们希望这篇文章能够帮助您更好地理解如何使用 Pug 模板引擎来创建动态的 HTML 页面。
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/65d6e8161886fbafa44811d9