Pug.js 项目快速入门教程

Pug.js 项目快速入门教程

项目目录结构及介绍

Pug（曾用名 Jade）是一个基于 JavaScript 的高性能模板引擎，广泛应用于 Node.js 环境。下面是对典型 Pug 项目结构的概览：

my-pug-project/
├── node_modules/       # 这个目录包含了项目的所有Node.js依赖包
├── views/              # Pug模板文件存放的位置
│   ├── index.pug       # 主页面模板
│   └── layout.pug      # 布局模板，被其他模板引入共享公共元素
├── app.js               # 应用的主要入口文件，通常包含服务器设置和路由处理
├── package.json        # 包含项目元数据，包括依赖项和脚本指令
└── .gitignore          # Git忽略文件列表

项目的启动文件介绍

app.js 或者 server.js 通常是Pug项目的主要启动文件。它负责初始化Express应用（或其他Node.js web框架），设置Pug作为视图引擎，并定义路由来渲染对应的Pug模板。一个基础的例子可能如下所示：

const express = require('express');
const app = express();
const port = process.env.PORT || 3000;

// 设置Pug作为视图引擎
app.set('views', __dirname + '/views');
app.set('view engine', 'pug');

app.get('/', (req, res) => {
    res.render('index'); // 渲染index.pug模板
});

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

项目的配置文件介绍

在Pug项目中，主要的“配置”不总是通过单独的配置文件完成，而是常常分散在几个地方。比如：

1. package.json: 包含了项目的依赖、脚本命令等基本信息。例如，脚本部分可能包含自动构建或者启动服务的命令。

   {
     "scripts": {
       "start": "node app.js",
       "dev": "nodemon app.js"
     },
     "dependencies": {
       "pug": "^3.x.x",
       "express": "^4.x.x"
     }
   }
   

2. Express设置: 直接在代码中进行配置，如前面例子展示的那样，设置视图目录和视图引擎。

对于更复杂的配置需求，开发者可能会选择环境变量或外部JSON/YAML配置文件来管理数据库连接字符串、第三方服务密钥等，但这并非Pug特有的配置方式，而是一种通用的Node.js应用实践。

以上就是Pug.js项目的基本架构、启动文件解析以及配置相关的介绍。希望这能够帮助您快速理解Pug项目的组织方式并开始您的开发之旅。