tmagic-editor/docs/assets/guide_advanced_tmagic-ui.md.D6lHMeDC.js

import{aw as e,y as t,z as i,b0 as r}from"./chunks/framework.BCBheFgR.js";const h=JSON.parse('{"title":"@tmagic/ui","description":"","frontmatter":{},"headers":[],"relativePath":"guide/advanced/tmagic-ui.md","filePath":"guide/advanced/tmagic-ui.md"}'),c={name:"guide/advanced/tmagic-ui.md"};function m(n,a,u,l,o,g){return i(),t("div",null,a[0]||(a[0]=[r('<h1 id="tmagic-ui" tabindex="-1">@tmagic/ui <a class="header-anchor" href="#tmagic-ui" aria-label="Permalink to &quot;@tmagic/ui&quot;">​</a></h1><p>在前面<a href="./../advanced/page.html">页面渲染</a>中提到的 UI 渲染器，就是包含在 @tmagic/ui 中的渲染器组件。</p><p>tmagic-editor的设计是希望发布的页面支持多个前端框架，即各个业务方可以根据自己熟悉的语言来开发组件、发布页面。也可以通过 <a href="./../runtime.html">实现一个 runtime</a> 的方式，来实现一个自己的 @tmagic/ui。</p><p>所以tmagic-editor的设计中，针对每个前端框架，都需要有一个对应的 @tmagic/ui 来承担渲染器职责。同时，也需要一个使用和 @tmagic/ui 相同前端框架的 runtime 来 @tmagic/ui 和业务组件的，具体 runtime 概念，可以参考<a href="./../publish.html">页面发布</a>。</p><p>@tmagic/ui 在tmagic-editor设计中，承担的是业务逻辑无关的，基础组件渲染的功能。一切和业务相关的逻辑，都应该在 <a href="./../runtime.html">runtime</a> 中实现。这样 @tmagic/ui 就能保持其通用性。</p><p>我们以项目代码中提供的 vue3 版本的 @tmagic/ui 作为示例介绍其中包含的内容。</p><h2 id="渲染器" tabindex="-1">渲染器 <a class="header-anchor" href="#渲染器" aria-label="Permalink to &quot;渲染器&quot;">​</a></h2><p>在 vue3 中，实现渲染器的具体形式参考<a href="./../advanced/page.html">页面渲染</a>中描述的<a href="./../advanced/page.html#容器渲染">容器渲染</a>和<a href="./../advanced/page.html#容器渲染">组件渲染</a>。</p><h2 id="基础组件" tabindex="-1">基础组件 <a class="header-anchor" href="#基础组件" aria-label="Permalink to &quot;基础组件&quot;">​</a></h2><p>在 @tmagic/ui vue3 中，我们提供了几个基础组件，可以在项目源码中找到对应内容。</p><ul><li>page tmagic-editor的页面基础</li><li>container tmagic-editor的容器渲染器</li><li>Component.vue tmagic-editor的组件渲染器</li><li>button/text 基础组件示例</li></ul><p>其中 page/container/Component 是 UI 的基础，是每个框架的 UI 都应该实现的。</p><p>button/text 其实就是一个组件开发的示例，具体组件开发相关规范可以参考<a href="./../component.html">组件开发</a>。</p><h2 id="tmagic-ui-示例" tabindex="-1">@tmagic/ui 示例 <a class="header-anchor" href="#tmagic-ui-示例" aria-label="Permalink to &quot;@tmagic/ui 示例&quot;">​</a></h2><ul><li><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/ui" target="_blank" rel="noreferrer">vue3 渲染器</a></li><li><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-vue2" target="_blank" rel="noreferrer">vue2 渲染器</a></li><li><a href="https://github.com/Tencent/tmagic-editor/blob/master/packages/ui-react" target="_blank" rel="noreferrer">react 渲染器</a></li></ul>',15)]))}const p=e(c,[["render",m]]);export{h as __pageData,p as default};