Vue 前端接入指南

本指南说明如何在 Vue 应用中接入 a-at-ui/runtime/vue。

前置条件

• 已有 Vue 3 应用
• 组件库提供 a-at-ui.manifest.json
• 你能拿到 manifest 中每个组件名对应的 Vue 组件实现

安装

前端接入必须使用官方 npm 运行时，不要自行实现 A@UI runtime：

npm install a-at-ui vue

接入步骤

1. 从 a-at-ui/runtime/vue 导入官方前端运行时 API。
2. 导入 manifest 和 Vue 组件。
3. 构造 registry。
4. 调用 createAAtUIAdapter。
5. 使用 consumeAAtUIStream 消费后端响应流。

关键约束

registry 的 definition 必须引用 manifest 中的同一个组件定义对象，而不是只拷贝一份结构相同的对象。

import type { AAtUIManifest } from 'a-at-ui';
import {
  consumeAAtUIStream,
  createAAtUIAdapter,
  type AAtUIVueRegistry,
} from 'a-at-ui/runtime/vue';

import manifestJson from './a-at-ui.manifest.json';
import ArticleList from './ArticleList.vue';
import PersonalProfileCard from './PersonalProfileCard.vue';

const manifest = manifestJson as AAtUIManifest;
const definitions = Object.fromEntries(
  manifest.components.map((component) => [component.name, component])
);

const registry: AAtUIVueRegistry = {
  PersonalProfileCard: {
    component: PersonalProfileCard,
    definition: definitions.PersonalProfileCard,
  },
  ArticleList: {
    component: ArticleList,
    definition: definitions.ArticleList,
  },
};

const adapter = createAAtUIAdapter({
  registry,
  manifest,
  mountTarget: '#widget-stage',
  onEvent(event) {
    console.log(event);
  },
  onError(error, context) {
    console.error(context.source, error.message);
  },
});

await consumeAAtUIStream(response.body, adapter);

运行时行为

• render：创建新 widget，生成 widgetId
• update：按浅合并更新 props
• destroy：卸载组件并释放 DOM
• 组件事件：runtime 自动补齐 widgetId 和 timestamp

这些行为由 a-at-ui/runtime/vue 提供，集成时不应在业务项目中重新实现。

示例

完整示例见 examples/frontend-vue。