Vue3 快速入门教程：从环境搭建到实战开发

一、Vue 3 基础环境搭建

1.1 安装必备工具

• Node.js：下载并安装 Node.js（推荐 v14+），通过命令验证：

  bash 复制

  node -v  # 查看Node版本
  npm -v   # 查看npm版本
  

• Vue CLI：全局安装 Vue 官方脚手架：

  bash 复制

  npm install -g @vue/cli
  

1.2 创建 Vue 3 项目

# 新建项目（交互式配置）
vue create my-vue3-app

# 进入项目并启动
cd my-vue3-app
npm run serve

启动后访问 http://localhost:8080 查看默认页面。

二、Vue 3 核心语法与 API

2.1 组件基础结构（Options API）

<template>
  <div>
    <h1>{{ message }}</h1>
    <button @click="changeMsg">点击修改</button>
  </div>
</template>

<script>
export default {
  data() {
    return { message: 'Hello Vue 3' }
  },
  methods: {
    changeMsg() { this.message = '你好，Vue 3' }
  }
}
</script>

2.2 Composition API 入门

Vue 3 新增的组合式 API，通过setup()函数组织逻辑：

<template>
  <div>
    <h2>计数器：{{ count }}</h2>
    <button @click="increment">+1</button>
  </div>
</template>

<script>
import { ref, onMounted } from 'vue'

export default {
  setup() {
    const count = ref(0)        // 响应式数据
    const increment = () => count.value++  // 方法
    
    onMounted(() => {           // 生命周期钩子
      console.log('组件已挂载')
    })
    
    return { count, increment } // 暴露数据和方法
  }
}
</script>

三、组件化开发与通信

3.1 创建子组件（Counter.vue）

<template>
  <div>
    <h3>子组件计数：{{ localCount }}</h3>
    <button @click="sendToParent">传递给父组件</button>
  </div>
</template>

<script>
import { ref } from 'vue'

export default {
  props: { initialCount: { type: Number, default: 0 } },
  setup(props, { emit }) {
    const localCount = ref(props.initialCount)
    const sendToParent = () => emit('update-count', localCount.value)
    return { localCount, sendToParent }
  }
}
</script>

3.2 父组件调用子组件

<template>
  <div>
    <h2>父组件</h2>
    <Counter :initial-count="parentCount" @update-count="updateParentCount" />
    <p>父组件值：{{ parentCount }}</p>
  </div>
</template>

<script>
import { ref } from 'vue'
import Counter from './Counter.vue'

export default {
  components: { Counter },
  setup() {
    const parentCount = ref(10)
    const updateParentCount = (val) => parentCount.value = val
    return { parentCount, updateParentCount }
  }
}
</script>

四、Vue 3 新特性实战

4.1 Teleport 组件（模态框挂载）

<teleport to="body">
  <div class="modal" v-if="isOpen">
    <h3>模态框内容</h3>
    <button @click="isOpen = false">关闭</button>
  </div>
</teleport>

4.2 Suspense 异步组件

<suspense>
  <template #default>
    <AsyncComponent />  <!-- 异步组件 -->
  </template>
  <template #fallback>
    <div class="loading">加载中...</div>
  </template>
</suspense>

五、生态工具与最佳实践

5.1 常用库集成

• 状态管理：Pinia（推荐）或 Vuex 4

  bash 复制

  npm install pinia
  

• 路由：Vue Router 4

  javascript 复制

  // main.js
  import { createRouter, createWebHistory } from 'vue-router'
  

• UI 库：Element Plus（原生支持 Vue 3）

5.2 开发工具推荐

• 编辑器：VS Code + Volar 插件（替代旧版 Vue 插件）
• 调试工具：Vue Devtools 6（支持 Vue 3）

六、快速实践案例

6.1 TodoList 应用核心功能

1. 数据结构（Composition API）：

   javascript 复制

   const todos = ref([
     { id: 1, text: '任务1', done: false },
     { id: 2, text: '任务2', done: true }
   ])
   

2. 添加任务：

   javascript 复制

   const addTodo = (text) => {
     todos.value.push({ id: Date.now(), text, done: false })
   }
   

3. 删除任务：

   javascript 复制

   const removeTodo = (id) => {
     todos.value = todos.value.filter(todo => todo.id !== id)
   }
   

更多细节可查阅 官方文档 或尝试实战项目进阶。