快捷導(dǎo)航

在vue里如何使用pug模板引擎

更新時(shí)間：2023年10月10日 10:32:41 作者：依舊丶俊

這篇文章主要介紹了在vue里如何使用pug模板引擎,具有很好的參考價(jià)值,希望對(duì)大家有所幫助,如有錯(cuò)誤或未考慮完全的地方,望不吝賜教

vue使用pug模板引擎

pug，原名jade，是流行的HTML模板引擎，它是HAML在JavaScript上的實(shí)現(xiàn)，最大的特色是使用縮進(jìn)排列替代成對(duì)標(biāo)簽。

在vue中使用的話需要事先安裝依賴

#安裝支持pug依賴
npm install pug pug-loader pug-filters -D
#安裝支持jade依賴
npm install jade jade-loader -D

后在你的vue項(xiàng)目文件中的webpack.base.conf.js中，在module的rules節(jié)點(diǎn)下添加配置：

{
 test: /\.jade$/,
 loader: "jade"
},
{
 test: /\.pug$/,
 loader: 'pug'
}

然后在template標(biāo)簽中 lang=“pug” 即可啟用

當(dāng)然怎么用就得去官網(wǎng)查看了 pug官網(wǎng)

pug模板引擎基本用法

Pug是jade的新版，jade由于商標(biāo)已被注冊(cè)，所以更名為pug。

縮進(jìn)標(biāo)注：Pug模板和大多數(shù)模板不同，它有自己的語(yǔ)法特點(diǎn)，采用縮進(jìn)的方式進(jìn)行標(biāo)注，使用這種方式，使得代碼更加清晰。

無(wú)尾標(biāo)簽：這種語(yǔ)法不需要類似 /html 這樣的尾標(biāo)簽。

文本書寫：在標(biāo)簽后 +空格+內(nèi)容的方式進(jìn)行書寫文本，例如下面代碼中 h1后跟的 website即為標(biāo)題名文本。

屬性添加：在標(biāo)簽后用()括號(hào)對(duì)屬性進(jìn)行編寫。

   //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 +文件名對(duì)文件進(jìn)行引入。

第三方包文件：在服務(wù)器上通過(guò)nodejs結(jié)合express方式，使用app.use引入中間件。(此處例子導(dǎo)入bootstrap，需提前安裝—— 在命令行通過(guò)npm install bootstrap進(jìn)行安裝)

     //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');
     //通過(guò)app.set方式讓pug進(jìn)入node項(xiàng)目中
     //app.set('views','./views')，pug默認(rèn)地址會(huì)在一個(gè)叫views的文件夾里
     app.use('/lib/bootstrap',express.static('node_modules/bootstrap/dist'))
     //use方法作用：即引入一個(gè)所謂的中間件(將工作目錄中動(dòng)態(tài)文件變成靜態(tài)文件提供給服務(wù)器)
     //引用提前安裝好的bootstrap(npm init bootstrap)
     //'/lib/bootstrap'是一個(gè)虛擬地址，并不存在這個(gè)文件夾，但是可以通過(guò)這個(gè)路徑對(duì)bootstrap文件進(jìn)行訪問(wèn)。
     app.get('/',(req,res)=>{
         res.render('index');
     })

傳參方式：具體為在后端代碼中與pug模板引擎的傳參方式。

在server.js后端代碼中準(zhǔn)備好傳參數(shù)據(jù)：

   app.get('/',(req,res)=>{
       const options={
           name:'WangJunjie',
           age:'21'
       }
       res.render('index',options);	//options為傳入?yún)?shù)，直接在統(tǒng)一作用域中進(jìn)行調(diào)用
   })

在index.pug文件中進(jìn)行使用（通過(guò) #{ } 的方式）：

       body
           div(class='container')
               h1 #{name}'s website //通過(guò)#{參數(shù)內(nèi)部屬性名}方式
               div(class='row')
                   div(class='col') column1
                   div(class='col') column2
                   div(class='col') column3
           script

在這里插入圖片描述

這樣就拿到了后端中的name數(shù)據(jù)，將name數(shù)據(jù)渲染到.pug文件上了。

同時(shí)，可以通過(guò) 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

特殊字符：