Vitawind 可以當作 Vite 的加強版，而Vite本身就是一個本機環境建置與打包工具，除了可以搭配Vue當然也可以搭配React 使用，Vite對Sass與Less的整合與加強也讓我們在寫css時可以更加方便，同樣的Vitawid 也可以，那我們為什麼還要用Vitawind 不直接用Vite+Tailwind 就好？ 如果你有看過我的「使用Tailwindcss+Vite+Pug+LESS 開發環境建置」，你就會知道為了多一個Tailwid要多很多步驟，而Vitawind已經幫我們把Tailwind 3整合在一起了。所以可以節省我們一些時間，畢竟天下武功為快不破，除了技術知識深度以外，速度快慢也能呈現我們對技術的熟悉度，至少我是這麼認為的！
其實我之前已經介紹過Vitawind了，但那是Vitawind只有整合到Tailwind 2，但現在我們使用的都是Tailwind 3，當時我只覺得可惜了，沒想到作者在我發文後一個月內就整合完Tailwind 3 ，結果我一路忙到現在才有空回來介紹 VitaWind 2，希望不會我寫完又來一批版本更新，自從之前寫Vue教學時我就遇到版本更新過快，但我時間太少導致文章更新跟上進度，雖然我寫的很淺顯易懂，但跟不上更新速度還是有點可惜。說了這麼多前言，我們就來個快速教學，一旦你熟悉之後，你會發現建置一個專案根本用不到你10秒的時間！
第一步：前往Vitawind官網，直接到最底部的起手式
Vitawind官網已經建置好很多範本，不管你是要用單純打javascript還是搭配Vue 還是 React 都可以，只要打上轉名稱，接著選擇你要的範本，然後複製下面的code 到本機開發環境，然後在終端機裡貼上你剛剛複製的code就完成基本環境建立了，熟練的話這個步驟應該只需要5秒左右。
第二步：安裝Less、Sass、Pug 預先處理器
雖然Vite 有整合Less、Sass、Pug等功能，但我們還是需要安裝一下翻譯機制，也就是預先處理器的部分，有建議上一步我們已經啟動了本機localhost:3000 的環境，所以我們需要先按ctrl+c 停止環境，接著安裝你所需要的預先處理器
npm install -D less sass pug
npm 後面用install 或 add 都可以，他們是一樣的功能，就看你比較習慣哪一個， -D 則是 --save-dev 的簡寫，也就是安裝在開發環境裡，後面的 less 、sass、pug 就取決於你需要寫什麼而定，像我就比較少用 sass，所以通常我只有安裝 less 跟 pug 而已。
第三步：如何使用Less、Sass、pug在Vitewind裡
感謝Vite的整合讓我們不用在那裡在改設定檔就可以直接在.vue的檔案裡用Less、Sass、pug。通常使用Vue3 我們採用 .vue 檔案來架構Vue的程式結構，而一個.vue的檔案可以分成3個段落，分別是javascript、template、style 這3個區塊。第一個 javascript區塊就如同它的命名，是寫javascript的部分。然後tempalte是html的區塊，也就是我們需要使用pug的地方。最後 style 的區塊就是我們需要使用less 或 sass的區塊。既然我們知道我們的html 需要調用pug 預先處理器，而 style 的區塊則需要調用 less 或 sass 預先處理器，所以我們只要加上lang這個屬性在依區塊搭配屬性質，例如在template區塊就是<template lang="pug"> ，而在style 區塊則是<style lang="less">這樣我們就可以直接在vue裡面寫pug 與less了。
<javascript setup>
// import OOO from XXX
</javascript>
<template lang="pug">
h1 這個一個範例
</template>
<style lang="less">
h1{
color:#333;
}
</style>其他建議
一般我們在單純less、sass或pug檔案裡，我們都會做一些import 或 include的動作，但在Vite環境裡，因為vue已經有import 功能了，所以建議把pug 單純用在template區塊就好了，其他import的部分就交給vue來處理就好。至於style的部分我們可以分成全域與不是全域兩種，如果是全域型（也就是全站通用的部分），我們可以單獨寫在一個less或sass檔，然後在main.js裡import近來，這樣就不用在每個檔案裡匯入，檔案管理上也比較方便喔！
