「閃電 + 疾風的組合嗎？ 不錯不錯！」

既然我們之前都說了要用 Vue + Tailwind 來製作元件，
那建立一個專案把這兩個東西安裝在一起總是必要的吧？

沒錯，之前雖然介紹過了怎麼建立 Tailwind 的專案，
但當時是用於純 html 的狀況，
而我們現在可是要用在前端框架之中啊～

前端框架都有自己的打包機制，
如 Webpack、Rollup 等，
所以我們現在是不能單純的再用指令來編譯了啦！

像之前說過，在 VS Code 中使用 Tailwind IntelliSense
是為了提升在 Tailwind 的開發者體驗，

那麼在前端框架之中呢？
就讓我們，繼續看下...

「欸兔兔！不對啊！」
「你怎麼忽略了我開頭說的那句話了呀！」

歐 ... 沒有啦
我就想說你好像在破梗，就 ...
就當作沒看到啊 XD

好！ 沒錯！

我們今天就是要講疾風跟閃電的組合哦，
叫做 Vitawind。
 

疾風方代表

Tailwind 的翻譯叫做順風，
那既然順風用 JIT 模式大大加速之後，

不就是疾風了嘛！

那 Tailwind 官方啊，其實有針對常見的框架們做整合式教學。像是 Next.js、Nuxt.js、Laravel、Create React App、Gastby 和 Vite。

但這些整合式教學只是安裝設定 Tailwind，
對開啟 JIT 模式的部分並沒有過多的著墨。

雖然關於 JIT 模式的一切問題都有另外放在一頁，
但仍需對一些框架個別做小調整。

既然有疾風了，我們就來介紹閃電吧！
 

閃電方代表

要說是閃電方代表，肯定非 Vite 莫屬！

「兔兔，Vite 有什麼特別啊？」

哇！ 總覺得你第一次問對問題了！

Vite 是由 Vue 的作者開發，
要用來取代 Webpack 的前端框架開發工具！

小知識：
Vite 的唸法是 vit，是法文中迅速的意思哦！

為何要取代 Webpack？

這個嘛，就要談到編譯的方式了。

雖然每次按下儲存鍵時，
都有 HRM 機制做熱更新，
但還是存在一些小問題。

Webpack 採取的方式是分析過所有檔案和套件的相互依賴性，然後再把它們組裝在一起；換言之，如果你使用的套件越多、引用套件的越多且網站架構越龐大時，你每一次按下儲存鍵都必須等待這些分析及編譯又重跑完一遍，畫面上才會更新。

所以你可能只為了修改一個小功能，而等了很久！

總之就是，蛇 :snake: :snake: :snake: 。

反觀 Vite 呢？
Vite 利用 Native ESM 來處理檔案相依性，
讓瀏覽器來幫你載入相關的檔案或是有需要用到的模組，
這樣速度就快上非常多了！

還有，
一般你開發 Vue 通常用 Vue CLI，
開發 React 通常用 Create React App，
他們都各自有用 Webpack 做整合開發環境，
但這樣終究很麻煩。

所以 Vite 在建立專案時可以選！！

Vite 預設有多個環境範本，
如 Vue、React、Svelte 等。

所以即使是 React 使用者，
也可以來用用 Vite 哦！
(真的比 CRA 快太多了啦！)

接下來，我們就要把疾風和閃電組合了～
 

快如疾風，迅如閃電

我知道這標題很中二，
但這就套件上面的介紹咩 XD

Vitawind 是兔兔開發的一個 npm 套件，用途是在 Vite 專案上能超級輕鬆的安裝和設定 Tailwind，只需要下一個指令和一個小步驟。

(沒錯，就是業配時間？)

但今天要用的不是 Vitawind，
而是 Create-Vitawind！

不知道它們有什麼差別對吧？

create-vitawind 其實也是兔兔開發的一個 npm 套件，附屬在 Vitawind 專案下，是用來快速建立整合好 Tailwind 並設定好 JIT 模式的前端框架專案。

靈感取自於 Vite 建立專案的方式，
跟 Vite 一樣有許多的專案樣本。

但還要下指令太麻煩了啦！
因為我們現在有更便捷的方式嘿嘿嘿～
 

Creator 工具

Create-Vitawind 的文件中，
提供了一個非常棒的工具叫做 Creator。

Creator 讓你可以在網頁上直接輸入專案名稱，
然後按下旁邊的 template 來選擇範本。

而可以選擇的範本有：

• 基於 Vite

  • Vue3
  • Vue3 + Typescript
  • React
  • React + Typescript
  • 純 js

• 基於 Webpack

  • Vue CLI
  • Create React App
  • Angular

大概這些。

基本上還是為了 Vite 所做的，
但因為想要變成一個能夠幫助到更多人的工具，
所以也整合了一些常見的 CLI 環境進去。

然後範本選擇完畢之後，
如果專案名稱也正確的話，
底下黃色區塊會變成一鍵複製的按鈕，
代表你現在能複製去安裝啦！
 

安裝

那既然我們要用 Vue + Tailwind，
而且還要用 Vite 加速使用者體驗，

我們先開啟 Creator 的頁面
(Creator 頁面連結放在文章結尾的作業區)

然後範本當然是選第一個的 Vite Vue 啦！

那專案名稱就叫做 ...

tailwind-component-library

然後我想大部分人應該還是用 npm，
我們就把工具切換到 npm。

按下那個狐媚誘人的 Copy it !
我們就可以開始啦！

一舉進攻你的 terminal，
大膽的貼上！

然後他就開始自己跑囉～
等待它跑完。

跑完之後會發現，就這麼自己開啟來了！？
快來打開看一下！！

哇，真方便！
這樣就建好專案而且 Tailwind 也弄好了
JIT 模式設定什麼都也都好了，
還提供了已經改寫成 Tailwind 的起始頁欸！
哇那我以後都要用這個～～

(真的沒有你這樣自吹自擂的)
(再講下去都要兔了)
 

今天就這樣！
大致介紹一下 Vite，
和建立 Vite + Tailwind 的專案。

如果對各框架安裝 Tailwind + JIT 的完整步驟有興趣的人，
我會把它放在 day30 之後做額外補充～

不過我是建議你們直接用 Creator 啦！
 

給你們的回家作業：

• 作業實施要點：
  • 用 Creator 先建立好 Vite Vue 專案
• Creator：點我快用！！
   

關於兔兔們：

• Tailwind CSS 臺灣官網
• Tailwind CSS 臺灣 (臉書粉絲專頁)
• 兔兔教 × Tailwind CSS Taiwan (臉書社群)
• 兔兔教大本營

( # 兔兔小聲說 )

「免兔，你知道 Vite 怎麼叫的嗎?」
「就跟閃電鳥的叫聲一樣哦！」

蛤 ... ？
這樣不就是鳥叫聲了嗎

「不，兔兔這你就有所不知了。」

(傳來了一個 mp3 檔)
閃電鳥.mp3