# 初步認識Vue及建立一個Vue專案

### 什麼是Vue?
  Vue 是一個 Javascript 框架，它提供了很多的功能來達到傳統需寫出繁雜的程式碼才能達到的樣子。
  與其他的框架不同的是，你可以把 Vue 和現有的 HTML 做整合，讓你可以像使用插入性替換的函式庫一樣來使用 Vue ，就像使用 JQuery 一樣。
  總而言之，Vue是一個簡潔、快速、好管理的前端框架工具。

---

### Vue2 跟 Vue3差別?

| 版本 | Vue 2 | Vue 3 |
|------------------------|----------------------------------------------|----------------------------------------------------------|
| 發佈時間 | 2016 年 | 2020 年 |
| 架構核心 | Options API | Composition API（可選） + Options API 支援 |
| TypeScript 支援 | 部分支援（透過外部型別定義） | 原生支援，完全用 TypeScript 重寫 |
| 組件寫法 | Options API（data, methods, computed） | Composition API（setup、ref、reactive） |
| 響應式系統 | Object.defineProperty | Proxy（更高效且支援更多資料結構） |
| 性能 | 較慢（特別是在大型應用） | 更快，記憶體占用更低，初始加載更快 |
| Tree-shaking 支援 | 不支援 | 支援（更有效減少打包體積） |
| Fragment 支援 | 不支援（根節點只能有一個） | 支援（允許多個根節點） |
| Teleport（傳送門） | 不支援 | 支援（可將組件渲染到 DOM 其他位置） |
| Suspense（異步組件） | 不支援 | 支援（處理 async 組件的 loading 狀態） |
| 自訂渲染器 | 較難實作 | 提供 @vue/runtime-core 支援更易於實作 |
| 相容性 | 舊系統與框架多使用 | 多數生態已轉向 Vue 3，但 Vue 2 仍被廣泛使用 |
| Vuex 狀態管理 | Vuex 3 | Vuex 4（支援 Vue 3）或 Pinia（官方推薦） |
| 官方推薦狀態管理工具 | Vuex | Pinia（新一代狀態管理） |

#### Vue2 跟 Vue3差別【範例】
Options API（Vue 2 或 Vue 3 中仍可使用）

<template>
  <div>
    <p>你點了 {{ count }} 次</p>
    <button @click="increment">點我</button>
  </div>
</template>

<script>
export default {
  data() {
    return {
      count: 0
    }
  },
  methods: {
    increment() {
      this.count++
    }
  }
}
</script>

Composition API（Vue 3）

<template>
  <div>
    <p>你點了 {{ count }} 次</p>
    <button @click="increment">點我</button>
  </div>
</template>

<script setup>
import { ref } from 'vue'

const count = ref(0)

function increment() {
  count.value++
}
</script>

總結：
| 比較項目 | Options API | Composition API |
|------------------------|-------------------------------------------|------------------------------------------------------|
| 宣告方式 | 使用 `data()`、`methods` 等 options | 使用 `ref()`、`reactive()`、`setup()` 等 |
| 邏輯組織 | 根據功能分類（資料、方法分開） | 根據邏輯分類（可聚合相關邏輯） |
| TypeScript 支援 | 有限制 | 原生支援，類型更清晰 |
| 重用邏輯（如 hooks） | 需用 mixins 或 HOC | 可用自訂 composables（可讀性更佳） |
| 可讀性（小元件） | 直覺清楚 | 稍多語法學習曲線（但更彈性） |

---

### 【實作】建立一個Vue專案
#### 步驟1. 安裝Node.js
網址：https://nodejs.org/zh-tw
為何要安裝Node.js?
* Vue CLI 與現代前端工具（如 Vite）皆需透過 Node.js 的套件管理工具 npm 來安裝與執行。
* 沒有 Node.js，就無法使用 npm create vue@latest 等指令。
(圖1) 請下載LTS(Long-Term Support)穩定版
.
.
.
(略)Node.js安裝步驟略過，請都按下一步安裝即可，安裝完後請重新啟動電腦。

#### 步驟2. 在終端機上安裝Vue
開啟終端機（CMD / PowerShell / Terminal）
輸入以下指令來建立 Vue 3 專案：

npm create vue@latest

#### 步驟3. 設定專案套件選項
執行後會出現如下畫面，請使用鍵盤方向鍵 ↑ ↓ 選擇、空白鍵 勾選、Enter 確認

✔ Project name: … <your-project-name>
✔ Add TypeScript? … No / Yes (X)
✔ Add JSX Support? … No / Yes (X)
✔ Add Vue Router for Single Page Application development? … No / Yes (V)
✔ Add Pinia for state management? … No / Yes (X)
✔ Add Vitest for Unit testing? … No / Yes (X)
✔ Add an End-to-End Testing Solution? … No /  Cypress / Nightwatch / Playwright   (X)
✔ Add ESLint for code quality? … No / Yes  (V)
✔ Add Prettier for code formatting? … No / Yes (X)
✔ Add Vue DevTools 7 extension for debugging? (experimental) … No / Yes  (X)

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

#### 步驟4. 安裝套件
安裝套件

npm install

#### 步驟5. 啟動Local端伺服器
啟動本地開發伺服器

npm run dev

成功會看到以下畫面

  VITE v4.x.x  ready in 500ms

  ➜  Local:   http://localhost:5173/

#### 步驟6. 連線http://localhost:5173/
接著就能使用http://localhost:5173/
看到 Vue 的歡迎畫面啦

----
> 歡迎隨意引用或拷貝，若有涉及侵權概不負責。