在 Express.js 中，Pug 是一种流行的模板引擎，它可以帮助您更轻松地创建动态的 HTML 页面。本文将详细介绍如何在 Express.js 中使用 Pug 模板引擎。
安装 Pug
在使用 Pug 之前，您需要在项目中安装它。您可以使用以下命令来安装 Pug：
npm install pug --save
这将会在项目中安装 Pug，并将其添加到您的 package.json 文件中。
配置 Express.js
在使用 Pug 之前，您需要在 Express.js 应用程序中配置它。在您的 Express.js 应用程序中，您需要添加以下代码：
app.set('view engine', 'pug');
app.set('views', './views');第一行代码告诉 Express.js 使用 Pug 模板引擎来呈现视图。第二行代码告诉 Express.js 在哪里找到视图文件。在上面的代码中，我们将视图文件放在项目根目录下的 views 文件夹中。
创建 Pug 视图
现在，您需要创建一个 Pug 视图来呈现页面。在 views 文件夹中创建一个名为 index.pug 的文件，并添加以下代码：
html
head
title My First Pug Page
body
h1 Hello, World!这是一个非常简单的 Pug 视图，它将呈现一个标题为“我的第一个 Pug 页面”的 HTML 页面，并在页面正文中包含一个标题为“Hello, World!”的标题。
使用 Pug 视图
现在，您需要告诉 Express.js 使用 Pug 视图来呈现页面。在您的 Express.js 应用程序中，您需要添加以下代码：
app.get('/', function (req, res) {
res.render('index');
});这将告诉 Express.js 在访问根路径时呈现名为 index 的 Pug 视图。
运行应用程序
现在，您可以运行您的 Express.js 应用程序并查看您的 Pug 视图。在命令行中输入以下命令：
node app.js
这将启动您的 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