必须跳过脚手架默认配置陷阱，按企业级Agent应用特性组织目录、集成核心模块、规避TS类型冲突和Pinia状态流断裂；初始化时关闭测试选项，勾选TypeScript等必要工具，立即安装依赖，删除HelloWorld.vue，建立agents/hooks/types等专用目录，用fetch封装MiniMax API，通过工厂函数或Pinia store管理Agent实例，自定义hook处理SSE流式响应，并配置路由守卫控制会话生命周期。
☞☞☞AI 智能聊天, 问答助手, AI 智能搜索, 多模态理解力帮你轻松跨越从0到1的创作门槛☜☜☜
要为MiniMax Agent Coding Plan快速搭建一个结构清晰、可扩展的Vue项目，必须跳过脚手架默认配置陷阱，直接按企业级Agent应用特性组织目录、集成核心能力模块、规避TypeScript类型冲突和Pinia状态流断裂风险。
初始化项目并锁定技术栈
执行 npm create vue@latest，在交互式选项中【必须关闭Unit Testing和End-to-End Testing】，否则后续接入MiniMax SDK时会因Jest不兼容ESM模块报错；勾选TypeScript、Vue Router、Pinia、ESLint、Prettier；语言选择TypeScript，框架选Vue 3。
进入项目目录后立即运行 npm install，不要跳过这步——Vite 5.4+与Pinia 2.2+存在依赖解析竞态，未安装即改配置会导致后续store无法注入。
删除 src/components/HelloWorld.vue，这个示例组件的响应式逻辑会干扰Agent消息流的watchEffect监听链。
立即学习“前端免费学习笔记（深入）”；
配置Agent专用目录结构
在 src/ 下新建以下目录：agents/（存放MiniMax Agent实例封装）、hooks/（封装useAgent、useStream等组合式函数）、types/（定义MiniMax API响应类型，如AgentResponse、StreamingChunk）。
将原 src/views/ 重命名为 src/pages/，因为Agent交互页面需与普通路由页隔离——pages/ 仅承载顶层路由组件，所有Agent逻辑下沉至 agents/ 和 hooks/。
在 src/services/ 中创建 minimax.ts，用 fetch 封装MiniMax API调用，禁用Axios——其默认JSON解析会破坏Server-Sent Events（SSE）流式响应的chunk边界。
集成MiniMax Agent核心能力
方法一：手动注册Agent实例
在 src/agents/index.ts 中导出默认Agent工厂函数，接收 botId 和 apiKey 参数，返回带 sendMessage() 和 onStream() 方法的对象；【务必在onStream回调中使用AbortController.signal终止旧请求，否则并发调用会触发token超限错误】。
方法二：Pinia store托管Agent状态
创建 src/stores/agentStore.ts，定义 activeSessionId、messageHistory、isStreaming 状态字段；在 sendMessage action中调用 agents/index.ts 的工厂函数，避免在组件内重复实例化Agent对象。
方法三：自定义hook统一处理流式响应
在 src/hooks/useAgentStream.ts 中，接收 agentId 和 input，内部调用 services/minimax.ts 的SSE fetch，用 ref 暴露 streamingText 和 isDone；该hook必须返回 stopStream: () => void 函数，否则用户中断对话时后端仍持续推送chunk。
配置路由守卫控制Agent会话生命周期
第一步：在 src/router/index.ts 中，为所有含Agent功能的路由（如 /chat/:agentId）添加 beforeEnter 守卫。
第二步：守卫函数内调用 agentStore().initSession(route.params.agentId as string)，初始化会话ID和历史记录。
第三步：在路由离开前触发 onBeforeRouteLeave，执行 agentStore().clearSession() ——【若跳过此步，用户切换Agent时残留的messageHistory会污染新会话上下文】。
