安装与初始化 CodeBuddy Code CLI

确保已安装 Node.js 环境（建议版本 ≥16.0.0），通过以下命令全局安装 CLI 工具：

npm install -g @codebuddy/code-cli

在 Vue 项目根目录运行初始化命令，生成配置文件：

code-cli init

创建待办应用基础结构

通过 CLI 生成 Vue 组件骨架。例如创建任务列表组件：

code-cli generate component TodoList

生成的组件默认包含模板、脚本和样式部分，可按需调整目录结构（如 src/components/TodoList.vue）。

集成任务搜索功能

在 TodoList.vue 中添加搜索输入框与逻辑：

<template>
  <input v-model="searchQuery" placeholder="搜索任务..." />
  <ul>
    <li v-for="task in filteredTasks" :key="task.id">
      {{ task.title }}
    </li>
  </ul>
</template>

<script>
export default {
  data() {
    return {
      tasks: [{ id: 1, title: "学习 Vue" }, { id: 2, title: "部署项目" }],
      searchQuery: ""
    };
  },
  computed: {
    filteredTasks() {
      return this.tasks.filter(task =>
        task.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
    }
  }
};
</script>

实现多条件筛选

扩展搜索功能，支持按状态（如“已完成”）筛选。修改数据与计算属性：

<script>
export default {
  data() {
    return {
      tasks: [
        { id: 1, title: "学习 Vue", completed: false },
        { id: 2, title: "部署项目", completed: true }
      ],
      searchQuery: "",
      filterStatus: "all" // 'all' | 'completed' | 'active'
    };
  },
  computed: {
    filteredTasks() {
      let result = this.tasks.filter(task =>
        task.title.toLowerCase().includes(this.searchQuery.toLowerCase())
      );
      if (this.filterStatus !== "all") {
        const isCompleted = this.filterStatus === "completed";
        result = result.filter(task => task.completed === isCompleted);
      }
      return result;
    }
  }
};
</script>

使用 CodeBuddy CLI 优化代码

通过 CLI 自动格式化与校验代码：

code-cli format src/components/TodoList.vue
code-cli lint src/components/TodoList.vue

部署与测试

运行开发服务器实时预览效果：

npm run serve

通过 CodeBuddy CLI 生成生产环境构建：

code-cli build

调试与日志

启用 CodeBuddy 调试模式查看组件状态变化：

code-cli debug src/components/TodoList.vue

以上步骤结合了 Vue 的响应式特性和 CodeBuddy CLI 的自动化工具链，可快速实现带搜索筛选的待办应用。