使用Vitawind安裝Vite+Tailwindcss+Pug+LESS 開發環境建置

前言

最近的新專案想導入Tailwindcss，主要是希望在團隊合作上可以有個前端共用的framework，降低協作時各寫各的的情況，尤其是我個人的寫法其實比較接近Tailwindcss，所以我在HTML的class name 總是很長，當然有同事跟我反應這樣寫好像很亂很複雜，但我卻覺得這樣才會達到CSS 最少化的情況，減少我們一直重複輸入同樣的CSS，替代成剪短的class name，如果css 架構規劃的好，最終會變成自己的framework，而且幾乎不需要再寫CSS，開發速度會更快，可以把時間花在更重要的事情上，這個想法我已經有4~5年以上了，遺憾的是這4~5年我很少自己開發前端，所以我的想法一直沒有實現，然後這2~3年左右的時間，我從發現Tailwindcss 到等他普遍被使用的這段時間，證明了我的想法是對的，大家逐漸採用或願意試用Tailwindcss，剛好手邊有個新專案，就來紀錄一下我的環境設定吧！除了Tailwindcss 我還會整合pug 與 less 在這個專案上，下次要使用就可以快速生成了。

1.確保你有node.js 與 NPM

我在node.js 與套件版本控管套件 n 這篇裡有描述如何安裝node.js 與npm 的部份，這裡我就不多加描述。

2. 安裝Vitawind

Vitawind 是 vite 與 Tailwindcss的整合包，內建很多template 可以讓你快速建立各種開發起始資料夾結構。是目前就我找到的資料裡，最快速、最簡單可以建立 vue + tailwindcss 開發環境的方法。

請依據你的需求選擇安裝指令：

• 使用純 javascript 專案 npm init vitawind@latest 專案名稱 -- --pure
• 使用vue 的專案 npm init vitawind@latest 專案名稱 -- --vue
• 使用 vue+typescript 的專案 npm init vitawind@latest 專案名稱 -- --vue-ts
• 使用 react 的專案 npm init vitawind@latest 專案名稱 -- --react
• 使用 Vue-CLI 的專案 npm init vitawind@latest 專案名稱 -- --vuecli
• 使用 Vue-CLI 的專案 npm init vitawind@latest 專案名稱 -- --vuecli5
• 使用 Create React App 的專案 npm init vitawind@latest 專案名稱 -- --cra
• 使用 Angular 的專案 npm init vitawind@latest 專案名稱 -- --ng

輸入完上訴指令，接下來要切換到專案資料夾 cd 專案名稱

進行安裝程序 npm install

然後啟動 npm run dev

接著用瀏覽器打開畫面上的網址，再來就是恭喜你成功了！有沒有簡單到嚇人？

Vitawind 的詳細文件在這裡 https://vitawind-blog-tw.vercel.app/scaffolding/templates.html

唯一的缺點是Vitawind 整合的是 tailwindcss v2.2.7，而不是最新版的Tailwind。

3.安裝pug 與 less

安裝可以處理pug 與 less 的套件

npm install -D less pug vite-plugin-pug

vite-plugin-pug 是讓 html 可以 <pug src=”example.pug”></pug> 的方式在html 裡。

4. 設定pug 與相關使用方式

新增vite.config.js 檔案在更目錄中，貼上一下設定

// vite.config.(js|ts)
import { defineConfig } from "vite"
import pugPlugin from "vite-plugin-pug"
const options = { pretty: true } // FIXME: pug pretty is deprecated!
const locals = { name: "My Pug" }
export default defineConfig({
plugins: [pugPlugin(options, locals)],
})

在src目錄裡新增index.pug，你可以在裡面寫一些pug 內容，或複製以下內容

//- index.pug
h1 Hello World
p I'm a cool Vite project!

接著在index.html 的 body 裡使用 <pug src=”index.pug” /> 即可在開發模式下看到引用的pug 內容。

如果有問題請確認你的pug 檔有放在 src 資料夾中。

5. 設定less 相關使用方式

在src 資料夾中新增template.less，然後在Main.js 裡新增import './template.less' 記得在裡面寫一些css，接著你就會在開發模式中看到效果。

另外如果你要在less裡用tailwindcss，記得修改tailwind.config.js，然後在purge的部份新增pug，如下

// const colors = require('tailwindcss/colors')
module.exports = {
mode: 'jit',
purge: ['index.html','./src/*/.{js,jsx,ts,tsx,vue,pug,html}'],
darkMode: false, // or 'media' or 'class'
theme: {
extend: {},
},
plugins: [],
}

結語

使用這個方式開發可以即時瀏覽修改畫面，開發上非常便利，建議直接保留一個開發資料夾，下次指令可以打少一點！最後開發完成的指令是 npm run build ， 執行接受後就會看到一個 dist 資料夾，這個就是你要交付的結果了！