Vue 前端转 Agent 工程师 3 个月学习计划

qq_40746173

17人浏览 · 2026-07-15 18:41:04

qq_40746173 · 2026-07-15 18:41:04 发布

Vue 前端转 Agent 工程师 3 个月学习计划

适用对象：已有 Vue 3 / TypeScript / Vite / 前端工程化经验，希望转向 AI 应用工程师、Agent 工程师、AI 全栈工程师、AI IDE / 开发者工具工程师的前端开发者。
学习周期：12 周。
学习方式：每周一个主题 + 一个可交付项目 + 明确验收标准。
最终目标：完成一个 Mini Claude Code for Vue：能分析 Vue 项目、搜索代码、生成修改计划、展示 Diff、运行 lint/test/build，并根据错误继续修复。

0. 总体学习主线

你不需要一开始就学模型训练、深度学习论文或复杂多 Agent 框架。作为 Vue 前端，最现实的路径是：

Vue AI Chat
  ↓
Tool Calling
  ↓
手写 Agent Loop
  ↓
Vue 项目代码库分析
  ↓
RAG / 上下文工程
  ↓
MCP Server
  ↓
权限、审批、沙箱
  ↓
Mini Claude Code for Vue

你要形成的核心能力是：

前端交互能力
+ Node.js 服务端能力
+ LLM API 调用能力
+ Tool Calling
+ Agent Loop
+ RAG / 代码检索
+ MCP
+ 权限和沙箱
+ 工程化交付

1. 三个月后你应该具备的能力

完成本计划后，你应该能独立实现：

Vue + Node.js 的 AI Chat 应用。
支持 SSE / Stream 的流式响应。
支持模型切换、会话管理、Token / 成本统计。
支持 Function Calling / Tool Calling。
手写一个最小 Agent Loop。
设计 Tool Registry 和工具权限系统。
分析 Vue 项目结构，包括组件、路由、Pinia、API 调用和 Vite 配置。
实现代码库问答和引用来源展示。
编写 TypeScript MCP Server。
实现 Agent 执行轨迹、工具调用卡片、审批弹窗和 Diff Viewer。
让 Agent 修改 Vue 项目文件，并运行 lint/test/build 进行验证。
产出一个可展示、可写进简历的作品集项目。

2. 推荐技术栈

前端

Vue 3
TypeScript
Vite
Pinia
Vue Router
UnoCSS / Tailwind CSS
Markdown 渲染库
代码高亮库
Diff Viewer 组件

后端

Node.js
TypeScript
Hono / Fastify / NestJS 三选一
Zod
SSE / WebSocket
SQLite / PostgreSQL
Redis，可选
BullMQ，可选

AI / Agent

Vercel AI SDK
OpenAI / Anthropic / DeepSeek / Qwen 兼容 API
Tool Calling
Structured Output
MCP TypeScript SDK
Embedding / RAG
LangGraph，进阶

工程工具

pnpm workspace
ESLint
Prettier
Vitest
Playwright，可选
Docker，可选
GitHub Actions，可选

3. 每周学习计划

第 1 周：LLM 应用基础与 Vue AI Chat

学习目标

本周目标是做出第一个 AI Chat，而不是研究 Agent。你需要理解模型 API、消息结构、流式输出和前后端分层。

需要掌握：

System / User / Assistant 消息
多轮对话
流式输出
API Key 不暴露到浏览器
Markdown 渲染
错误处理
停止生成
重新生成

本周项目：Vue AI Chat

实现一个基本 AI 聊天应用。

功能要求

- 用户可以输入问题
- 服务端调用模型 API
- 前端流式显示回答
- 支持 Markdown 渲染
- 支持代码块高亮
- 支持停止生成
- 支持重新生成上一条回答
- 支持清空会话
- API Key 只保存在服务端环境变量中

验收标准

完成后你应该能演示：

1. 打开页面后可以正常提问。
2. 回答不是一次性返回，而是逐字或分块流式出现。
3. 代码块能正确渲染。
4. 点击“停止”后请求会被中断。
5. 刷新页面后不会暴露任何模型 API Key。
6. 服务端日志可以看到一次完整请求。

建议产出

README.md
架构图
关键截图
一次演示 GIF

第 2 周：会话管理、模型切换与成本意识

学习目标

本周目标是让 AI Chat 更像真实产品。你需要处理会话、上下文、模型切换和成本统计。

需要掌握：

消息持久化
会话列表
上下文窗口
Token 估算
模型切换
失败重试
请求超时
错误展示

本周项目：AI Chat Studio

在第 1 周项目基础上升级成 Chat Studio。

功能要求

- 左侧展示会话列表
- 支持新建、重命名、删除会话
- 消息持久化到数据库
- 支持模型切换
- 显示当前模型
- 显示估算 Token 数
- 显示请求耗时
- 支持错误重试
- 支持系统 Prompt 配置

验收标准

完成后你应该能演示：

1. 创建多个会话并在它们之间切换。
2. 刷新页面后会话仍然存在。
3. 切换不同模型后，后端调用对应模型。
4. 每次回答后显示耗时和 Token 估算。
5. 模型请求失败时，前端出现可理解的错误提示。
6. 可以编辑系统 Prompt 并影响回答风格。

建议产出

数据库表结构说明
模型 Provider 配置说明
会话管理截图

第 3 周：Structured Output 与 Tool Calling 入门

学习目标

本周开始从“聊天应用”进入“Agent 应用”。核心是让模型不只返回文本，而是根据需要调用工具。

需要掌握：

JSON Schema
Zod 参数校验
Tool Definition
Tool Call
Tool Result
工具错误处理
工具超时
工具执行日志

本周项目：带工具调用的个人助手

实现一个低风险工具调用系统。

工具列表

getCurrentTime
calculateExpression
createTodo
listTodos
searchLocalNotes
readPublicDocument

功能要求

- 后端注册工具
- 工具入参使用 Zod 校验
- 前端显示工具调用卡片
- 工具执行成功后显示结果
- 工具执行失败后显示错误原因
- 支持同一轮回答调用多个工具

验收标准

完成后你应该能演示：

1. 问“现在几点”，模型会调用 getCurrentTime。
2. 问“帮我计算 23 * 47”，模型会调用 calculateExpression。
3. 让它创建待办事项，数据库会新增待办。
4. 前端能看到工具调用名称、参数、状态和结果。
5. 非法参数不会进入工具函数，而是被 Zod 拦截。
6. 工具失败后，模型能基于错误继续回答。

建议产出

Tool Registry 设计文档
工具调用截图
Zod Schema 示例

第 4 周：手写最小 Agent Loop

学习目标

本周你要真正理解 Agent 的本质：循环、观察、继续行动。

Agent 的核心流程是：

用户目标
  ↓
模型决定下一步
  ↓
调用工具
  ↓
执行工具
  ↓
观察结果
  ↓
继续决策
  ↓
直到完成

需要掌握：

Agent Loop
最大步数
最大耗时
最大成本
工具执行队列
中止任务
消息历史
任务状态机

本周项目：Minimal Agent Runtime in TypeScript

不要急着使用成熟框架，本周目标是自己写一个最小 Agent Runtime。

功能要求

- Agent 接收一个用户目标
- 自动循环调用模型
- 模型可以选择工具
- 工具结果回传模型
- 没有工具调用时输出最终回答
- 支持最大执行步数
- 支持超时取消
- 支持执行事件流
- 支持保存每一步轨迹

参考伪代码

async function runAgent(input: string) {
  const messages = createInitialMessages(input)

  for (let step = 0; step < maxSteps; step++) {
    const response = await callModel({ messages, tools })
    messages.push(response.message)

    if (!response.toolCalls?.length) {
      return response.message.content
    }

    for (const toolCall of response.toolCalls) {
      const result = await executeToolSafely(toolCall)
      messages.push(createToolResultMessage(toolCall.id, result))
    }
  }

  throw new Error('Agent exceeded max steps')
}

验收标准

完成后你应该能演示：

1. Agent 能连续执行至少 3 步工具调用。
2. 前端能看到 Step 1、Step 2、Step 3 的执行轨迹。
3. 超过最大步数后会安全停止。
4. 点击取消后，当前任务会被终止。
5. 每次工具调用都有日志记录。
6. 最终结果可以追溯到完整执行轨迹。

建议产出

Agent Runtime 类图
Agent Event 类型定义
一次完整执行轨迹 JSON

第 5 周：Node.js 文件系统工具与只读代码分析

学习目标

本周开始做面向前端项目的 Agent。先只读，不要让 Agent 改代码。

需要掌握：

fs/promises
path 安全
工作目录限制
文件读取
目录遍历
代码搜索
忽略 node_modules / dist
输出长度限制

本周项目：Vue Project Readonly Agent

让 Agent 能读取和分析一个 Vue 项目。

工具列表

listProjectFiles
readFile
searchCode
readPackageJson
readViteConfig
getProjectTree

功能要求

- 用户选择或配置一个本地 Vue 项目路径
- Agent 只能访问该项目目录
- 默认忽略 node_modules、dist、.git
- 文件读取有大小限制
- 搜索结果有数量限制
- 前端展示 Agent 调用了哪些文件工具

验收标准

完成后你应该能演示：

1. 问“这个项目用了哪些主要依赖”，Agent 能读取 package.json 回答。
2. 问“项目入口在哪里”，Agent 能搜索 main.ts / main.js。
3. 问“有哪些页面路由”，Agent 能读取 router 文件。
4. Agent 不能读取项目目录之外的文件。
5. 读取超大文件时会被截断或拒绝。
6. 所有文件访问都有审计日志。

建议产出

只读工具清单
安全访问策略说明
项目分析截图

第 6 周：Vue SFC、Router、Pinia 与组件依赖分析

学习目标

本周要把你的前端优势发挥出来：让 Agent 真正懂 Vue 项目，而不是只会全文搜索。

需要掌握：

.vue SFC 解析
script setup 分析
template 分析
组件 import 关系
Vue Router 路由树
Pinia Store 定义和使用
API 调用定位

本周项目：Vue Code Analyzer

实现一个 Vue 项目分析模块。

功能要求

- 解析 .vue 文件
- 提取组件名称
- 提取 props / emits
- 提取 import 依赖
- 提取路由配置
- 提取 Pinia Store
- 定位常见 API 请求
- 生成组件依赖图数据

验收标准

完成后你应该能演示：

1. 输入一个组件名，返回它所在文件。
2. 输入一个页面路由，返回对应页面组件。
3. 输入一个 Store 名，返回定义位置和使用位置。
4. 输入一个 API URL 关键词，返回调用位置。
5. 生成项目组件依赖 JSON。
6. Agent 回答问题时可以引用这些结构化分析结果。

建议产出

Vue Analyzer API 文档
组件依赖图 JSON
Router 分析结果截图
Pinia 分析结果截图

第 7 周：RAG 与代码库问答

学习目标

本周目标是实现“代码库问答”。注意：代码 Agent 的 RAG 不只是向量数据库，关键词检索、路径匹配和结构化索引同样重要。

需要掌握：

Chunking
Embedding
向量检索
关键词检索
混合检索
Rerank
引用来源
上下文预算
Prompt Injection 防护

本周项目：Vue Codebase QA

实现一个能回答 Vue 项目问题的代码库问答系统。

功能要求

- 索引 Vue 项目文件
- 支持关键词检索
- 支持向量检索
- 支持混合检索
- 回答时展示引用来源
- 支持点击引用打开文件位置
- 支持重新索引

验收标准

完成后你应该能演示：

1. 问“登录态保存在哪里”，能定位 Store 或 localStorage 相关代码。
2. 问“用户列表接口在哪里调用”，能定位 API 调用文件。
3. 问“这个页面依赖哪些组件”，能结合结构化分析回答。
4. 每个回答都有引用来源。
5. 引用来源可以点击跳转到文件路径和行号。
6. 修改项目文件后，可以重新索引并得到新结果。

建议产出

RAG 流程图
索引结构说明
检索结果截图
引用来源截图

第 8 周：Agent UI 与执行过程可视化

学习目标

Agent 产品不能只是聊天框。用户需要知道 Agent 正在做什么、是否安全、是否需要审批、哪里失败了。

需要掌握：

Agent Timeline
Tool Call Card
状态机 UI
任务取消
任务重试
执行日志
Artifact Preview
Diff Viewer

本周项目：Agent Workbench UI

为你的 Agent 做一个正式工作台。

功能要求

- 左侧展示任务步骤
- 中间展示对话和结果
- 右侧展示工具调用详情
- 工具调用有 pending / running / success / failed 状态
- 支持展开查看工具参数和输出
- 支持取消任务
- 支持失败重试
- 支持显示引用文件

验收标准

完成后你应该能演示：

1. Agent 执行时 Timeline 实时更新。
2. 每次工具调用都有独立卡片。
3. 工具失败时卡片显示错误原因。
4. 用户可以取消长任务。
5. Agent 最终回答可以关联到执行步骤。
6. UI 不展示冗长且不可验证的内部推理，而展示可验证的行动摘要。

建议产出

Agent UI 截图
交互流程图
组件清单

第 9 周：MCP TypeScript Server

学习目标

本周学习 MCP。MCP 可以让你把 Vue 项目分析能力以标准协议暴露给 Claude Code、Cline、Cursor、OpenCode 或你自己的 Agent。

需要掌握：

MCP Server
MCP Client
Tools
Resources
Prompts
stdio transport
HTTP transport
工具权限
工具命名

本周项目：Vue Project MCP Server

用 TypeScript 写一个 MCP Server。

工具列表

get_project_tree
get_component_list
find_component_usage
get_route_tree
get_pinia_stores
find_api_usage
analyze_vite_config

Resources 示例

vue-project://routes
vue-project://components
vue-project://stores
vue-project://dependencies

Prompts 示例

analyze_vue_feature
review_vue_component
find_frontend_performance_issue

验收标准

完成后你应该能演示：

1. MCP Server 可以通过 stdio 启动。
2. MCP Client 可以列出工具。
3. 工具输入使用 Zod 校验。
4. Cline 或 Claude Code 可以连接你的 MCP Server。
5. 外部 Agent 可以调用 get_route_tree 获取路由树。
6. 外部 Agent 可以调用 find_component_usage 查询组件使用位置。

建议产出

MCP Server README
.mcp.json 示例
工具接口说明
外部 Agent 调用截图

第 10 周：写文件、Diff、审批与权限系统

学习目标

本周开始允许 Agent 修改代码，但必须有审批和回滚机制。

需要掌握：

文件写入
Patch 应用
Diff 生成
用户审批
权限分级
Git 分支隔离
审计日志
失败回滚

本周项目：Safe Code Editing Agent

让 Agent 可以提出修改，但不能静默写入生产代码。

权限分级

Level 0：只回答，不调用工具
Level 1：只读项目文件
Level 2：生成修改建议和 Diff
Level 3：用户审批后写入文件
Level 4：用户审批后执行命令
Level 5：禁止默认开放，例如删除文件、推送远程、发布生产

功能要求

- Agent 生成修改计划
- Agent 生成文件修改 Diff
- 前端展示 Diff
- 用户点击批准后才写入文件
- 写入前自动创建 Git 分支或备份
- 支持拒绝修改
- 支持回滚修改

验收标准

完成后你应该能演示：

1. 用户提出“给这个组件增加 loading 状态”。
2. Agent 搜索相关文件并生成修改计划。
3. Agent 生成 Diff，但不会自动写入。
4. 用户批准后，文件才被修改。
5. 用户拒绝后，文件不变。
6. 修改后可以查看 Git diff。
7. 点击回滚后可以恢复原始文件。

建议产出

权限模型文档
Diff 审批截图
回滚演示 GIF

第 11 周：Shell 执行、Lint/Test/Build 与自动修复

学习目标

本周让 Agent 具备 Coding Agent 的关键能力：运行命令，根据错误继续修复。

需要掌握：

child_process
命令白名单
命令超时
输出截断
工作目录限制
环境变量过滤
npm scripts
lint/test/build 错误分析
自动迭代修复

本周项目：Vue Build Fix Agent

让 Agent 可以运行安全命令，并根据结果继续行动。

允许命令示例

npm run lint
npm run test
npm run build
pnpm lint
pnpm test
pnpm build

禁止命令示例

rm -rf /
curl unknown-script | sh
ssh ...
scp ...
git push
npm publish
修改系统目录的命令

功能要求

- Agent 修改代码后请求运行 lint/test/build
- 用户审批后执行命令
- 命令输出实时显示到前端
- 输出过长时自动截断和摘要
- Agent 读取错误后继续修复
- 最多自动修复 N 轮

验收标准

完成后你应该能演示：

1. Agent 修改 Vue 文件后运行 lint。
2. lint 失败时，Agent 能读取错误并继续修改。
3. test 失败时，Agent 能定位失败原因。
4. build 成功后，Agent 输出最终报告。
5. 高风险命令会被拒绝或要求强制审批。
6. 所有命令都有日志，包括命令、目录、耗时、退出码和输出摘要。

建议产出

命令权限规则
执行日志样例
自动修复前后对比

第 12 周：整合最终项目 Mini Claude Code for Vue

学习目标

本周把前三个月的内容整合为一个完整作品集项目。

最终项目名称建议：

Mini Claude Code for Vue

或者：

Vue Agent DevTools

最终项目功能

- 选择本地 Vue 项目
- 分析项目结构
- 支持代码库问答
- 支持生成修改计划
- 支持工具调用 Timeline
- 支持读取文件和搜索代码
- 支持生成 Diff
- 支持用户审批
- 支持写入文件
- 支持运行 lint/test/build
- 支持根据错误自动修复
- 支持任务取消
- 支持会话保存
- 支持执行轨迹回放
- 支持 MCP Server 模式

最终验收标准

你需要准备一个 5～10 分钟演示，覆盖以下场景：

场景 1：代码库问答
用户问：“登录页面的数据从哪里来？”
Agent 搜索代码、读取文件、引用来源并回答。

场景 2：小功能修改
用户说：“给 UserList 页面增加 loading 和 error 状态。”
Agent 生成计划、搜索文件、生成 Diff、等待审批、写入文件。

场景 3：验证和修复
用户批准运行 npm run lint / build。
如果失败，Agent 根据错误继续修复。
如果成功，Agent 生成最终报告。

场景 4：MCP 接入
使用 Claude Code / Cline / 自己的 MCP Client 调用 Vue Project MCP Server。

README 必须包含

项目背景
解决的问题
技术架构
核心功能
本地启动方式
环境变量说明
安全设计
权限模型
MCP 使用方式
演示视频或 GIF
未来计划

简历描述示例

独立开发 Vue Agent DevTools，一个面向 Vue 项目的 AI Coding Agent。项目基于 Vue 3、TypeScript、Node.js、Vercel AI SDK 和 MCP TypeScript SDK，实现了代码库问答、Vue SFC 分析、组件依赖分析、Tool Calling、Agent Loop、Diff 审批、lint/build 自动修复和 MCP Server 接入。该项目支持只读分析、用户审批后写入文件、命令白名单和执行轨迹回放，可模拟 Claude Code 在前端项目中的核心工作流。

4. 每周时间安排建议

如果你是边工作边学习，可以按照下面节奏：

周一到周三：学习资源和做笔记
周四到周五：编码实现核心功能
周六：补齐边界情况、测试和截图
周日：写 README、总结和复盘

每天建议投入：

工作日：1.5～2 小时
周末：4～6 小时
每周合计：12～18 小时

5. 每个阶段的评价标准

入门完成标准

你能独立完成：

Vue AI Chat
流式输出
多轮会话
模型切换
Markdown 渲染

Agent 基础完成标准

你能独立完成：

Tool Calling
Tool Registry
Zod 参数校验
Agent Loop
执行轨迹
任务取消

代码 Agent 完成标准

你能独立完成：

项目文件读取
代码搜索
Vue SFC 分析
代码库问答
Diff 生成
用户审批
写文件
运行 lint/test/build
自动修复

转型作品集完成标准

你有一个可以公开展示的项目，包含：

GitHub 仓库
README
架构图
演示 GIF 或视频
核心代码说明
安全设计说明
MCP 使用说明

6. 重点源码阅读顺序

不建议你一开始就读很大的项目。推荐顺序是：

1. vercel/ai
   学 AI Web 应用、流式输出、工具调用。

2. modelcontextprotocol/typescript-sdk
   学 MCP Server / Client。

3. SWE-agent/mini-swe-agent
   学最小 Coding Agent Loop。

4. Aider-AI/aider
   学代码编辑、Git diff、上下文选择。

5. cline/cline
   学 IDE Agent、MCP、审批和工具调用 UI。

6. OpenHands/OpenHands
   学完整软件工程 Agent、沙箱、事件系统和云端运行。

阅读源码时，不要从目录结构开始硬读，而是沿着一次请求追踪：

用户输入在哪里进入？
消息在哪里组装？
模型在哪里调用？
工具在哪里定义？
工具调用如何解析？
工具结果如何回传？
文件如何修改？
权限如何审批？
执行轨迹如何保存？
任务如何结束？

7. 常见误区

误区 1：一开始就学模型训练

你当前目标是 Agent 工程，不是算法研究。前 3 个月不需要训练模型。

误区 2：只学 Prompt

Prompt 很重要，但壁垒不够高。你要把 Prompt、Tool Calling、Runtime、RAG、MCP 和 UI 工程结合起来。

误区 3：直接上复杂框架

一开始用太重的框架，会看不清 Agent 的本质。建议先手写最小 Agent Loop，再学习 LangGraph 等框架。

误区 4：过早开放 Shell 权限

Agent 能执行命令后风险会显著增加。必须先做只读，再做 Diff，再做审批，再做执行。

误区 5：Agent UI 只做成聊天框

Agent 产品需要 Timeline、Tool Call Card、Approval、Diff、Log、Cost、Cancel、Retry 等工程化交互。

8. 面试准备方向

如果你用这个项目找 AI 应用 / Agent 方向岗位，重点准备下面这些问题：

1. 什么是 Agent Loop？
2. Tool Calling 和普通函数调用有什么区别？
3. 如何防止 Agent 执行危险命令？
4. 如何做代码库问答？
5. 为什么代码 Agent 不能只依赖向量检索？
6. MCP 解决了什么问题？
7. 如何设计 Agent 的权限系统？
8. 如何展示 Agent 的执行过程？
9. 如何评估 Agent 是否完成任务？
10. 如何控制 Token 成本和上下文长度？
11. 如何处理工具调用失败？
12. 如何让 Agent 修改代码但保持可审查和可回滚？

9. 最终成果检查清单

完成三个月学习后，请检查你是否拥有：

[ ] 一个 Vue AI Chat 项目
[ ] 一个 Tool Calling Demo
[ ] 一个 TypeScript Agent Runtime
[ ] 一个 Vue Project Analyzer
[ ] 一个 Vue Codebase QA
[ ] 一个 Vue Project MCP Server
[ ] 一个 Safe Code Editing Agent
[ ] 一个 Vue Build Fix Agent
[ ] 一个整合后的 Mini Claude Code for Vue
[ ] 一份完整 README
[ ] 一张架构图
[ ] 一个 5～10 分钟演示视频或 GIF
[ ] 一套可用于面试讲解的技术总结

10. 推荐资源清单

官方文档

Vercel AI SDK
https://vercel.com/docs/ai-sdk

Model Context Protocol
https://modelcontextprotocol.io/docs

MCP TypeScript SDK
https://github.com/modelcontextprotocol/typescript-sdk

OpenAI Agents SDK
https://openai.github.io/openai-agents-python/

LangGraph
https://docs.langchain.com/

Claude Code MCP Docs
https://code.claude.com/docs/

源码项目

vercel/ai
https://github.com/vercel/ai

modelcontextprotocol/typescript-sdk
https://github.com/modelcontextprotocol/typescript-sdk

SWE-agent/mini-swe-agent
https://github.com/SWE-agent/mini-swe-agent

Aider-AI/aider
https://github.com/Aider-AI/aider

cline/cline
https://github.com/cline/cline

OpenHands/OpenHands
https://github.com/OpenHands/OpenHands

11. 最终建议

三个月内不要追求“大而全”的通用 Agent 框架。你最适合做的是：

面向 Vue 项目的垂直 Coding Agent

因为你已经懂：

Vue 组件
前端路由
Pinia 状态管理
Vite 构建
前端工程化
用户体验
代码审查

如果你能把这些前端经验和 Agent 技术结合起来，你的定位会非常清晰：

懂前端工程场景的 Agent 应用工程师

或者：

AI IDE / 开发者工具方向的前端全栈工程师

最终目标不是“我学过 AI”，而是你能展示：

我做过一个能真实分析和修改 Vue 项目的 Coding Agent。

这就是转型时最有说服力的作品。

EazyDevelop社区

一站式 AI 云服务平台

更多推荐

HarmonyOS 5.0 ArkUI 性能优化全解析：从渲染底层原理到多端适配实战

在鸿蒙生态规模化落地的当下，应用的流畅度与多端一致性直接决定用户体验。ArkUI 作为 HarmonyOS 应用开发的核心 UI 框架，其性能表现是应用质量的核心指标。HarmonyOS 5.0 针对 ArkUI 新增了增量渲染、细粒度状态监听、跨端自适应组件等多项能力，但多数开发者仍停留在 “功能实现” 层面，未能充分释放框架性能红利。本文结合笔者多年鸿蒙应用开发实战经验，从底层原理到上层实操，

EazyDevelop社区

灵珠亮相非凡峰会：把应用创作权交给10亿普通人

EazyDevelop社区

HarmonyOS 5.0 分布式数据管理全栈实战：从底层原理到多端数据同步方案落地

在鸿蒙全场景智慧生态中，用户往往同时拥有手机、平板、穿戴、PC 等多台设备，数据的跨端实时同步与一致性保障是应用体验的核心痛点。传统的云端同步方案存在时延高、依赖网络、开发成本大等问题，而 HarmonyOS 原生的分布式数据管理能力，可实现近场设备间的端侧直连同步，毫秒级数据流转，且天然支持离线缓存与自动冲突合并。尽管分布式数据能力已推出多个版本，但多数开发者仍停留在基础 API 调用层面，对底

EazyDevelop社区

所有评论(0)

查看更多评论

qq_40746173

@qq_40746173

已为社区贡献1条内容

Vue 前端转 Agent 工程师 3 个月学习计划

qq_40746173

Vue 前端转 Agent 工程师 3 个月学习计划

0. 总体学习主线

1. 三个月后你应该具备的能力

2. 推荐技术栈

前端

后端

AI / Agent

工程工具

3. 每周学习计划

第 1 周：LLM 应用基础与 Vue AI Chat

学习目标

推荐资源

本周项目：Vue AI Chat

功能要求

验收标准

建议产出

第 2 周：会话管理、模型切换与成本意识

学习目标

推荐资源

本周项目：AI Chat Studio

功能要求

验收标准

建议产出

第 3 周：Structured Output 与 Tool Calling 入门

学习目标

推荐资源

本周项目：带工具调用的个人助手

工具列表

功能要求

验收标准

建议产出

第 4 周：手写最小 Agent Loop

学习目标

推荐资源

本周项目：Minimal Agent Runtime in TypeScript

功能要求

参考伪代码

验收标准

建议产出

第 5 周：Node.js 文件系统工具与只读代码分析

学习目标

推荐资源

本周项目：Vue Project Readonly Agent

工具列表

功能要求

验收标准

建议产出

第 6 周：Vue SFC、Router、Pinia 与组件依赖分析

学习目标

推荐资源

本周项目：Vue Code Analyzer

功能要求

验收标准

建议产出

第 7 周：RAG 与代码库问答

学习目标

推荐资源

本周项目：Vue Codebase QA

功能要求

验收标准

建议产出

第 8 周：Agent UI 与执行过程可视化

学习目标

推荐资源

本周项目：Agent Workbench UI

推荐组件

功能要求

验收标准

建议产出

第 9 周：MCP TypeScript Server

学习目标

推荐资源

本周项目：Vue Project MCP Server

工具列表

Resources 示例

Prompts 示例

验收标准

建议产出