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