docs: 更新教程中使用的tmagic版本

Tencent · Dec 13, 2024 · 4f23aeb · 4f23aeb
1 parent 98f45d2
commit 4f23aeb
Show file tree

Hide file tree

Showing 3 changed files with 10 additions and 18 deletions.
diff --git a/docs/guide/tutorial/hello-world.md b/docs/guide/tutorial/hello-world.md
@@ -51,7 +51,7 @@ cd hello-world
 ## 添加依赖
 
 ```bash
-npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tmagic/element-plus-adapter element-plus
+npm install --save @tmagic/editor @tmagic/element-plus-adapter element-plus
 ```
 
 ## 注册组件
@@ -61,25 +61,19 @@ npm install --save @tmagic/editor @tmagic/form @tmagic/stage @tmagic/design @tma
 ```ts
 import 'element-plus/dist/index.css';
 import '@tmagic/editor/dist/style.css';
-import '@tmagic/form/dist/style.css';
 
 import { createApp } from 'vue';
 import ElementPlus from 'element-plus';
 
-import TMagicDesign from '@tmagic/design';
 import TMagicEditor from '@tmagic/editor';
 import TMagicElementPlusAdapter from '@tmagic/element-plus-adapter';
-import TMagicForm from '@tmagic/form';
 
 import App from './App.vue';
 
 createApp(App)
   .use(ElementPlus)
-  .use(TMagicDesign, TMagicElementPlusAdapter)
-  .use(TMagicEditor)
-  .use(TMagicForm)
+  .use(TMagicEditor, TMagicElementPlusAdapter)
   .mount('#app');
-
 ```
 
 ## 渲染编辑器
@@ -185,7 +179,7 @@ const render = () => {
 
   createApp(
     {
-      template: '<p v-for="node in config.items" :key="node.id" :id="node.id">hello world</p>',
+      template: '<p v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</p>',
       props: ['config'],
     },
     {
@@ -249,7 +243,7 @@ const render = async ({ renderer }: StageCore) => {
 
   createApp(
     {
-      template: '<div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>',
+      template: '<div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>',
       props: ['config'],
     },
     {

diff --git a/docs/guide/tutorial/render.md b/docs/guide/tutorial/render.md
@@ -4,11 +4,9 @@ tmagic 提供了 vue3/vue2/react 三个版本的解析渲染组件，可以直
 
 [@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
 
-[@tmagic/ui-vue2](https://www.npmjs.com/package/@tmagic/ui-vue2)
-
 [@tmagic/ui-react](https://www.npmjs.com/package/@tmagic/ui-react)
 
-接下来是以vue3为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
+接下来是以vue为基础，来讲述如何实现一个[@tmagic/ui](https://www.npmjs.com/package/@tmagic/ui)
 
 ## 准备工作
 
@@ -71,7 +69,7 @@ app.component('hello-world', HelloWorld);
 
 ```vue
 <template>
-  <component v-if="config" :is="type" :id="`${id}`" :style="style" :config="config"></component>
+  <component v-if="config" :is="type" :tmagic-data-id="`${id}`" :style="style" :config="config"></component>
 </template>
 
 <script lang=ts setup>

diff --git a/docs/guide/tutorial/runtime.md b/docs/guide/tutorial/runtime.md
@@ -22,7 +22,7 @@ cd editor-runtime
 按钮需要用的ts types依赖
 
 ```bash
-npm install --save @tmagic/schema @tmagic/stage
+npm install --save @tmagic/core @tmagic/stage
 ```
 
 ## 实现runtime
@@ -33,8 +33,8 @@ npm install --save @tmagic/schema @tmagic/stage
 
 ```vue
 <template>
-  <div v-if="config" :id="config.id" :style="style">
-    <div v-for="node in config.items" :key="node.id" :id="node.id">hello world</div>
+  <div v-if="config" :data-tmagic-id="config.id" :style="style">
+    <div v-for="node in config.items" :key="node.id" :data-tmagic-id="node.id">hello world</div>
   </div>
 </template>
 
@@ -179,8 +179,8 @@ declare global {
 ```
 
 ```ts
+import type { Id, MApp, MNode } from '@tmagic/core';
 import type { RemoveData, UpdateData } from '@tmagic/stage';
-import type { Id, MApp, MNode } from '@tmagic/schema';
 
 const root = ref<MApp>();