Vue 3 从入门到精通 - 完整指南

📚 目录

• 开发环境与项目初始化

• Vue 3 基础知识

• 组件开发模式对比

• 组件间通信

• 路由配置

• 状态管理

• 完整案例：Login 应用

• 高级特性

• 项目架构与优化

• 总结与扩展

🛠️ 开发环境与项目初始化

环境要求

• Node.js：推荐 LTS 版本

• 包管理器：npm、yarn 或 pnpm

使用 Vite 创建项目

bash

# 创建项目
npm create vite@latest vue3-demo -- --template vue
cd vue3-demo
 
# 安装依赖
npm install
 
# 启动开发服务器
npm run dev
AI写代码bash

增强配置

javascript

// vite.config.js
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import { resolve } from 'path'
 
export default defineConfig({
  plugins: [vue()],
  resolve: {
    alias: {
      '@': resolve(__dirname, 'src')
    }
  },
  server: {
    port: 3000,
    open: true
  }
})
AI写代码javascript
运行

🎯 Vue 3 基础知识

模板语法与指令

vue

<template>
  <div>
    <!-- 插值 -->
    <h1>{
  
  { message }}</h1>
    
    <!-- 条件渲染 -->
    <p v-if="visible">显示内容</p>
    <p v-else>其他内容</p>
    
    <!-- 列表渲染 -->
    <ul>
      <li v-for="(item, index) in items" :key="index">
        {
  
  { item }}
      </li>
    </ul>
    
    <!-- 事件处理 -->
    <button @click="handleClick">点击</button>
    
    <!-- 属性绑定 -->
    <input :value="inputValue" @input="handleInput">
  </div>
</template>
AI写代码javascript
运行

响应式 API

1. ref 与 reactive

vue

<script setup>
import { ref, reactive } from 'vue'
 
// ref - 用于基本类型
const count = ref(0)
const message = ref('Hello')
 
// reactive - 用于对象
const state = reactive({
  user: {
    name: 'John',
    age: 25
  },
  todos: []
})
 
// 修改值
count.value++ // ref 需要 .value
state.user.name = 'Alice' // reactive 直接访问
</script>
AI写代码javascript
运行

2. 计算属性

vue

<script setup>
import { ref, computed } from 'vue'
 
const price = ref(10)
const quantity = ref(2)
 
// 计算属性
const total = computed(() => price.value * quantity.value)
 
// 带 setter 的计算属性
const fullName = computed({
  get: () => `${firstName.value} ${lastName.value}`,
  set: (newValue) => {
    [firstName.value, lastName.value] = newValue.split(' ')
  }
})
</script>
AI写代码javascript
运行

3. 侦听器

vue

<script setup>
import { ref, watch, watchEffect } from 'vue'
 
const count = ref(0)
const user = reactive({ name: 'John' })
 
// 侦听单个值
watch(count, (newVal, oldVal) => {
  console.log(`Count changed: ${oldVal} -> ${newVal}`)
})
 
// 侦听多个值
watch([count, () => user.name], ([newCount, newName]) => {
  console.log(`Count: ${newCount}, Name: ${newName}`)
})
 
// 立即执行的侦听器
watchEffect(() => {
  console.log(`Count is: ${count.value}`)
})
</script>
AI写代码javascript
运行

⚙️ 组件开发模式对比

1. Options API（传统方式）

vue

<template>
  <div>{
  
  { greeting }}</div>
</template>
 
<script>
export default {
  data() {
    return {
      greeting: 'Hello Options API'
    }
  },
  methods: {
    updateGreeting() {
      this.greeting = 'Updated!'
    }
  },
  mounted() {
    console.log('Component mounted')
  }
}
</script>
AI写代码javascript
运行

2. Composition API

vue

<template>
  <div>{
  
  { greeting }}</div>
</template>
 
<script>
import { ref, onMounted } from 'vue'
 
export default {
  setup() {
    const greeting = ref('Hello Composition API')
    
    const updateGreeting = () => {
      greeting.value = 'Updated!'
    }
    
    onMounted(() => {
      console.log('Component mounted')
    })
    
    return {
      greeting,
      updateGreeting
    }
  }
}
</script>
AI写代码javascript
运行

3. <script setup>（推荐）

vue

<template>
  <div>{
  
  { greeting }}</div>
</template>
 
<script setup>
import { ref, onMounted } from 'vue'
 
const greeting = ref('Hello <script setup>')
 
const updat
AI写代码javascript
运行