階段一：基礎入門 (1-2周)

1.1 環境準備

# 安裝 Node.js (推薦 18+ 版本)
# 安裝 Vue CLI 或使用 Vite
npm create vue@latest my-vue-app
cd my-vue-app
npm install
npm run dev

1.2 Vue 3 核心概念

• 響應式系統：ref(), reactive(), computed()
• 組合式 API：setup() 函數
• 模板語法：插值、指令、事件處理
• 組件基礎：組件定義、Props、Emits

<template><div><h1>{{ title }}</h1><button @click="increment">Count: {{ count }}</button></div>
</template><script setup lang="ts">
import { ref, computed } from 'vue'// 響應式數據
const count = ref(0)
const title = ref('Vue 3 App')// 計算屬性
const doubleCount = computed(() => count.value * 2)// 方法
const increment = () => {count.value++
}
</script>

1.3 學習資源

• Vue 3 官方文檔
• Vue 3 教程
• 在線練習：Vue SFC Playground

階段二：組件開發 (2-3周)

2.1 組件通信

<!-- 父組件 -->
<template><ChildComponent :message="parentMessage" @update="handleUpdate"/>
</template><script setup lang="ts">
import { ref } from 'vue'
import ChildComponent from './ChildComponent.vue'const parentMessage = ref('Hello from parent')const handleUpdate = (newMessage: string) => {parentMessage.value = newMessage
}
</script><!-- 子組件 -->
<template><div><p>{{ message }}</p><button @click="updateParent">Update Parent</button></div>
</template><script setup lang="ts">
interface Props {message: string
}interface Emits {(e: 'update', value: string): void
}const props = defineProps<Props>()
const emit = defineEmits<Emits>()const updateParent = () => {emit('update', 'Updated from child')
}
</script>

2.2 生命周期鉤子

<script setup lang="ts">
import { onMounted, onUnmounted, onUpdated } from 'vue'// 組件掛載后
onMounted(() => {console.log('組件已掛載')
})// 組件更新后
onUpdated(() => {console.log('組件已更新')
})// 組件卸載前
onUnmounted(() => {console.log('組件即將卸載')
})
</script>

2.3 插槽 (Slots)

<!-- 父組件 -->
<template><Card><template #header><h2>卡片標題</h2></template><p>卡片內容</p><template #footer><button>確定</button></template></Card>
</template><!-- 子組件 Card.vue -->
<template><div class="card"><header><slot name="header"></slot></header><main><slot></slot></main><footer><slot name="footer"></slot></footer></div>
</template>

階段三：狀態管理 (1-2周)

3.1 Pinia 狀態管理

// stores/counter.ts
import { defineStore } from 'pinia'export const useCounterStore = defineStore('counter', () => {const count = ref(0)const doubleCount = computed(() => count.value * 2)const increment = () => count.value++const decrement = () => count.value--return { count, doubleCount, increment, decrement }
})

3.2 在組件中使用

<template><div><p>Count: {{ counter.count }}</p><p>Double: {{ counter.doubleCount }}</p><button @click="counter.increment">+1</button></div>
</template><script setup lang="ts">
import { useCounterStore } from '@/stores/counter'const counter = useCounterStore()
</script>

階段四：路由管理 (1周)

4.1 Vue Router 4

// router/index.ts
import { createRouter, createWebHistory } from 'vue-router'const