在vue里如何使用pug模板引擎
作者：依旧丶俊
这篇文章主要介绍了在vue里如何使用pug模板引擎,具有很好的参考价值,希望对大家有所帮助,如有错误或未考虑完全的地方,望不吝赐教
vue使用pug模板引擎
pug，原名jade，是流行的HTML模板引擎，它是HAML在JavaScript上的实现，最大的特色是使用缩进排列替代成对标签。
在vue中使用的话 需要事先安装依赖
#安装支持pug依赖 npm install pug pug-loader pug-filters -D #安装支持jade依赖 npm install jade jade-loader -D
后在你的vue项目文件中的webpack.base.conf.js中，在module的rules节点下添加配置：
{
test: /\.jade$/,
loader: "jade"
},
{
test: /\.pug$/,
loader: 'pug'
}然后在template标签中 lang=“pug” 即可启用
当然 怎么用就得去官网查看了 pug官网
pug模板引擎基本用法
Pug是jade的新版，jade由于商标已被注册，所以更名为pug。
缩进标注：Pug模板和大多数模板不同，它有自己的语法特点，采用缩进的方式进行标注，使用这种方式，使得代码更加清晰。
无尾标签：这种语法不需要类似 /html 这样的尾标签。
文本书写：在标签后 +空格+内容 的方式进行书写文本，例如下面代码中 h1后跟的 website即为标题名文本。
属性添加：在标签后用()括号对属性进行编写。
//views文件夹下index.pug文件
html
head
title Home
link(rel="stylesheet" href="/lib/bootstrap/css/bootstrap.min.css" rel="external nofollow" )
script(src="/lib/bootstrap/dist/js/bootstrap.min.js")
style
include myStyle.css
body
div(class='container')
h1 website
div(class='row')
div(class='col') column1
div(class='col') column2
div(class='col') column3
script
include myScript.js
引入方式：
自编写文件：使用include +文件名对文件进行引入。
第三方包文件：在服务器上通过nodejs结合express方式，使用app.use引入中间件。(此处例子导入bootstrap，需提前安装—— 在命令行通过npm install bootstrap进行安装)
//server.js文件
const express = require('express')
const app = express()
const expressPort = 3000
app.listen(3000, () => {
console.log(`App listening on port ${expressPort}`);
})
app.set('view engine','pug');
//通过app.set方式让pug进入node项目中
//app.set('views','./views')，pug默认地址会在一个叫views的文件夹里
app.use('/lib/bootstrap',express.static('node_modules/bootstrap/dist'))
//use方法作用：即引入一个所谓的中间件(将工作目录中动态文件变成静态文件提供给服务器)
//引用提前安装好的bootstrap(npm init bootstrap)
//'/lib/bootstrap'是一个虚拟地址，并不存在这个文件夹，但是可以通过这个路径对bootstrap文件进行访问。
app.get('/',(req,res)=>{
res.render('index');
})传参方式：具体为在后端代码中与pug模板引擎的传参方式。
在server.js后端代码中准备好传参数据：
app.get('/',(req,res)=>{
const options={
name:'WangJunjie',
age:'21'
}
res.render('index',options); //options为传入参数，直接在统一作用域中进行调用
})在index.pug文件中进行使用（通过 #{ } 的方式）：
body
div(class='container')
h1 #{name}'s website //通过#{参数内部属性名}方式
div(class='row')
div(class='col') column1
div(class='col') column2
div(class='col') column3
script 
这样就拿到了后端中的name数据，将name数据渲染到.pug文件上了。
同时，可以通过 script.的方式，将后端代码中的变量赋值给前端代码：
body
div(class='container')
h1 website
div(class='row')
div(class='col') column1
div(class='col') column2
div(class='col') column3
script.
const name = '#{name}';
const age = '#{age}';
script
include myScript.js特殊字符：
- “|” ，|后的字符会被原样输出。
- “.” ，.表示下一级的所有字符都会被原样输出，不再被识别。是|的升级版，实现批量处理。
总结
以上为个人经验，希望能给大家一个参考，也希望大家多多支持脚本之家。