express 要集成 pug 首先要先创建一个 express 的应用
创建 express 应用
创建一个 express 应用是极简单的事情
- 首先要确保你安装了 node ，然后创建应用文件夹
mkdir express-app
cd express-app
- 初始化 package.json
npm init
运行上面命令后，会出现询问式的菜单，全部都按照默认的样式即可。
- 下载 express 依赖
npm install express --save
- 在项目的根目录下，创建 app.js 文件，并输入下面的代码
const express = require('express')
const app = express()
const port = 3000
app.get('/', (req, res) => {
res.send('Hello World!')
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
经过上述步骤，最简单的 express 应用就创建好了，在命令行终端运行以下命令，就可以启动。
node app.js
应用启动好后，在浏览器中输入 http://localhost:3000/ 就可以看到 Hello World! 的字样
集成 pug
pug 是一种模板引擎，模板引擎使您能够在应用程序中使用静态模板文件。在运行时，模板引擎将模板文件中的变量替换为实际值，并将模板转换为发送给客户端的 HTML 文件。这种方法使设计 HTML 页面变得更加容易。
- 安装 pug 的依赖
npm install pug --save
- 在项目根创建 views 文件夹，用于放置模板引擎文件，此时的项目目录如下
- 在 app.js 文件中指定目标引擎的创建目录与此应用所使用的模板引擎
app.set('views', './views');
app.set('view engine', 'pug');
- 在 views 文件夹中创建 index.pug 文件，并在 index.pug 文件中输入以下代码
html
head
title= title
body
h1= message
- 修改 app.js 中的首页（
/）路由，将变量 title 和 message 传入目标引擎文件 index.pug 中
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' });
})
经过上述步骤，express 已经成功的集成了 pug 了，最终的 app.js 文件的代码如下
const express = require('express')
const app = express()
const port = 3000
app.set('views', './views');
app.set('view engine', 'pug');
app.get('/', (req, res) => {
res.render('index', { title: 'Hey', message: 'Hello there!' });
})
app.listen(port, () => {
console.log(`Example app listening at http://localhost:${port}`)
})
在命令终端中，输入node app.js 命令，然后在浏览器中打开 http://localhost:3000 ，可以发现，title 和 message 成功传入了模板中
完整代码可在此仓库中查看。
