前言:
本篇是介紹 Pug 這個相見恨晚的網頁模板!
pug是我在hahow購買的前端課程中，講師在範例中所使用的網頁模板!
我主要是寫python程式的，會學這個，很大一部分的原因是它不用括號
而是用縮排來區分程式區塊 (block)。
在程式編輯器還沒有那麼強大之前(如VS Code)...我寫JS或其他語言，
少打一個括號，程式就無法執行，偏偏眼殘找不出哪邊少了括號...
所以一見到python這種不用括號的語言，跟我相性很合!
在這個前端的課程中，講師在Codepen上使用 Pug+Sass 讓我一試成主顧!
不過這篇不是Pug的教學，網路上已經有很多相關教學了，我也會在文章
最後附上一些pug的相關連結。
本篇要介紹如何在 VS Code裡使用Pug !
我在網路上爬文，想要在本機端使用Pug 的方法跟 在Codepen相比
真的差很多...最常看到解答:
- 使用 Gulp
- 使用 Vue Cli 建立一個專案
- 使用 Prepros
以上，除了2日後比較有機會用到外，1&3 都不太符合我的使用習慣
這裡就介紹我目前所使用的方法:
在VS Code裡面安裝下面的套件:
Sass/Less/Stylus/Pug/Jade/Typescript/Javascript Compile Hero Pro
連結裡就有示範用法了，這邊就不灌水填版面了 XDDD
文章最後說一下這個套件的優缺點:
優點:
- 可以同時live檢視 pug 跟sass
缺點:
- 安裝後，VS Code啟動會變慢...不用時最好關掉
- 無法用專案的模式，如webpack或vue cli