認識 Vue 3

說明

核心概念

Vue 3 是一個漸進式 JavaScript 框架，主要用於建立前端 UI。

  • 響應式數據（Reactivity）
  • 組件系統（Component System）
  • 指令（Directives）：如 v-bind、v-model、v-for、v-if
  • 事件處理（Event Handling）：如 @click
  • 計算屬性與監聽器（Computed Properties & Watchers）
  • 組件之間的通信（Props & Emit）
  • Vue Router：官方路由管理器
  • Pinia：官方推薦狀態管理（取代 Vuex）

Vue 3 資料夾結構範例（以 Vite + Pinia + Vue Router 專案為例）

my-vue-app/
├── public/                  # 靜態資源 (favicon, robots.txt)
├── src/                     # 源碼資料夾
│   ├── api/                 # API 模組 (如使用 Axios)
│   ├── assets/              # 圖片、樣式、字型
│   ├── components/          # 可重用元件
│   ├── composables/         # Composition API 組合式函數
│   ├── layouts/             # Layout 元件（如使用多版型）
│   ├── middleware/          # 路由中介層（手動實作，非內建）
│   ├── modules/             # 模組插件（如通知、GA 等）
│   ├── pages/               # 頁面元件（常與 Vue Router 搭配使用）
│   ├── plugins/             # 外部插件初始化（如 i18n、axios 等）
│   ├── router/              # Vue Router 設定與路由守衛
│   ├── store/               # Pinia 狀態管理
│   ├── utils/               # 公用函式與工具
│   ├── App.vue              # 根元件
│   └── main.js              # 程式進入點，載入路由與狀態管理
├── .env                     # 環境變數檔案
├── .gitignore
├── package.json
├── vite.config.js           # Vite 設定檔
└── README.md

Nuxt 3 資料夾結構簡介

  • Nuxt 3 內建 Layout 系統與檔案式路由（不需手動建立 Vue Router）
  • pages/ 資料夾下的 .vue 自動成為路由
  • layouts/ 中的 default.vue 為預設 Layout
  • app.vue 可省略，若存在則為自定應用根層
nuxt-app/
├── layouts/
│   └── default.vue         # 預設 Layout
├── pages/
│   └── index.vue           # 預設首頁
├── nuxt.config.ts          # Nuxt 設定檔
└── app.vue                 # 根層 Layout（可省略）

開發方式

1. 使用 <script> 方式（CDN 快速體驗）

  • 適合初學者快速上手，不需安裝任何工具
  • 無模組系統、無法使用單檔元件（.vue）
  • 僅適用於小型或實驗性專案
<!DOCTYPE html>
<html lang="zh-TW">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1.0" />
  <title>Vue 3 初體驗</title>
  <script src="https://unpkg.com/vue@3/dist/vue.global.js"></script>
</head>
<body>
  <div id="app">
    <h1>{{ message }}</h1>
    <button @click="changeMessage">點擊更改訊息</button>
  </div>

  <script>
    const { createApp } = Vue;
    createApp({
      data() {
        return { message: 'Hello Vue 3!' };
      },
      methods: {
        changeMessage() {
          this.message = '你剛剛點了按鈕！';
        }
      }
    }).mount('#app');
  </script>
</body>
</html>

2. 使用 Vue CLI（傳統方式）

  • 適合中大型專案，有完整腳手架功能（Webpack-based）
  • Vue CLI 支援 Vue 2 和 Vue 3，但目前開發新專案建議改用 Vite
# 安裝 Vue CLI
npm install -g @vue/cli

# 建立 Vue 3 專案（選擇 Vue 3 選項）
vue create my-vue-app

3. 使用 Vite（官方推薦）

  • Vue 官方推薦工具，取代 Vue CLI
  • 使用原生 ESM 模組，啟動與編譯速度極快
# 建立 Vite 專案（選擇 vue 模板）
npm create vite@latest my-vue-app --template vue

# 進入並啟動專案
cd my-vue-app
npm install
npm run dev

Composition API（Vue 3 核心）

Vue 3 引入 Composition API，讓邏輯更模組化與彈性：

Options API（Vue 2 傳統寫法）

export default {
  data() {
    return { count: 0 };
  },
  methods: {
    increment() {
      this.count++;
    }
  }
}

Composition API（Vue 3 新寫法）

import { ref } from 'vue';

export default {
  setup() {
    const count = ref(0);
    function increment() {
      count.value++;
    }
    return { count, increment };
  }
}
  • ref()：建立響應式資料
  • reactive()：建立複合資料物件
  • watch()、computed()：回應資料變動

Vue 3 進階功能

  • Vue Router：支援動態路由與巢狀路由
  • Pinia：推薦使用的全域狀態管理工具，支援 TypeScript
  • 組件插槽（Slots）：自訂組件內容插入點
  • 表單雙向綁定（v-model）：處理輸入輸出資料
  • Axios 整合：與後端 API 溝通

Vue 3 最佳實踐

  • 拆分元件：維持單一職責
  • Props / Emit：父子組件溝通推薦方式
  • KeepAlive：保留元件狀態避免重繪
  • 動態匯入元件（Async Components）：加快初始載入
  • 使用 composables：抽出邏輯以提升可讀性與可維護性

Vue CLI vs Vite 比較

比較項目 Vue CLI Vite（推薦）
安裝速度 較慢（Webpack） 快速（原生 ESM）
開發啟動速度 慢（需編譯整個專案） 快（模組載入即用）
熱重載（HMR） 較慢 非常快
建構速度 較慢 較快
支援 Vue 版本 Vue 2 & Vue 3 Vue 3（預設）
適合對象 舊專案 / Vue 2 用戶 Vue 3 新專案（推薦）