快捷導航

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

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

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

vue使用pug模板引擎

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

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

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

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

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

然后在template標簽中 lang=“pug” 即可啟用

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

pug模板引擎基本用法

Pug是jade的新版，jade由于商標已被注冊，所以更名為pug。

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

無尾標簽：這種語法不需要類似 /html 這樣的尾標簽。

文本書寫：在標簽后 +空格+內(nèi)容的方式進行書寫文本，例如下面代碼中 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 +文件名對文件進行引入。

第三方包文件：在服務(wù)器上通過nodejs結(jié)合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方法作用：即引入一個所謂的中間件(將工作目錄中動態(tài)文件變成靜態(tài)文件提供給服務(wù)器)
     //引用提前安裝好的bootstrap(npm init bootstrap)
     //'/lib/bootstrap'是一個虛擬地址，并不存在這個文件夾，但是可以通過這個路徑對bootstrap文件進行訪問。
     app.get('/',(req,res)=>{
         res.render('index');
     })

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

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

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

在index.pug文件中進行使用（通過 #{ } 的方式）：

       body
           div(class='container')
               h1 #{name}'s website //通過#{參數(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文件上了。

同時，可以通過 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

特殊字符：