用 Vue CLI 4 建立 Vue 3 專案：手動選擇設定逐步紀錄
用 vue create 建立 Vue 3 專案的完整流程紀錄，逐步說明手動選擇模式的每一個選項：Vue 版本、history mode、CSS 前處理器、ESLint Airbnb 設定與設定檔放置位置，以及專案名稱不能有大寫的踩坑。
W
之前寫過 Vue CLI 3.0 安裝與建立專案筆記，那篇是剛裝好時的流程紀錄。這篇把互動式選單每一步在問什麼記下來——第一次建專案時很容易一路 Enter 到底，之後才發現選錯，方便下次直接照著選。
建立專案
vue create 專案名稱
專案名稱不能有大寫字母，這是最容易踩到的一點，後面會提到。
逐步設定
1. 選擇 preset
選最後一個 Manually select features。前面幾個 Default 只給 Babel 與 ESLint，少了 Router 與 CSS 前處理器，還是要自己補。
2. 勾選需要的功能
用空白鍵勾選、Enter 確認。這次勾了 Choose Vue version、Babel、Router、Vuex、CSS Pre-processors、Linter / Formatter。
兩個測試選項這次沒有勾，但值得知道差別：
- Unit Testing：單元測試，測單一函式或元件的行為。Vue CLI 會把環境配置好，選 Jest 當測試執行器即可直接開始寫。
- E2E Testing：端對端測試，用程式驅動真實瀏覽器，模擬使用者從開啟頁面到完成操作的整個流程。Vue CLI 提供 Cypress 與 Nightwatch 兩種選擇。
兩者的差別是測試的範圍：單元測試確認「這個函式算得對不對」，E2E 確認「使用者真的點得下去、流程走得完」。
3. 選 Vue 版本
選 3.x。
4. Router 要不要用 history mode
這題是在問網址要長什麼樣子：
- hash mode（選 No）：網址會帶
#，像example.com/#/about。#後面的部分不會送到伺服器，所以不需要任何伺服器設定，丟到靜態空間就能跑。 - history mode（選 Yes）：網址是乾淨的
example.com/about。但使用者直接開這個網址或按重新整理時，請求會真的送到伺服器，伺服器上並沒有/about這個檔案，就會回 404。
所以提示才寫「Requires proper server setup for index fallback in production」——選 history mode 的話，伺服器要設定成把找不到的路徑一律回傳 index.html，交給前端 router 處理。本機 npm run serve 的開發伺服器已經幫你做好這件事，所以開發時不會有感覺，部署到正式站才會踩到。
5. CSS 前處理器
選 Sass/SCSS (with node-sass)。
6. Linter / Formatter
選 ESLint + Airbnb config。Airbnb 的規則是四個選項裡最嚴格的，會強制縮排、引號、結尾逗號等寫法，一開始會覺得很囉唆，但團隊協作時省下很多 code review 在吵格式的時間。
7. 什麼時候檢查程式碼
兩個選項可以複選：
- Lint on save：存檔就檢查，錯誤立刻出現在終端機與編輯器。
- Lint and fix on commit：commit 前檢查並自動修正，擋掉不符規範的程式碼進版控。
8. 設定檔放哪裡
In dedicated config files 會產生 babel.config.js、.eslintrc.js 等獨立檔案；In package.json 則全部塞進 package.json 的欄位裡。專案根目錄的檔案數量與 package.json 的長度，兩者擇一，設定變多之後獨立檔案比較好找。
9. 要不要存成 preset
存起來的話，下次 vue create 就會在第一步的清單裡看到它（也就是第 1 張圖最上面那個「初始」）。
10. 開始建立
CLI 會自動初始化 git repository 並安裝相依套件。
遇到的問題：專案名稱不能有大寫
Invalid project name: "vue3-AdminLTE"
Warning: name can no longer contain capital letters
原因不在 Vue CLI，而在 npm。專案名稱會直接寫進 package.json 的 name 欄位，而 npm 從 v5 之後就不再允許套件名稱含有大寫字母。改成全小寫加連字號即可：
vue create vue3-adminlte
後記
這篇記錄的是 2022 年的做法。現在建 Vue 專案官方已改推 Vite（npm create vue@latest），Vue CLI 進入維護模式，選項與流程都不一樣了。現在的做法與踩坑另外寫在 Vite + Vue 3 + Tailwind CSS 4 + shadcn-vue 安裝心得與常見踩坑。