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近來,這樣就不用在每個檔案裡匯入,檔案管理上也比較方便喔!