六月 14, 2018 | 前端與Vue

如何在Nuxt中使用Pug

常常在龐大的HTML標籤海中迷失方向嗎？那你絕對應該試試輕鬆好用的Pug！讓你的人生從此不再迷惘！

Pug 的好處

Pug 能加速 html 的編寫，模板機制還能避免相同區塊重複修改的問題，幫助你加快開發效率

首先，先進入你的專案中

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 的話 template 要記得加上 lang="pug"，以pages/index.vue為例，你可以直接寫在 index.vue 裡

  
    main#index  
        div  
          h5 test

或者在page/建立template.pug，並在index.vue中嵌入檔案

在運行 Nuxt 後，便可即時刷新頁面，瀏覽成果

hashtags: