六月 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 pug@2.0.0-beta6 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 後,便可即時刷新頁面,瀏覽成果

參考資料

官方文件

hashtags: