LCG-VCC

<meta charset="utf-8">
<title>vcc demo</title>
<script src="https://unpkg.com/vue"></script>
<!-- 引入样式 -->
<link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
<!-- 引入组件库 -->
<script src="https://unpkg.com/element-ui/lib/index.js"></script>
<!-- 必须通过这种方式引入 -->
<script src="https://static.imonkey.xueersi.com/vcc/vcc.umd.min.js"></script>


<div id="app">
  <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
</div>

<script>
// 以这样一段结构初始化VCC组件
const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"危险按钮","@click":"onButtonClick","size":"small"}}]}}]}}'
new Vue({
  components: {
    vcc: vcc
  },
  data() {
    return {
      codeStructure: JSON.parse(initCodeStr),
    }
  },
  methods: {
    onCodeUpdate(newCodeEntity) {
      // 编辑后新的代码结构
    }
  }
}).$mount('#app')
</script>

<template>
  <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
</template>

<script>
// 以这样一段结构初始化VCC组件
const initCodeStr = '{"template":{"lc_id":"root","__children":[{"div":{"class":"container","style":"min-height: 100%; padding-bottom: 100px;","lc_id":"container","__text__":"Hello，欢迎使用LCG，请往此区域拖拽组件","__children":[{"el-button":{"lc-mark":"","type":"danger","lc_id":"COAAYXizyI","__children":[],"__text__":"危险按钮","@click":"onButtonClick","size":"small"}}]}}]}}'

export default {
  data() {
    return {
      codeStructure: JSON.parse(initCodeStr),
    }
  },
  methods: {
    onCodeUpdate(newCodeEntity) {
      // 编辑后新的代码结构，可以进行保存
    }
  }
}
</script>

import Vue from "vue";
import ElementUI from "element-ui";
import "element-ui/lib/theme-chalk/index.css";

import APP from "./App.vue";

Vue.use(ElementUI);

// 内部需要同样配置的全局Vue
self.Vue = Vue;

new Vue({
  el: "#app",
  render: (h) => h(APP),
});
 

npm i

npm run serve