[Vue] 用 Vue+Pug+Sass 來提升你的開發效率

Photo by Matthew Henry on Unsplash

Outline:
- Why?
- Adding Pug
- Adding SASS

什麼樣的人適合使用 PUG or SASS？

1. 常常覺得 HTML 有很多屁股要開開關關很煩 <><><><><><><>< ，甚至經歷過少關一個屁股就世界毀滅的慘劇
2. 覺得 css 也有好多屁股要開開關關 {}{}{}{}{}{}{} ，還要加上好多屁股 ;;;;;;;;
3. 我的 css 很巢，每次 ul , ul li , ul li div , ul li div .title 都會寫到迷失人生

歡迎加入 PUG + SASS 的懷抱，用過就回不去了

SASS 是一種『CSS預處理器(css preprocessor)』，像是SCSS、Less 也都是，想要快速上手 SASS 的人可以拜讀六角校長洧杰的30天掌握Sass語法，養分多多。PUG 就跟 SASS 的道理一樣，只不過他是 HTML 的預處理器，可以讓你省去所有屁股開開關關的繁瑣碎事。

將 Pug 加入 Vue cli 專案

$ npm i vue-cli-plugin-pug

結束！！！

網路上看到很多種方法，有些需要再去 config 設定，比較麻煩，npm 安裝 pug、pug loader、pug filter 的方法也可以，但是這個 plugin 只要安裝好就好了

安裝好之後在你的 template 加上：

<template lang="pug">
</template>

就可以開始你的 pug 人生了 🤸‍♂️

將 SASS 加入 Vue cli 專案

$ npm install sass-loader node-sass --save-dev

sass loader npm 官網在這邊

一樣安裝完成後就可以在你的 style 上設定為：

<style lang="sass">
</style>

就可以了喔 👯

後記

其實是每次在開新專案的時候都要找一次怎麼把 pug 跟 sass 裝進來覺得很麻煩，就乾脆記下來。開始使用 pug 之後會遇到比較麻煩的地方可能就是常常看到範例是 html ，需要自己再轉成 pug，這邊再分享一個 VS Code 的套件：html2pug，裝了這個套件就可以直接在 vs code 裡面把 html 轉成 pug ，不需要另外再找網站轉換了：

安裝好後在vs code按下 f11，key入 html2pug 就可以找到套件，使用過後就會常駐在 f11 打開的列表中

這次的分享就到這邊，歡迎大家加入 pug & sass 的世界

內容若有任何錯誤，歡迎留言交流指教！ 🐬