剛開始學 Vue，最困擾的就是該怎麼建立開發的環境。

誰適合看這篇：

• 不知道怎麼建立 Vue 專案
• 按照官網用 npm init vue@latest 建立了 Vue 專案，但其實不懂他幫你做了什麼？
• 不知道 Vite 和 Vue Cli 是什麼？或是不知道該從哪個入手？

Outline

• 前言：從新手視角重看建立 Vue 專案
  • npm init vue@latest 做了什麼
• 認識 Vite 和 Vue Cli
• 建立 Vue 專案
• 結尾與延伸主題

前言

先假設大家都有乖乖看文件，目前 Vue 3 官方文件在 Quick Start 中推薦的指令為：

npm init vue@latest

這個指令會安裝、執行 create-vue，自動幫開發者建置 Vue 專案：

1. vue.js 版本為 Vue 3
   目前 npm init vue@latest 所執行的指令等同於 npm init vue@3。
   (p.s. 如果你的網頁需要支持 IE11，請改下npm init vue@2，並右轉離開這系列的文章，或是再好好考慮一下)

2. 搭配的建置工具為 Vite
   欸，所以 Vite 到底是什麼？他要念 vite 還是 vite？(要念 /vit/，聽聽發音)
   Vite 的命名來自法文，意思是「快速」，這也是 Vite 這款建構工具的重要特性，文章後段會提到，在這之前，先來認識 Vite 和他的哥哥 Vue Cli。

認識 Vite 和 Vue Cli

Vite 和 Vue Cli 都是 vue.js 的 build tool(建置工具)，官方文件又會稱作「Project Scaffolding」。

等等，Scaffolding 是什麼意思？
Scaffolding 也就是俗稱的「鷹架」。
可以把一個完成的 Vue 專案，想像成蓋好的建築物；而 Vue 提供的 Project Scaffolding，能快速架設施工所需的鷹架，也就是安裝好開發所需的架構和基礎工具鏈，讓開發者不用每次都從 0 開始蓋房子。

對於初學者來說，其實很難從 Vite 這個名字去聯想他做了哪些事，我們可以從認識他的哥哥 Vue Cli 開始，他們的功能非常相近。
Vue Cli 的全名是 Vue.js Command-Line Interface，直接翻譯為「Vue 專案指令界面」，整合了開發所需的主要工具鏈，能快速建立一個 Vue 專案以供開發，包括：

1. 建立基礎專案架構
2. 整合適用的插件(如:狀態管理器、路由管理等等)
3. 可以在本地啟動伺服器環境進行開發
4. 可以打包專案

超級簡化地說，Vite 和 Vue Cli 的功能幾乎相同，但是 Vite 做得更快、超級快。
而 Vue 團隊開發 Vite 的目的，主要就是為了解決「伺服器啟動慢」和「更新速度慢」。

所以，在 Vite 和 Vue 3 一起推出後，Vue Cli 也進入了維護模式。

來看看 Vue 官方文件怎麼說：

Vue CLI 是官方提供的基于 Webpack 的 Vue 工具链，它现在处于维护模式。我们建议使用 Vite 开始新的项目，除非你依赖特定的 Webpack 的特性。在大多数情况下，Vite 将提供更优秀的开发体验

尤雨溪也在知乎的回答提到過「Vue 以后官方工具全部基于 Vite」。

新手怎麼選

對初學 Vue 的新手來說，我自己認為比較有感的地方是：

1. 開發體驗 - 速度

你可能會想，一直強調很快，到底有多快？
以啟動本地開發伺服器為例：

• Vue cli
  執行 npm run serve 後，花費 2064ms 秒編譯完成，大概是 2 秒多。
  

你可以會想說：「也不慢阿，回個訊息他就做完了。」
再來看看 Vite。

• Vite
  執行 npm run dev 後，花費 260ms 秒編譯完成。
  

結論：痛苦都是比較出來的，這就是個逼人的世界，快、還要更快。

進行上面的時間比較時，我都是用剛建立完成的專案來跑的，也就是說，專案內容並不多；如果專案開發到後期，程式碼越來越多、用到的資源越來越多，那時間差異就會更明顯。

至於 Vite 為什麼可以跑得那麼快，他和 Vue Cli 內部實作上最大差別是什麼，我們之後再來看(?)

2. 預設整合的插件

開發者透過指令列建立專案時，提示選擇的插件有些不一樣，這個可以透過自己手動安裝解決。
以初學者的角度來說，Vue Cli 提供的設定選項比較完整一點點(真一點點)，同個項目會有多種選擇，而 Vite 提供的選項都是以 Vue 團隊目前默認的工具鏈為主。

• 以狀態管理器為例，Vue Cli 提示搭配的是 Vuex、Vite 提示搭配的是 Pinia。
• 以 CSS 預處理器為例，Vue Cli 會根據開發者的選擇協助安裝，Vite 則沒有，要自己透過套件管理器進行安裝。

小結

如果你跟我一樣是框架初學者，沒有很特定的需求或是偏好，尤其是還在練習基礎語法的階段，建議選擇 Vite，速度快這件事情是最有感的，其他的差異感受還不大。

建立 Vue 專案 with Vite!

1. 確定本機有安裝 Node.js version 16.0 或以上的版本
2. 在本機執行 npm init vue@latest ，允許安裝 create-vue@latest package

Need to install the following packages:
  create-vue@latest
Ok to proceed? (y) y

2. 輸入專案名稱

✔ Project name: … <your-project-name>

3. 選擇是否需要週邊工具

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes
✔ Add JSX Support? … No / Yes
✔ Add Vue Router for Single Page Application development? … No / Yes
✔ Add Pinia for state management? … No / Yes
✔ Add Vitest for Unit testing? … No / Yes
✔ Add Cypress for both Unit and End-to-End testing? … No / Yes
✔ Add ESLint for code quality? … No / Yes
✔ Add Prettier for code formatting? … No / Yes

Scaffolding project in ./<your-project-name>...
Done.

• Vue Router: Vue.js 的官方路由，可用來開發單頁應用程式 (建議可安裝)
• Pinia: Vue.js 核心團隊開發的狀態管理器 (建議可安裝)
• Vitest: 基於 Vite 的單元測試框架
• Cypress: E2E 測試框架
• ESLint: 檢查程式碼 (建議可安裝)
• Prettier: 將程式碼格式化 (建議可安裝)

4. 根據提示執行一連串指令

進入專案根目錄

cd [your-project-name]

根據 create-vue 生成的 package.json 進行安裝

npm install

啟動開發伺服器來運行專案

npm run dev

點擊網址可以看到下方畫面，修改程式碼畫面會即時更新，就開始練習 Vue 語法和指令了。

結尾與延伸主題

今天就先到這裡，明天再來看 Vite 專案資料夾的結構。

以下提供兩個延伸題目的參考資料。

如何用 Vue Cli 建立專案

大家可以去試試看 Vue Cli，才會對 Vite 更快這件事比較有感，相關步驟可以參考：

1. Vue Cli Guide - Creating a Project
2. Vue.js 什麼意思 - Day 02：Vue 個專案先
3. 重新認識 Vue.js | Kuro Hsu 3-1 Vue CLI 介紹

Vite 為什麼跑得快

? 這個部份留待系列後面再來補充。(確定要立 flag?)
已經好奇到不行的人，可以先閱讀以下資料：

1. Vite Doc - Why Vite
2. Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？

參考資料：

1. Vue Doc - Quick Start #Creating a Vue Application
2. Vite Doc - Why Vite
3. Vue Cli Doc
4. vite多久后能干掉webpack？ 尤雨溪 - Vite 的目标不是要干掉 webpack
5. Vite 与 Vue Cli 对比 - 尤雨溪: Vite 会取代 vue-cli 吗？