2025-03-19-建立 **「JavaScript 系列九」的 Vue 專案

我們現在就一起來建立 「JavaScript 系列九」的 Vue 專案，步驟如下：

---

✅ 1. 在 VueProjects 資料夾中建立新專案

請在終端機（Terminal）中輸入以下指令（建議用 Vite 建 Vue 3 專案）：

npm create vite@latest js9-cool-components -- --template vue

這會建立一個叫做 js9-cool-components 的 Vue 專案資料夾。

---

✅ 2. 進入該專案資料夾

cd js9-cool-components

---

✅ 3. 安裝所有依賴套件（第一次要做）

npm install

---

✅ 4. 啟動開發伺服器（開始寫程式啦！）

npm run dev

執行後你會看到：

VITE v4.x  ready in 300ms
➜  Local:   http://localhost:5173/

打開瀏覽器輸入 http://localhost:5173/ 就能看到 Vue App 畫面！

---

✅ 5. 開始你的「系列九」開發

你可以把你的元件放到：

src/components/

例如：

檔案	內容
Header.vue	顯示 I am header!
Main.vue	顯示 I am main!
Footer.vue	顯示 I am footer!
MyBadge.vue	仿 Quasar Badge 元件

然後在 App.vue 中匯入並使用它們。

---

🧼 小提醒：如果之前沒裝過 Vite CLI

請先安裝一次 npm create vite@latest 所需指令（如果終端機出錯）：

npm install -g create-vite

---

✅ 成功後你會看到的檔案結構如下：

VueProjects/
└── js9-cool-components/
    ├── index.html
    ├── package.json
    ├── vite.config.js
    └── src/
        ├── App.vue
        ├── main.js
        └── components/
            ├── Header.vue
            ├── Main.vue
            ├── Footer.vue
            └── MyBadge.vue

---

很好奇心 👏 問得非常到位！

---

✅ --template vue 是什麼意思？

這是給 npm create vite@latest 的 參數（Arguments），指定你要用哪一種模板（template）來建立你的新專案。

---

🔍 說明拆解：

npm create vite@latest js9-cool-components -- --template vue

部分	說明
npm create vite@latest	呼叫最新版的 Vite 專案產生器
js9-cool-components	要建立的資料夾名稱
--	告訴 npm：接下來的參數是要傳給 Vite CLI 的，不是 npm 自己的
--template vue	指定要用 vue 模板建立專案（也可以換成其他模板）

---

✅ 有哪些可用的 --template 選項？

模板名稱	說明
vanilla	純 JavaScript 專案
vue	Vue 3 + Vite 基礎專案（你現在用的）
vue-ts	Vue 3 + TypeScript
react	React + Vite 專案
react-ts	React + TypeScript
preact	Preact 專案
lit	Lit 元件專案
svelte	Svelte 專案

---

✅ 如果你省略 --template vue 會怎樣？

如果你打：

npm create vite@latest

它會進入互動模式，問你：

✔ Project name: … 
✔ Select a framework: › - Use arrow-keys. Return to submit.
    Vanilla
    Vue
    React
    ...

你就要用方向鍵自己選 Vue。
而加上 --template vue 就是直接跳過選單，自動建立 Vue 專案。

---

✅ 結論：

問題	解答
--template vue 是什麼？	是告訴 Vite：「我要建立 Vue 專案」
可以不加嗎？	可以，加了是自動化；不加會進入互動選單
可以換別的模板嗎？	可以！像 --template react、--template vue-ts 等

---