项目初始化

使用 CodeBuddy Code CLI 创建一个新的 Vue 项目。确保 Node.js 和 npm/yarn 已安装。运行以下命令初始化项目：

npx @codebuddy/cli create vue-todo-app
cd vue-todo-app
npm install

项目结构配置

配置项目结构以适应待办应用的需求。在 src 目录下创建以下文件夹：

• components/：存放可复用的 Vue 组件。
• views/：存放页面级组件。
• store/（如果使用 Vuex）：存放状态管理逻辑。
• router/：配置路由。

核心功能开发

开发待办应用的核心功能，包括任务添加、删除、完成状态切换。在 src/components/ 下创建 TodoList.vue 和 TodoItem.vue 组件。

<!-- TodoList.vue -->
<template>
  <div>
    <input v-model="newTask" @keyup.enter="addTask" placeholder="Add a new task">
    <ul>
      <TodoItem v-for="task in tasks" :key="task.id" :task="task" @remove="removeTask" @toggle="toggleTask" />
    </ul>
  </div>
</template>

<script>
import TodoItem from './TodoItem.vue';
export default {
  components: { TodoItem },
  data() {
    return {
      newTask: '',
      tasks: []
    };
  },
  methods: {
    addTask() {
      if (this.newTask.trim()) {
        this.tasks.push({ id: Date.now(), text: this.newTask, completed: false });
        this.newTask = '';
      }
    },
    removeTask(id) {
      this.tasks = this.tasks.filter(task => task.id !== id);
    },
    toggleTask(id) {
      const task = this.tasks.find(task => task.id === id);
      if (task) task.completed = !task.completed;
    }
  }
};
</script>

状态管理（可选）

如果需要全局状态管理，配置 Vuex。在 src/store/ 下创建 index.js 和 modules/todos.js。

// store/modules/todos.js
export default {
  state: {
    tasks: []
  },
  mutations: {
    ADD_TASK(state, task) {
      state.tasks.push(task);
    },
    REMOVE_TASK(state, id) {
      state.tasks = state.tasks.filter(task => task.id !== id);
    },
    TOGGLE_TASK(state, id) {
      const task = state.tasks.find(task => task.id === id);
      if (task) task.completed = !task.completed;
    }
  },
  actions: {
    addTask({ commit }, task) {
      commit('ADD_TASK', task);
    },
    removeTask({ commit }, id) {
      commit('REMOVE_TASK', id);
    },
    toggleTask({ commit }, id) {
      commit('TOGGLE_TASK', id);
    }
  }
};

路由配置

在 src/router/ 下配置路由。如果应用需要多页面，创建 routes.js 并在 index.js 中导入。

// src/router/index.js
import { createRouter, createWebHistory } from 'vue-router';
import TodoList from '../views/TodoList.vue';

const routes = [
  { path: '/', component: TodoList }
];

const router = createRouter({
  history: createWebHistory(),
  routes
});

export default router;

样式与优化

添加 CSS 或使用 UI 库（如 Element Plus 或 Vuetify）美化界面。在 src/assets/ 下创建全局样式文件或在组件内使用 <style scoped>。

/* src/assets/styles.css */
ul {
  list-style: none;
  padding: 0;
}
li {
  padding: 8px;
  border-bottom: 1px solid #eee;
}
.completed {
  text-decoration: line-through;
  color: #888;
}

测试与调试

运行开发服务器测试功能：

npm run dev

使用 Vue Devtools 检查状态和组件层次结构。

构建与部署

构建生产版本并部署到静态托管服务（如 Vercel、Netlify 或 GitHub Pages）：

npm run build

将生成的 dist 文件夹上传到托管平台，或通过 CI/CD 工具自动化部署流程。

持续集成（可选）

配置 GitHub Actions 或类似工具实现自动化测试和部署。在项目根目录创建 .github/workflows/deploy.yml 文件：

name: Deploy
on: push
jobs:
  deploy:
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v2
      - run: npm install
      - run: npm run build
      - uses: peaceiris/actions-gh-pages@v3
        with:
          github_token: ${{ secrets.GITHUB_TOKEN }}
          publish_dir: ./dist