📌  相关文章
📜  pug npm (1)

📅  最后修改于: 2023-12-03 15:33:48.940000             🧑  作者: Mango

Pug 和 NPM

介绍

Pug 是一种模板引擎，它可以将类 HTML 的模板转换成 JavaScript 对象或 HTML。 它被广泛使用在 Node.js 和浏览器中，与 HTML，Express 和其他 Node.js 框架集成。

NPM 是 Node.js 的包管理器，它允许程序员在自己的项目中安装、管理和发布 Node.js 模块。

为什么使用 Pug 和 NPM？

Pug 提供了灵活的语言，可以将 HTML 模板编写为易于阅读和编写的代码。 它通过缩进来确定块级元素，并使用无需嵌套的选择符表示嵌套元素。 它还支持变量，表达式，条件和循环语句，以及其他功能，这些功能使其成为构建复杂 Web 应用的理想选项。

NPM 提供了强大的功能来管理 Node.js 项目中使用的模块。 它允许程序员轻松地安装和升级依赖关系，并精确地跟踪项目所需的资源。 它还允许程序员轻松地共享模块，并将自己的模块发布到 npmjs.com。

如何使用 Pug 和 NPM？

首先，您需要在计算机上安装 Node.js。您可以从 Node.js 官网下载适合自己的安装程序，具体请参见以下链接：

然后，您需要创建和配置自己的 Node.js 项目。 一个简单的方法是使用 npm init 命令来创建 package.json 文件，这是一个包含您的项目依赖关系和其他信息的文件。你可以这样做：

npm init -y

这将创建一个名为 package.json 的文件，其中有一些默认信息，您可以稍后根据需要进行修改。

接下来，您需要安装 Pug。 您可以使用 npm install 命令来安装它，如下所示：

npm install pug --save

这将安装 Pug，并将其添加到您的 package.json 文件中，以便在项目中使用。

现在您可以创建 Pug 模板文件！ 按照以下步骤创建名为 index.pug 的文件：

  1. 在命令行中进入项目的根目录。
  2. 创建一个名为 views 的文件夹并进入该文件夹。
  3. 创建一个名为 index.pug 的文件，并将以下代码添加到文件中：
html
 head
   title My Website
 body
   h1 Welcome to My Website
   p This is my website. Enjoy!

现在您可以编写代码来调用和渲染模板！ 按照以下步骤创建名为 app.js 的文件：

  1. 在命令行中进入项目的根目录。
  2. 创建一个名为 app.js 的文件。
  3. 将以下代码添加到文件中：
const express = require('express');
const app = express();
const port = 3000;
const path = require('path');
const pug = require('pug');

app.get('/', (req, res) => {
  res.send(pug.renderFile(path.join(__dirname, 'views', 'index.pug')));
});

app.listen(port, () => {
  console.log(`App running at http://localhost:${port}`);
});

上面的代码使用 Express 和 Pug 来设置 Web 服务器。 它将模板文件渲染为 HTML，并将其返回给浏览器，以便在 localhost 上进行访问。

最后，您可以运行您的应用程序！ 在命令行中运行以下命令：

node app.js

这将启动您的应用程序，您现在应该可以在浏览器中访问 http://localhost:3000，看到您的网站的欢迎页面！

总结

Pug 和 NPM 在 Node.js 项目中提供了强大的功能。 Pug 提供了一种易于理解和编写的方式来创建 HTML 模板，而 NPM 允许程序员轻松地管理和分发模块。 通过组合这两个工具，您可以快速构建精美，可扩展的 Web 应用程序。

参考资料