Vue 可以透過下面的指令，接著詢問一系列的問題，按照設定快速初始一個專案。(目前版本為 3.6.1)
npm init vue@latest
實際是執行這個 create-vue，想透過原始碼的解析，來了解怎麼樣做一個類似的功能，這個專案架構是如何、如何達成建立專案的功能。
1. playground
運用 git submodules的功能，主要是將各種條件下的樣板做snapshot，形成另一個 create-vue-templates 專案。
2. scripts
顧名思義分別對應到 package.json 的 scripts 所執行的檔案名。
- build
- prepublish
- snapshot
- test
3. template
將程式碼依照性質分成不同的目錄，根據使用者的設定將對應的檔案複製或合成等，形成 Vue 的專案。
- base: 基本必備的程式碼，主要套件為 vue, vite
- code: HelloWorld.vue 元件以及 vue-router 範例程式碼，會分成有無使用 ts 版本。
- config: 裡面每個目錄依照套件名稱命名，目錄包含：cypress-ct, cypress, jsx, pinia, playwright, router, typescript, vitest，目錄裡是安裝套件的設定檔。主要會有 package.json 設定安裝那些套件，後續會將內容與現有設定合併，再來以 cypress 為例，會有 cypress.config.js 及 cypress.config.ts，屆時會根據是否有用 ts 來複製對應的檔案。
- entry: 指的是 vite 打包的 entry main.js，執行 createApp 的功能，總共有預設, pinia, router, pinia+router 這四種版本。
- eslint
- tsconfig
4. utils
目錄及檔案合併等方法都在這個目錄裡，檔名命名已經相當清楚。
- banners.ts: create-vue 指令的 weclome message
- deepMerge.ts
- directoryTraverse.ts
- generateReadme.ts
- getCommand.ts: create-vue 將專案建置完成後，會出現的指令提示 (ex. npm install)
- renderEslint.ts: 根據有無使用 ts, cypress 等建立 .eslint
- renderTemplate.ts: 複製 template/ 內的檔案
- sortDependencies.ts: 依照名稱，排序 package.json 內設定的套件。
5. index
主要邏輯在這個檔案裡
- 讀 argv 指令
- 使用 prompts 詢問一連串問題
- 依照專案名稱等，產生 package.json
- 複製 base
- 複製 config
- 複製 tsconfig
- 產生 eslint
- 複製 entry
- 清除 js or ts 多餘的檔案或重新命名
- 產生 README.md
- 專案已完成，顯示指令提示
拆解過後，我覺得最重要的是如何整理出 template/，讓不同的安裝需求可以拆解出來，有秩序地組成這個初始的專案。
