随着 AI 编程工具的成熟，开发者可借助 GitHub Copilot、Tabnine 等插件快速生成模板和业务代码，大幅提升开发效率。本文记录了我使用 GitHub Copilot 在 30 分钟内搭建一套基于 Vue3 的 ToDo 小型系统的全过程，并分享项目架构、流程图、组件职责表以及核心代码。希望能为大家理解 AI 辅助开发带来实战参考。

1. 项目需求分析

• 功能：增删改查 ToDo 列表项
• 技术栈：Vue3 + Composition API + Pinia（可选）+ Vite
• 目标：演示 AI 助手如何生成项目脚手架、组件及业务逻辑

1. 使用 Copilot 快速搭建

3.1 环境准备

• VS Code + GitHub Copilot 插件
• Node.js >= 16
• 全局安装 Vite：npm install -g create-vite

3.2 项目初始化
在终端运行：

create-vite todo-app --template vue
cd todo-app
npm install
code .

此时在 VS Code 中，Copilot 会根据 template vue 自动建议优化配置，如引入 ESLint、Prettier 等。

3.3 关键组件生成
在 src/components 目录下新建 TodoList.vue、TodoItem.vue：

• Copilot 提示如何使用 defineProps、defineEmits
• 自动补全响应式状态管理（可接入 Pinia）
• 辅助生成增删改查函数签名

1. 系统架构与流程

4.1 组件职责表

4.2 核心流程图（ASCII 演示）
用户操作 → 组件事件触发 → Pinia 更新状态 → Vue 响应式渲染

+--------+      click       +-----------+      commit      +--------+
|  User  | ------------->   | TodoList  | ---------------> | Store  |
+--------+                  +-----------+                  +--------+
                                                         |
                                                         v
                                                     +--------+
                                                     | re-render
                                                     +--------+

1. 核心代码展示

5.1 src/main.js

import { createApp } from 'vue'
import { createPinia } from 'pinia'
import App from './App.vue'

const app = createApp(App)
app.use(createPinia())
app.mount('#app')

5.2 src/store/todo.js

import { defineStore } from 'pinia'

export const useTodoStore = defineStore('todo', {
  state: () => ({
    list: []
  }),
  actions: {
    addTodo(item) {
      this.list.push({ id: Date.now(), text: item, done: false })
    },
    removeTodo(id) {
      this.list = this.list.filter(i => i.id !== id)
    },
    toggleTodo(id) {
      const target = this.list.find(i => i.id === id)
      if (target) target.done = !target.done
    }
  }
})

5.3 src/components/TodoList.vue

<template>
  <div class="todo-list">
    <h2>ToDo List</h2>
    <input v-model="inputText" @keyup.enter="onAdd" placeholder="新增待办项" />
    <ul>
      <TodoItem
        v-for="item in todos"
        :key="item.id"
        :item="item"
        @remove="onRemove"
        @toggle="onToggle"
      />
    </ul>
  </div>
</template>

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

const store = useTodoStore()
const inputText = ref('')

const todos = store.list
const onAdd = () => {
  if (inputText.value.trim()) {
    store.addTodo(inputText.value.trim())
    inputText.value = ''
  }
}
const onRemove = (id) => store.removeTodo(id)
const onToggle = (id) => store.toggleTodo(id)
</script>

<style scoped>
.todo-list { max-width: 400px; margin: auto; }
input { width: 100%; padding: 8px; margin-bottom: 10px; }
</style>

5.4 src/components/TodoItem.vue

<template>
  <li :class="{ done: item.done }">
    <span @click="$emit('toggle', item.id)">{{ item.text }}</span>
    <button @click="$emit('remove', item.id)">✖</button>
  </li>
</template>

<script setup>
defineProps({ item: Object })
defineEmits(['remove', 'toggle'])
</script>

<style scoped>
li { display: flex; justify-content: space-between; padding: 6px 0; }
.done span { text-decoration: line-through; color: #aaa; }
button { background: none; border: none; cursor: pointer; }
</style>

1. 使用体验与优化

• Copilot 自动补全大部分模板代码，手动微调样式与事件绑定
• 如需后端持久化，可新增 Node.js + Fastify/Express 接口，Copilot 同样可生成初步代码
• 可集成单元测试（Vitest），AI 辅助生成测试用例

1. 总结
   通过 AI 编程助手，我们在极短时间内完成了项目脚手架、核心业务组件和状态管理。实践证明，AI 辅助开发非常适合快速原型和模板生成；而在关键业务逻辑、复杂算法处仍需开发者深度思考、精细打磨。希望这篇实战对大家体验 AI 编程工具有所帮助，欢迎交流探讨。