Day 18：「极速开发」- Vitawind

「闪电 + 疾风的组合吗？ 不错不错！」

既然我们之前都说了要用 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