第一个项目

在这个教程中，我们将创建一个简单的Web应用项目，体验CodeBuddy的核心功能。

项目概述

我们将创建一个简单的待办事项应用，包含：

添加任务
标记完成
删除任务
响应式设计

创建项目

1. 新建项目

打开CodeBuddy
创建新项目
- 点击"File" -> "New Project"
- 或按Ctrl+Shift+N
选择项目模板
- 选择"Web Application"
- 框架选择"Vue 3 + Vite"
- 项目名称：my-todo-app

2. 使用Agent模式创建项目

你也可以使用CodeBuddy的Agent模式来创建项目：

打开Agent面板
- 按Ctrl+Shift+A
- 或点击左侧的Agent图标

输入自然语言描述

创建一个Vue 3待办事项应用，包含以下功能：
- 添加新任务
- 标记任务完成/未完成
- 删除任务
- 任务列表显示
- 使用Element Plus UI组件库
- 响应式设计

选择上下文
- 点击"Add Context"
- 选择项目根目录
执行任务
- 点击"Execute"
- CodeBuddy将自动生成项目结构和代码

项目结构

创建完成后，你的项目结构应该类似这样：

my-todo-app/
├── public/
│   └── favicon.ico
├── src/
│   ├── components/
│   │   ├── TodoItem.vue
│   │   └── TodoList.vue
│   ├── views/
│   │   └── Home.vue
│   ├── App.vue
│   └── main.js
├── package.json
├── vite.config.js
└── README.md

核心代码解析

App.vue

vue

<template>
  <div id="app">
    <el-container>
      <el-header>
        <h1>我的待办事项</h1>
      </el-header>
      <el-main>
        <TodoList />
      </el-main>
    </el-container>
  </div>
</template>

<script setup>
import TodoList from './components/TodoList.vue'
</script>

<style>
#app {
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
}
</style>

TodoList.vue

vue

<template>
  <div class="todo-list">
    <el-input
      v-model="newTodo"
      placeholder="输入新任务..."
      @keyup.enter="addTodo"
      class="todo-input"
    >
      <template #append>
        <el-button @click="addTodo" type="primary">添加</el-button>
      </template>
    </el-input>
    
    <el-divider />
    
    <div v-if="todos.length === 0" class="empty-state">
      <el-empty description="暂无任务，添加一个开始吧！" />
    </div>
    
    <div v-else>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @toggle="toggleTodo"
        @delete="deleteTodo"
      />
    </div>
  </div>
</template>

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

const newTodo = ref('')
const todos = ref([])

const addTodo = () => {
  if (newTodo.value.trim()) {
    todos.value.push({
      id: Date.now(),
      text: newTodo.value,
      completed: false
    })
    newTodo.value = ''
  }
}

const toggleTodo = (id) => {
  const todo = todos.value.find(t => t.id === id)
  if (todo) {
    todo.completed = !todo.completed
  }
}

const deleteTodo = (id) => {
  todos.value = todos.value.filter(t => t.id !== id)
}
</script>

<style scoped>
.todo-list {
  max-width: 600px;
  margin: 0 auto;
}

.todo-input {
  margin-bottom: 20px;
}
</style>

使用CodeBuddy功能

1. 智能补全

在编写代码时，CodeBuddy会自动提供智能补全建议：

输入注释

javascript

// 创建一个函数来过滤已完成的任务

按Tab键
- CodeBuddy会自动生成相应的函数代码

2. 内联聊天

选中一段代码，使用内联聊天进行修改：

选中代码
按Ctrl+K

输入修改需求

添加任务优先级功能，包含高、中、低三个级别

3. 快速操作

使用快速操作工具：

组件选择: 快速插入预定义组件
配置集成: 自动配置第三方服务
预览: 实时预览应用效果

运行项目

1. 安装依赖

bash

npm install

2. 启动开发服务器

bash

npm run dev

3. 查看效果

打开浏览器访问 http://localhost:5173

使用计划模式

如果你想要更复杂的功能，可以使用计划模式：

打开计划模式
- 在Agent面板中切换到"Plan Mode"

输入需求

为待办事项应用添加以下功能：
- 用户认证系统
- 任务分类
- 到期提醒
- 数据持久化
- 团队协作

生成PRD
- CodeBuddy会生成详细的产品需求文档
- 包含系统设计和任务分解
执行计划
- 按照生成的计划逐步实现功能

调试和优化

使用CodeBuddy调试

代码分析
- 选中有问题的代码
- 在聊天中询问："这段代码有什么问题？"
性能优化
- 询问："如何优化这个组件的性能？"
- CodeBuddy会提供具体的优化建议
代码重构
- 选中需要重构的代码
- 输入："重构这段代码，使其更简洁"

下一步

恭喜！你已经成功创建了第一个CodeBuddy项目。接下来你可以：

深入了解IDE功能 - 学习更多高级功能
查看最佳实践 - 学习如何更好地使用CodeBuddy
探索更多示例 - 查看更多项目示例

小贴士

💡 多使用自然语言描述你的需求，CodeBuddy理解能力很强
🎯 善用上下文功能，添加相关文件可以获得更准确的建议
🚀 不要害怕尝试复杂的功能，CodeBuddy可以处理大部分编程任务
📚 经常查看生成的代码，这是学习新技术的好方法

第一个项目 ​

项目概述 ​

创建项目 ​

1. 新建项目 ​

2. 使用Agent模式创建项目 ​

项目结构 ​

核心代码解析 ​

App.vue ​

TodoList.vue ​

使用CodeBuddy功能 ​

1. 智能补全 ​

2. 内联聊天 ​

3. 快速操作 ​

运行项目 ​

1. 安装依赖 ​

2. 启动开发服务器 ​

3. 查看效果 ​

使用计划模式 ​

调试和优化 ​

使用CodeBuddy调试 ​

下一步 ​

小贴士 ​