安装与配置问题

确保已安装最新版 Node.js（建议 v16+），全局安装 CodeBuddy CLI：

npm install -g @codebuddy/cli

若出现权限错误，在 Linux/macOS 前加 sudo，Windows 需以管理员身份运行终端。

项目初始化时若卡在依赖下载阶段，可切换 npm 镜像源：

codebuddy create vue-todo --registry=https://registry.npmmirror.com

组件通信异常

父子组件传值需严格遵循 Vue 单向数据流原则。父组件通过 v-bind 传递 prop：

<template>
  <TodoItem :task="currentTask" />
</template>

子组件需显式声明 prop 并避免直接修改：

props: {
  task: {
    type: Object,
    required: true
  }
}

跨层级通信建议采用 provide/inject 或 Pinia 状态管理。在 CodeBuddy 生成的项目中已预装 Pinia，可直接使用：

// stores/todo.js
export const useTodoStore = defineStore('todo', {
  state: () => ({ tasks: [] })
})

样式作用域混乱

使用 <style scoped> 确保组件样式隔离。若需深度选择器修改子组件样式：

::v-deep(.child-class) {
  margin: 0;
}

全局样式应放置在 src/assets/styles 目录下，通过 main.js 引入：

import '@/assets/styles/base.css'

路由配置错误

动态路由参数需在路由定义中明确指定：

{
  path: '/task/:id',
  component: TaskDetail,
  props: true
}

获取路由参数推荐使用 useRoute 组合式 API：

import { useRoute } from 'vue-router'
const route = useRoute()
console.log(route.params.id)

构建部署问题

生产环境构建前检查 vue.config.js 中的 publicPath：

module.exports = {
  publicPath: process.env.NODE_ENV === 'production' ? '/todo-app/' : '/'
}

部署至静态服务器出现 404 时，需配置 fallback 重定向。例如 Nginx 配置：

location / {
  try_files $uri $uri/ /index.html;
}

数据持久化方案

采用 localStorage 实现离线存储时，建议封装为响应式操作：

import { ref, watchEffect } from 'vue'

const STORAGE_KEY = 'vue-todo'
const tasks = ref(JSON.parse(localStorage.getItem(STORAGE_KEY) || '[]'))

watchEffect(() => {
  localStorage.setItem(STORAGE_KEY, JSON.stringify(tasks.value))
})

对于复杂应用，推荐使用 CodeBuddy 集成的 IndexedDB 封装库：

import { useIDB } from '@codebuddy/idb'
const db = useIDB('todoDB', 1, {
  upgrade(db) {
    db.createObjectStore('tasks', { keyPath: 'id' })
  }
})