tmagic - editor：大厂开源项目，零代码/低代码页面可视化编辑的利器，多端统一方案揭秘！如何用一套代码支持H5/PC，牛牛牛～～～

嗨，大家好，我是小华同学，关注我们获得“最新、最全、最优质”开源项目和高效工作学习方法

企业和开发者们都在寻求更高效、便捷的方式来创建各类页面，无论是H5页面、PC页面还是TV页面。腾讯推出的tmagic - editor页面可视化编辑器，为我们带来了一种全新的解决方案，并且已经开源，这无疑是广大开发者和非技术人员的福音。

项目简介

腾讯tmagic - editor是一个所见即所得的页面可视化编辑器。这意味着什么呢？简单来说，当你在编辑页面的时候，你看到的效果几乎就是最终呈现给用户的效果。

已经有不少腾讯旗下的业务采用了tmagic - editor。像腾讯视频会员、爱玩游戏、云视听极光、腾讯会议等十几个腾讯业务，每个月都会使用这个编辑器生产和发布数百个页面。这足以证明tmagic - editor在实际业务中的高效性和实用性。

快速集成

引入 @tmagic/editor

在 main.js 中写入以下内容：

import { createApp } from 'vue';
import ElementPlus from 'element-plus';
import zhCn from 'element-plus/es/locale/lang/zh-cn';

import editorPlugin from '@tmagic/editor';
import MagicElementPlusAdapter from '@tmagic/element-plus-adapter';

import App from './App.vue';

import 'element-plus/dist/index.css';
import '@tmagic/editor/dist/style.css';

const app = createApp(App);
app.use(ElementPlus, {
  locale: zhCn,
});
app.use(router);
app.use(editorPlugin, MagicElementPlusAdapter);
app.mount('#app');

以上代码便完成了 @tmagic/editor 的引入。需要注意的是，样式文件需要单独引入。可以参考我们提供的Playground示例实现代码

使用 m-editor 组件

在 App.vue 中写入以下内容：

<template>
  <m-editor
    v-model="dsl"
    :menu="menu"
    :runtime-url="runtimeUrl"
    :props-configs="propsConfigs"
    :props-values="propsValues"
    :component-group-list="componentGroupList"
  >
  </m-editor>
</template>

<script>
  import { defineComponent, ref } from "vue";

&nbs