update: readme

README.md

@@ -1,107 +1,24 @@
-# VCC
+# VCC 3
 
-VCC(Vue Compontent Creator)是Low Code Generator中独立的Vue组件代码编辑器。可以独立运行。
+VCC(Vue Compontent Creator)是 Low Code Generator 中独立的 Vue 组件代码编辑器。可以独立运行。当前你看到的是基于 Vue3 的 VCC 3 版本。
 
-**通过它可以通过拖拽快速完成Vue组件代码骨架的搭建。详见后文视频介绍链接。** 
+**通过它可以通过拖拽快速完成 Vue 组件代码骨架的搭建。详见后文视频介绍链接。**
 
-> 点击这里快速预览效果：[https://vcc.sahadev.tech/](https://vcc.sahadev.tech/) 当前已经升级至Vue3 + Vite。
+> 点击这里快速预览效果：[https://vcc3.sahadev.tech/](https://vcc3.sahadev.tech/) 当前已经升级至 Vue3 + Vite。
 
 #### 使用示例
-##### 示例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>
 
-
+请移步至使用Demo：[https://github.com/sahadev/vcc3-use-demo](https://github.com/sahadev/vcc3-use-demo)
-<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>
-</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>
-```
-注意不需要专门在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
 npm i
 ```
 
 再进行启动(Vite):
+
 ```
 npm run dev
 ```
@@ -110,9 +27,9 @@ npm run dev
 
 ## 使用介绍
 
-此前在B站上录了两段视频。可以通过这两段视频简单了解如何使用它:
+此前在 B 站上录了两段视频。可以通过这两段视频简单了解如何使用它:
-[【拖拽式Vue组件代码生成平台(LCG)介绍视频-哔哩哔哩】https://b23.tv/FInuZ8](https://b23.tv/FInuZ8)
+[【拖拽式 Vue 组件代码生成平台(LCG)介绍视频-哔哩哔哩】https://b23.tv/FInuZ8](https://b23.tv/FInuZ8)
-[【LCG近期功能更新介绍-哔哩哔哩】https://b23.tv/SAHwVq](https://b23.tv/SAHwVq)
+[【LCG 近期功能更新介绍-哔哩哔哩】https://b23.tv/SAHwVq](https://b23.tv/SAHwVq)
 
 ## 贡献
 
@@ -138,6 +55,6 @@ npm run dev
 
 <img width="300" src="https://static.imonkey.xueersi.com/vcc/wechat_group.jpg">
 
-如果遇到群二维码过期的情况，可以加我微信：SAHADEV-smile，我拉你入群。加我微信时请备注VCC。
+如果遇到群二维码过期的情况，可以加我微信：SAHADEV-smile，我拉你入群。加我微信时请备注 VCC。
 
-另外我也特别希望可以和大家一起做这个项目。这个项目目前主要面对的是前端开发者。后期可以面向后端开发者与产品与UE。
+另外我也特别希望可以和大家一起做这个项目。这个项目目前主要面对的是前端开发者。后期可以面向后端开发者与产品与 UE。

package.json

@@ -1,5 +1,5 @@
 {
-  "name": "lcg-vcc",
+  "name": "lcg-vcc3",
   "description": "Low Code Generator -> Vue Component Creater",
   "version": "0.5.3",
   "private": false,
@@ -7,13 +7,13 @@
     "low-code",
     "editor"
   ],
-  "main": "./dist/vcc.umd.min.js",
+  "main": "./dist/vcc3.umd.min.js",
   "scripts": {
     "dev": "vite --port 9818",
     "serve": "vite --port 9818",
     "build:release": "vite build --base=https://static.imonkey.xueersi.com/vcc3/",
-    "build": "vue-cli-service build --report --target lib --name vcc './src/components-v2/VCC.vue'",
+    "build": "vue-cli-service build --report --target lib --name vcc3 './src/components-v2/VCC.vue'",
-    "build:win": "vue-cli-service build --report --target lib --name vcc ./src/components-v2/VCC.vue && node ./src/script/distClear.js",
+    "build:win": "vue-cli-service build --report --target lib --name vcc3 ./src/components-v2/VCC.vue && node ./src/script/distClear.js",
     "compileAndbuild:dev": "npm run compileComponent && vue-cli-service build",
     "lint": "vue-cli-service lint",
     "build:prod": "vue-cli-service build --mode production",