六月 14, 2018 | 前端與Vue
如何在Nuxt中使用Pug
常常在龐大的HTML標籤海中迷失方向嗎?那你絕對應該試試輕鬆好用的Pug!讓你的人生從此不再迷惘!
Pug 的好處
Pug 能加速 html 的編寫, 模板機制還能避免相同區塊重複修改的問題, 幫助你加快開發效率
第一步 - 安裝 Pug
首先,先進入你的專案中
cd [專案名稱]
輸入
npm install pug pug-loader pug-filters --save-dev
或者你也可以一併安裝其它預處理器
npm install --save-dev [email protected] pug-loader coffeescript coffee-loader node-sass sass-loader
<br>
第二步 - 開始使用 Pug
要使用 pug 的話 template 要記得加上 lang="pug", 以pages/index.vue為例,你可以直接寫在 index.vue 裡
main#index
div
h5 test
或者在page/建立template.pug,並在index.vue中嵌入檔案
在運行 Nuxt 後,便可即時刷新頁面,瀏覽成果