[{"data":1,"prerenderedAt":717},["ShallowReactive",2],{"docs-guides\u002Ffrontend-vue-zh":3},{"id":4,"title":5,"body":6,"description":710,"extension":711,"meta":712,"navigation":207,"path":713,"seo":714,"stem":715,"__hash__":716},"docs\u002Fzh\u002Fguides\u002Ffrontend-vue.md","Vue 前端接入指南",{"type":7,"value":8,"toc":702},"minimark",[9,13,22,26,42,45,48,76,79,107,110,117,648,651,683,689,692,698],[10,11,5],"h1",{"id":12},"vue-前端接入指南",[14,15,16,17,21],"p",{},"本指南说明如何在 Vue 应用中接入 ",[18,19,20],"code",{},"a-at-ui\u002Fruntime\u002Fvue","。",[23,24,25],"h2",{"id":25},"前置条件",[27,28,29,33,39],"ul",{},[30,31,32],"li",{},"已有 Vue 3 应用",[30,34,35,36],{},"组件库提供 ",[18,37,38],{},"a-at-ui.manifest.json",[30,40,41],{},"你能拿到 manifest 中每个组件名对应的 Vue 组件实现",[23,43,44],{"id":44},"安装",[14,46,47],{},"前端接入必须使用官方 npm 运行时，不要自行实现 A@UI runtime：",[49,50,55],"pre",{"className":51,"code":52,"language":53,"meta":54,"style":54},"language-bash shiki shiki-themes one-dark-pro","npm install a-at-ui vue\n","bash","",[18,56,57],{"__ignoreMap":54},[58,59,62,66,70,73],"span",{"class":60,"line":61},"line",1,[58,63,65],{"class":64},"sVbv2","npm",[58,67,69],{"class":68},"subq3"," install",[58,71,72],{"class":68}," a-at-ui",[58,74,75],{"class":68}," vue\n",[23,77,78],{"id":78},"接入步骤",[80,81,82,88,91,94,100],"ol",{},[30,83,84,85,87],{},"从 ",[18,86,20],{}," 导入官方前端运行时 API。",[30,89,90],{},"导入 manifest 和 Vue 组件。",[30,92,93],{},"构造 registry。",[30,95,96,97,21],{},"调用 ",[18,98,99],{},"createAAtUIAdapter",[30,101,102,103,106],{},"使用 ",[18,104,105],{},"consumeAAtUIStream"," 消费后端响应流。",[23,108,109],{"id":109},"关键约束",[14,111,112,113,116],{},"registry 的 ",[18,114,115],{},"definition"," 必须引用 manifest 中的同一个组件定义对象，而不是只拷贝一份结构相同的对象。",[49,118,122],{"className":119,"code":120,"language":121,"meta":54,"style":54},"language-ts shiki shiki-themes one-dark-pro","import type { AAtUIManifest } from 'a-at-ui';\nimport {\n  consumeAAtUIStream,\n  createAAtUIAdapter,\n  type AAtUIVueRegistry,\n} from 'a-at-ui\u002Fruntime\u002Fvue';\n\nimport manifestJson from '.\u002Fa-at-ui.manifest.json';\nimport ArticleList from '.\u002FArticleList.vue';\nimport PersonalProfileCard from '.\u002FPersonalProfileCard.vue';\n\nconst manifest = manifestJson as AAtUIManifest;\nconst definitions = Object.fromEntries(\n  manifest.components.map((component) => [component.name, component])\n);\n\nconst registry: AAtUIVueRegistry = {\n  PersonalProfileCard: {\n    component: PersonalProfileCard,\n    definition: definitions.PersonalProfileCard,\n  },\n  ArticleList: {\n    component: ArticleList,\n    definition: definitions.ArticleList,\n  },\n};\n\nconst adapter = createAAtUIAdapter({\n  registry,\n  manifest,\n  mountTarget: '#widget-stage',\n  onEvent(event) {\n    console.log(event);\n  },\n  onError(error, context) {\n    console.error(context.source, error.message);\n  },\n});\n\nawait consumeAAtUIStream(response.body, adapter);\n","ts",[18,123,124,153,161,170,178,189,202,209,225,240,255,260,284,306,353,359,364,382,391,404,421,427,435,447,462,467,473,478,494,502,509,522,537,554,559,577,606,611,617,622],{"__ignoreMap":54},[58,125,126,130,133,137,141,144,147,150],{"class":60,"line":61},[58,127,129],{"class":128},"seHd6","import",[58,131,132],{"class":128}," type",[58,134,136],{"class":135},"sn6KH"," { ",[58,138,140],{"class":139},"sVyAn","AAtUIManifest",[58,142,143],{"class":135}," } ",[58,145,146],{"class":128},"from",[58,148,149],{"class":68}," 'a-at-ui'",[58,151,152],{"class":135},";\n",[58,154,156,158],{"class":60,"line":155},2,[58,157,129],{"class":128},[58,159,160],{"class":135}," {\n",[58,162,164,167],{"class":60,"line":163},3,[58,165,166],{"class":139},"  consumeAAtUIStream",[58,168,169],{"class":135},",\n",[58,171,173,176],{"class":60,"line":172},4,[58,174,175],{"class":139},"  createAAtUIAdapter",[58,177,169],{"class":135},[58,179,181,184,187],{"class":60,"line":180},5,[58,182,183],{"class":128},"  type",[58,185,186],{"class":139}," AAtUIVueRegistry",[58,188,169],{"class":135},[58,190,192,195,197,200],{"class":60,"line":191},6,[58,193,194],{"class":135},"} ",[58,196,146],{"class":128},[58,198,199],{"class":68}," 'a-at-ui\u002Fruntime\u002Fvue'",[58,201,152],{"class":135},[58,203,205],{"class":60,"line":204},7,[58,206,208],{"emptyLinePlaceholder":207},true,"\n",[58,210,212,214,217,220,223],{"class":60,"line":211},8,[58,213,129],{"class":128},[58,215,216],{"class":139}," manifestJson",[58,218,219],{"class":128}," from",[58,221,222],{"class":68}," '.\u002Fa-at-ui.manifest.json'",[58,224,152],{"class":135},[58,226,228,230,233,235,238],{"class":60,"line":227},9,[58,229,129],{"class":128},[58,231,232],{"class":139}," ArticleList",[58,234,219],{"class":128},[58,236,237],{"class":68}," '.\u002FArticleList.vue'",[58,239,152],{"class":135},[58,241,243,245,248,250,253],{"class":60,"line":242},10,[58,244,129],{"class":128},[58,246,247],{"class":139}," PersonalProfileCard",[58,249,219],{"class":128},[58,251,252],{"class":68}," '.\u002FPersonalProfileCard.vue'",[58,254,152],{"class":135},[58,256,258],{"class":60,"line":257},11,[58,259,208],{"emptyLinePlaceholder":207},[58,261,263,266,270,274,276,279,282],{"class":60,"line":262},12,[58,264,265],{"class":128},"const",[58,267,269],{"class":268},"sU0A5"," manifest",[58,271,273],{"class":272},"sjrmR"," =",[58,275,216],{"class":139},[58,277,278],{"class":128}," as",[58,280,281],{"class":268}," AAtUIManifest",[58,283,152],{"class":135},[58,285,287,289,292,294,297,300,303],{"class":60,"line":286},13,[58,288,265],{"class":128},[58,290,291],{"class":268}," definitions",[58,293,273],{"class":272},[58,295,296],{"class":268}," Object",[58,298,299],{"class":135},".",[58,301,302],{"class":64},"fromEntries",[58,304,305],{"class":135},"(\n",[58,307,309,312,314,317,319,322,325,329,332,335,338,340,342,345,348,350],{"class":60,"line":308},14,[58,310,311],{"class":268},"  manifest",[58,313,299],{"class":135},[58,315,316],{"class":268},"components",[58,318,299],{"class":135},[58,320,321],{"class":64},"map",[58,323,324],{"class":135},"((",[58,326,328],{"class":327},"s_ZVi","component",[58,330,331],{"class":135},") ",[58,333,334],{"class":128},"=>",[58,336,337],{"class":135}," [",[58,339,328],{"class":268},[58,341,299],{"class":135},[58,343,344],{"class":139},"name",[58,346,347],{"class":135},", ",[58,349,328],{"class":139},[58,351,352],{"class":135},"])\n",[58,354,356],{"class":60,"line":355},15,[58,357,358],{"class":135},");\n",[58,360,362],{"class":60,"line":361},16,[58,363,208],{"emptyLinePlaceholder":207},[58,365,367,369,372,375,378,380],{"class":60,"line":366},17,[58,368,265],{"class":128},[58,370,371],{"class":268}," registry",[58,373,374],{"class":135},": ",[58,376,377],{"class":268},"AAtUIVueRegistry",[58,379,273],{"class":272},[58,381,160],{"class":135},[58,383,385,388],{"class":60,"line":384},18,[58,386,387],{"class":139},"  PersonalProfileCard",[58,389,390],{"class":135},": {\n",[58,392,394,397,399,402],{"class":60,"line":393},19,[58,395,396],{"class":139},"    component",[58,398,374],{"class":135},[58,400,401],{"class":139},"PersonalProfileCard",[58,403,169],{"class":135},[58,405,407,410,412,415,417,419],{"class":60,"line":406},20,[58,408,409],{"class":139},"    definition",[58,411,374],{"class":135},[58,413,414],{"class":268},"definitions",[58,416,299],{"class":135},[58,418,401],{"class":139},[58,420,169],{"class":135},[58,422,424],{"class":60,"line":423},21,[58,425,426],{"class":135},"  },\n",[58,428,430,433],{"class":60,"line":429},22,[58,431,432],{"class":139},"  ArticleList",[58,434,390],{"class":135},[58,436,438,440,442,445],{"class":60,"line":437},23,[58,439,396],{"class":139},[58,441,374],{"class":135},[58,443,444],{"class":139},"ArticleList",[58,446,169],{"class":135},[58,448,450,452,454,456,458,460],{"class":60,"line":449},24,[58,451,409],{"class":139},[58,453,374],{"class":135},[58,455,414],{"class":268},[58,457,299],{"class":135},[58,459,444],{"class":139},[58,461,169],{"class":135},[58,463,465],{"class":60,"line":464},25,[58,466,426],{"class":135},[58,468,470],{"class":60,"line":469},26,[58,471,472],{"class":135},"};\n",[58,474,476],{"class":60,"line":475},27,[58,477,208],{"emptyLinePlaceholder":207},[58,479,481,483,486,488,491],{"class":60,"line":480},28,[58,482,265],{"class":128},[58,484,485],{"class":268}," adapter",[58,487,273],{"class":272},[58,489,490],{"class":64}," createAAtUIAdapter",[58,492,493],{"class":135},"({\n",[58,495,497,500],{"class":60,"line":496},29,[58,498,499],{"class":139},"  registry",[58,501,169],{"class":135},[58,503,505,507],{"class":60,"line":504},30,[58,506,311],{"class":139},[58,508,169],{"class":135},[58,510,512,515,517,520],{"class":60,"line":511},31,[58,513,514],{"class":139},"  mountTarget",[58,516,374],{"class":135},[58,518,519],{"class":68},"'#widget-stage'",[58,521,169],{"class":135},[58,523,525,528,531,534],{"class":60,"line":524},32,[58,526,527],{"class":64},"  onEvent",[58,529,530],{"class":135},"(",[58,532,533],{"class":327},"event",[58,535,536],{"class":135},") {\n",[58,538,540,543,545,548,550,552],{"class":60,"line":539},33,[58,541,542],{"class":268},"    console",[58,544,299],{"class":135},[58,546,547],{"class":64},"log",[58,549,530],{"class":135},[58,551,533],{"class":139},[58,553,358],{"class":135},[58,555,557],{"class":60,"line":556},34,[58,558,426],{"class":135},[58,560,562,565,567,570,572,575],{"class":60,"line":561},35,[58,563,564],{"class":64},"  onError",[58,566,530],{"class":135},[58,568,569],{"class":327},"error",[58,571,347],{"class":135},[58,573,574],{"class":327},"context",[58,576,536],{"class":135},[58,578,580,582,584,586,588,590,592,595,597,599,601,604],{"class":60,"line":579},36,[58,581,542],{"class":268},[58,583,299],{"class":135},[58,585,569],{"class":64},[58,587,530],{"class":135},[58,589,574],{"class":268},[58,591,299],{"class":135},[58,593,594],{"class":139},"source",[58,596,347],{"class":135},[58,598,569],{"class":268},[58,600,299],{"class":135},[58,602,603],{"class":139},"message",[58,605,358],{"class":135},[58,607,609],{"class":60,"line":608},37,[58,610,426],{"class":135},[58,612,614],{"class":60,"line":613},38,[58,615,616],{"class":135},"});\n",[58,618,620],{"class":60,"line":619},39,[58,621,208],{"emptyLinePlaceholder":207},[58,623,625,628,631,633,636,638,641,643,646],{"class":60,"line":624},40,[58,626,627],{"class":128},"await",[58,629,630],{"class":64}," consumeAAtUIStream",[58,632,530],{"class":135},[58,634,635],{"class":268},"response",[58,637,299],{"class":135},[58,639,640],{"class":139},"body",[58,642,347],{"class":135},[58,644,645],{"class":139},"adapter",[58,647,358],{"class":135},[23,649,650],{"id":650},"运行时行为",[27,652,653,662,668,674],{},[30,654,655,658,659],{},[18,656,657],{},"render","：创建新 widget，生成 ",[18,660,661],{},"widgetId",[30,663,664,667],{},[18,665,666],{},"update","：按浅合并更新 props",[30,669,670,673],{},[18,671,672],{},"destroy","：卸载组件并释放 DOM",[30,675,676,677,679,680],{},"组件事件：runtime 自动补齐 ",[18,678,661],{}," 和 ",[18,681,682],{},"timestamp",[14,684,685,686,688],{},"这些行为由 ",[18,687,20],{}," 提供，集成时不应在业务项目中重新实现。",[23,690,691],{"id":691},"示例",[14,693,694,695,21],{},"完整示例见 ",[18,696,697],{},"examples\u002Ffrontend-vue",[699,700,701],"style",{},"html pre.shiki code .sVbv2, html code.shiki .sVbv2{--shiki-default:#61AFEF}html pre.shiki code .subq3, html code.shiki .subq3{--shiki-default:#98C379}html .default .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html .shiki span {color: var(--shiki-default);background: var(--shiki-default-bg);font-style: var(--shiki-default-font-style);font-weight: var(--shiki-default-font-weight);text-decoration: var(--shiki-default-text-decoration);}html pre.shiki code .seHd6, html code.shiki .seHd6{--shiki-default:#C678DD}html pre.shiki code .sn6KH, html code.shiki .sn6KH{--shiki-default:#ABB2BF}html pre.shiki code .sVyAn, html code.shiki .sVyAn{--shiki-default:#E06C75}html pre.shiki code .sU0A5, html code.shiki .sU0A5{--shiki-default:#E5C07B}html pre.shiki code .sjrmR, html code.shiki .sjrmR{--shiki-default:#56B6C2}html pre.shiki code .s_ZVi, html code.shiki .s_ZVi{--shiki-default:#E06C75;--shiki-default-font-style:italic}",{"title":54,"searchDepth":155,"depth":155,"links":703},[704,705,706,707,708,709],{"id":25,"depth":155,"text":25},{"id":44,"depth":155,"text":44},{"id":78,"depth":155,"text":78},{"id":109,"depth":155,"text":109},{"id":650,"depth":155,"text":650},{"id":691,"depth":155,"text":691},"本指南说明如何在 Vue 应用中接入 a-at-ui\u002Fruntime\u002Fvue。","md",{},"\u002Fzh\u002Fguides\u002Ffrontend-vue",{"title":5,"description":710},"zh\u002Fguides\u002Ffrontend-vue","SRW-pwfCwwzw2KeOQezeeYEyzQeaEO6eaD3Sr1dO8ro",1779263316047]