1.安裝pug

npm i -D pug pug-html-loader pug-plain-loader

cli2.0腳手架修改build/webpack.base.conf.js文件

module: {rules: [{test:/\.pug$/,loader: "pug-html-loader"},// 省略其他規則]}

cli3.0只要修改vue.config.js文件

module.exports = {chainWebpack: config => {config.module.rule('pug').test(/\.pug$/).use('pug-html-loader').loader('pug-html-loader').end()} }

2.vue頁面使用效果

<template lang='pug' ></template>

我們先說for循環的一種

section.pugModel//- 這是注釋，測試pug，for循環(1)div.title 測試pug，for循環(1)ul- let foo = [{name:'小站',age:25,sex:0},{name:'王波',age:18,sex:0},{name:'張二',age:30,sex:1}]each item in foolispan.listItem= `名字:${item.name}——`span.listItem= `年齡:${item.age}——`span.listItem( @click='sexClick' style= `${Object.is(item.sex,0) ? "color:blue;" : "color:red;"}`)= `性別:${Object.is(item.sex,0) ? "男" : "女"}`

效果圖

下面是幾個pug的大概實際操作用法，分別用注釋寫了常規下的寫法最對比

?

?

?

?

總結

以上是生活随笔為你收集整理的vue 使用pug（详细说明）的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。