From 4d6ea5771fd7e9370947b63abf1c4db741a203d6 Mon Sep 17 00:00:00 2001
From: Shangbin <shangbin1@100tal.com>
Date: Sun, 24 Oct 2021 09:43:44 +0800
Subject: [PATCH] =?UTF-8?q?=E6=9B=B4=E6=96=B0readme=E4=BB=A5=E5=8F=8A?=
 =?UTF-8?q?=E7=BC=96=E8=BE=91=E5=8C=BA=E5=9F=9F=E6=A0=B7=E5=BC=8F?=
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

---
 README.md                 | 81 +++++++++++++++++++++++++++++++++------
 src/components-v2/VCC.vue |  4 +-
 2 files changed, 71 insertions(+), 14 deletions(-)

diff --git a/README.md b/README.md
index 98b1a39..e9a978d 100644
--- a/README.md
+++ b/README.md
@@ -1,13 +1,53 @@
-# lcg-vcc介绍
+# LCG-VCC
 
-vcc是Low Code Generator中独立的Vue组件代码编辑器。可以独立运行。
+VCC是Low Code Generator中独立的Vue组件代码编辑器。可以独立运行。
 
 **通过它可以通过拖拽快速完成Vue组件代码骨架的搭建。详见后文视频介绍链接。** 
 
-点击这里快速预览效果:
-[https://vcc.sahadev.tech/](https://vcc.sahadev.tech/)
+> 点击这里快速预览效果：[https://vcc.sahadev.tech/](https://vcc.sahadev.tech/)
 
-使用示例：
+#### 使用示例
+##### 示例1
+直接在html中引用：
+```html
+<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>
+```
+
+##### 示例2
+在Vue文件中引用：
 ```vue
 <template>
   <vcc :initCodeEntity="codeStructure" @updateCodeEntity="onCodeUpdate"></vcc>
@@ -18,26 +58,43 @@ vcc是Low Code Generator中独立的Vue组件代码编辑器。可以独立运
 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 {
-  components: {
-    vcc: () => import('lcg-vcc')
-  },
   data() {
     return {
       codeStructure: JSON.parse(initCodeStr),
     }
   },
-  mounted() {
-  },
   methods: {
     onCodeUpdate(newCodeEntity) {
-      // 编辑后新的代码结构
+      // 编辑后新的代码结构，可以进行保存
     }
   }
 }
 </script>
 ```
+注意不需要专门在components引入，而需要在index.html通过script引入（像示例1的引入方式）。这是因为VCC里面的组件采用了分包加载策略，子包依赖主包的相对路径。
 
-## 本地如何运行
+另外还需要将Vue变为全局可访问的，例如：
+```js
+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),
+});
+ 
+```
+
+注意ElementUI组件也是需要项目中安装好的。
+## 本地如何运行此项目
 
 首先进行安装:
 ```sh
diff --git a/src/components-v2/VCC.vue b/src/components-v2/VCC.vue
index 30714e7..b832a9a 100644
--- a/src/components-v2/VCC.vue
+++ b/src/components-v2/VCC.vue
@@ -174,8 +174,8 @@ export default {
             div: {
               class: "container",
               "lc_id": "container",
-              "div-lc-mark": "",
-              __text__: "Hello，欢迎使用LCG，请往此区域拖拽组件",
+              "style":"min-height: 100%; padding-bottom: 100px;",
+              __text__: "Hello，欢迎使用VCC编辑器，请往此区域拖拽组件",
             }
           }]
         },