Vue3实战指南

Vue 3 实战指南

Vue 3 是当前流行的前端框架之一，具有更好的性能、更小的体积和更优秀的组合式API。下面我将介绍Vue 3的核心概念和实战技巧。

1. 项目创建与基础配置

创建Vue 3项目

npm init vue@latest my-vue-app
# 或
yarn create vue my-vue-app

主要目录结构

my-vue-app/
├── public/            # 静态资源
├── src/
│   ├── assets/        # 静态资源
│   ├── components/    # 组件
│   ├── composables/   # 组合式函数
│   ├── router/        # 路由配置
│   ├── stores/        # Pinia状态管理
│   ├── views/         # 页面级组件
│   ├── App.vue        # 根组件
│   └── main.js        # 应用入口
├── vite.config.js     # Vite配置
└── package.json

2. 组合式API (Composition API)

基本使用

组合式函数 (Composables)

创建可复用的逻辑：

// src/composables/useCounter.js
import {
    ref } from 'vue'

export function useCounter(initialValue = 0) {
   
  const count = ref(initialValue)
  
  function increment() {
   
    count.value++
  }
  
  function decrement() {
   
    count.value--
  }
  
  function reset() {
   
    count.value = initialValue
  }
  
  return {
   
    count,
    increment,
    decrement,
    reset
  }
}

使用组合式函数：

3. 组件通信

<