安装 CodeBuddy Code CLI

确保系统已安装 Node.js（建议版本 14+）。通过 npm 或 yarn 全局安装 CodeBuddy Code CLI：

npm install -g @codebuddy/code-cli
# 或
yarn global add @codebuddy/code-cli

初始化 Vue 项目

使用 CLI 创建新项目，选择 Vue 模板并启用组件化配置：

code-cli init vue-todo-app --template vue --componentize
cd vue-todo-app

设计组件结构

在 src/components 目录下创建以下可复用组件：

• TodoInput.vue：处理任务输入
• TodoItem.vue：单个任务项展示与操作
• TodoList.vue：任务列表管理

实现 TodoInput 组件

使用 v-model 实现双向绑定，通过 $emit 提交新任务：

<template>
  <input 
    v-model="newTodo" 
    @keyup.enter="addTodo"
    placeholder="Add a task..."
  />
</template>

<script>
export default {
  data() {
    return { newTodo: '' }
  },
  methods: {
    addTodo() {
      this.$emit('add', this.newTodo.trim())
      this.newTodo = ''
    }
  }
}
</script>

构建 TodoItem 组件

通过 props 接收任务数据，暴露删除和状态切换事件：

<template>
  <li :class="{ completed: todo.done }">
    <input 
      type="checkbox" 
      v-model="todo.done" 
      @change="$emit('toggle', todo.id)"
    />
    <span>{{ todo.text }}</span>
    <button @click="$emit('delete', todo.id)">×</button>
  </li>
</template>

<script>
export default {
  props: ['todo']
}
</script>

<style scoped>
.completed { text-decoration: line-through; }
</style>

集成 TodoList 组件

组合子组件并管理任务状态，使用 provide/inject 实现跨层级通信：

<template>
  <div>
    <TodoInput @add="handleAdd" />
    <ul>
      <TodoItem
        v-for="todo in todos"
        :key="todo.id"
        :todo="todo"
        @delete="handleDelete"
        @toggle="handleToggle"
      />
    </ul>
  </div>
</template>

<script>
import TodoInput from './TodoInput.vue'
import TodoItem from './TodoItem.vue'

export default {
  components: { TodoInput, TodoItem },
  data() {
    return {
      todos: [],
      nextId: 1
    }
  },
  methods: {
    handleAdd(text) {
      this.todos.push({
        id: this.nextId++,
        text,
        done: false
      })
    },
    handleDelete(id) {
      this.todos = this.todos.filter(todo => todo.id !== id)
    },
    handleToggle(id) {
      const todo = this.todos.find(todo => todo.id === id)
      if (todo) todo.done = !todo.done
    }
  }
}
</script>

发布为可复用库

在 package.json 添加组件导出配置：

{
  "name": "vue-todo-components",
  "version": "1.0.0",
  "main": "src/components/index.js",
  "files": ["src/components"]
}

创建 src/components/index.js 统一导出组件：

export { default as TodoInput } from './TodoInput.vue'
export { default as TodoItem } from './TodoItem.vue'
export { default as TodoList } from './TodoList.vue'

测试与构建

运行开发服务器验证功能：

npm run serve

使用 Vue CLI 构建生产版本：

npm run build

发布到 npm

登录 npm 并发布组件库：

npm login
npm publish --access public