Vue專案中配置pug解析支援
摘要：
Vue 的用法沒有變化:
<template lang="pug">
transition(name="sider")
div.hello
h3 {{msg}}
p(:style="{color:...
Vue 的用法沒有變化:
<template lang="pug">
transition(name="sider")
div.hello
h3 {{msg}}
p(:style="{color:'#000'}", :htmlData="msg") p label
button(@click="clickMe") clickTest
</template>
複製程式碼
要注意的一點是: 標籤後面如果有屬性(括號內的) 他和括號之間不要加空格,加了空格就會被當成字串解析
vue-cli 2+ 配置:
下載包:
npm i -D pug pug-html-loader 複製程式碼
在build/webpack.base.conf.js 的 module 中新增規則:
module: {
rules: [
{
test:/\.pug$/,
loader: "pug-html-loader"
},
// 省略其他規則
]
}
複製程式碼
好了啟動或重啟專案,即可開心的嘗試了
vue-cli 3 配置:
由於 cli 升級到3了,相關配置發生了很大的改變,所以要和2的更改不同:
下載包:
npm i -D pug pug-html-loader pug-plain-loader 複製程式碼
和2比多了一個 pug-plain-loader
在 vue.config.js (如果沒有就在根目錄下新建一個) 新增程式碼:
module.exports = {
chainWebpack: config => {
config.module.rule('pug')
.test(/\.pug$/)
.use('pug-html-loader')
.loader('pug-html-loader')
.end()
}
}
複製程式碼
重啟專案即可正常使用; 嚴格來說, vue-cli3 更像一種外掛的使用,但是對於一些新人來說,可能還不習慣這樣的操作吧