Vue 3 学习路线指南

阶段一：基础入门 (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