使用 Vite 建立 Vue 3 專案 (完整版)

本文介紹以 Vite 快速建立 Vue 3 專案，官方建議在 Node.js 18.0 以上，目前我是使用 Node.js 19.9.0 (最新 LTS 是 20.11.0)。

Version

Node.js 19.9.0
Vite 5.0
Vue 3.4

Create Project

$ npm create vue@latest

create-vue 是基於 Vite 的 CLI
建立 Vue 專案的 Scaffolding
整合 tool chain (Prettier、ESLint、Vue Router、Vitest、Cypress…)
Bundle Tool (HTML / JavaScript / CSS 壓縮、把註解拿掉、Tree Shaking、Purge CSS、支援 IE…)
內建簡易 HTTP Web Server 可進行開發，並支援 Hot Reload

vite001

Project name：可自行輸入 專案名稱，將以此名稱作為 目錄名稱

vite002

Add TypeScript？：No

Vue 3 也支援 TypeScript，至於要不要使用 TypeScript 是另外一個主題，不在此討論

vite003

Add JSX Suppot？：No

JSX 是個 HTML Template，讓你可以將 JavaScript 跟 HTML 混再一起寫，主要是 React 使用，優點是可借助 JavaScript 的能力來寫 HTML，非常強大，缺點是將 JavaScript 跟 HTML 混在一起，很像早期 PHP，可讀性差且難以維護，Vue 社群很少人在用 JSX

create004

Add Vue Router for Single Page Application devalopment？：No / Yes
- No：若是個人練習 Vue，可選擇 No 不安裝 Vue Router 降低複雜度
- Yes：實際專案要選擇 Yes，因為實際專案一定會用到 Vue Router 管理路由

create004

Add Pinia for state management？：No

Vue 2 時代實際專案一定要有 State Management，但 Vue 3 有 Reactity API 之後，Pinia 的角色變得很尷尬，Reactivity API 可以取代 Pinia 且更簡單

create006

Add Vitest for Unit Testing？：No

Vue 也支援 Unit Test，不實際打 API，而是以 mock API 方式 (假資料) 專門測試 Vue 的 JavaScript 邏輯，優點是 速度快，缺點是由於是 假資料，所以通過 Unit Test 也不保證產品沒問題，將來可嘗試導入 Unit Test，目前先選 No

create007

Add an End-to-End Testing Solution？：No

Vue 也支援 End-to-End Testing，會實際打 API，優點是與實際使用狀況最接近，缺點是 速度慢，將來可嘗試導入 End-to-End Test，目前先選 No

create008

Add ESLint for code quality？：Yes

ESLint 為 JavaScript 的 Linter，用來檢查 JavaScript 寫法，由於 JavaScript 歷史悠久，一些古老的 JavaScript 寫法已經不建議使用，且 Vue 團隊也整合 JavaScript 與 Vue 的 best practice 在 ESLint 中，可藉此協助團隊的 code quality

create009