Vue 3 学习路径
Pling 的 Vue 3 适配器把现有应用接入页面能力运行时。它不接管组件状态、路由、表单提交或渲染；适配器只注册一套指令和组件，把页面里已有的区域、记录和控件描述给 Agent。业务逻辑仍留在原组件中。
这个边界决定了接入代码的位置：Todo 列表继续由 ref、reactive 或 Pinia 管理，新增和完成仍然调用原来的函数；Pling 只补充页面能力的声明和助手入口。Agent 最终走到与人相同的控件和业务路径。
教程的组织方式
教程按 Vue 3、React、原生 JS / jQuery 和 Vue 2.7 分成独立学习线。你只需要跟着与项目相符的一条，不必先读其他框架的写法。
每条线先从一个完整的 Todo 页面跑通最小闭环，再逐章加入动作参数、记录、区域、流程、状态和确认等能力。业务页尽量保持不变，变化集中在接入声明。代码块会标出本章新增或改动的行；示例按章独立运行，可以边读边对照。
跨框架的共性问题和运维问题集中在「概念」与「运维」章节。需要查完整参数时看「参考」；处理表格、批量操作、上传等具体任务时看「实战方案」；遇到报错或异常现象时看「排障」。主线章节建议按顺序完成，其余部分按需查阅即可。
这条线怎么安排
- 安装与模型配置建立唯一的运行时和助手入口。此时页面还没有开放任何动作。
- Vue 快速上手：一个可用的 Todo Agent补充任务区域、记录、输入、提交和完成操作。
- 后续章节依次处理动作参数、真实控件、记录与变更证据、区域、流程、状态、模型网关、测试和生产控制。
入门阶段保持同一个 Todo 业务页面。页面越稳定，接入本身越清楚：每章改变的是“页面声明了什么”，而不是“页面变成了另一套应用”。
Vue 适配器补了什么
| 需要完成的事 | Vue 3 写法 |
|---|---|
| 共享一个页面运行时 | createPling()，再用 use(pling.plugin) 注册 |
| 描述页面区域 | v-scope |
| 开放一个控件 | v-tool |
| 描述一行或其他记录 | v-record |
| 暴露只读状态 | useAgentState() |
| 挂载问答入口 | <AgentDock> |
声明附着在已有元素和业务函数上，不要求把页面改写成另一套组件。没有声明的按钮仍然不在 Agent 的能力范围内。
适用范围
这条线面向客户端渲染的 Vue 3 应用，完整支持 Vue 3 的 Composition API 与 Options API 项目。Vue 2.7 使用独立适配器和单独的学习线，不把两者混在一起讲。Nuxt 与服务端渲染需要额外处理挂载时机，属于后续章节。
示例使用 Vite，但 Pling 本身不依赖 Vite。换用其他构建工具时，安装和指令用法不变；模型配置需要显式传给 createPling()，不能依赖 VITE_AGENT_* 快捷方式。
下一步阅读 安装与模型配置。