docs: 更新 README 文档，优化项目说明和使用指南

2025-12-15 06:44:22 +08:00 · 2025-12-03 17:18:29 +08:00
parent 89ec1e64db
commit f565b1ef39
2 changed files with 266 additions and 39 deletions
--- a/README.md
+++ b/README.md
@@ -1,70 +1,273 @@
 # VCC 3

-VCC(Vue Compontent Creator)是 Low Code Generator 中独立的 Vue 组件代码编辑器。可以独立运行。当前你看到的是基于 Vue3 的 VCC 3 版本。
+VCC (Vue Component Creator) 是一个低代码平台中的独立 Vue 组件代码编辑器，可以独立运行。当前版本是基于 Vue3 的 VCC 3 版本。

-**通过它可以通过拖拽快速完成 Vue 组件代码骨架的搭建。详见后文视频介绍链接。**
+**通过拖拽式操作，快速完成 Vue 组件代码骨架的搭建，提升开发效率。**

-> 点击这里快速预览效果：[https://vcc3.surge.sh/](https://vcc3.surge.sh/) 当前已经升级至 Vue3 + Vite。
+> 🌐 **在线预览**: [https://vcc3.surge.sh/](https://vcc3.surge.sh/)  
+> 📦 **当前版本**: Vue3 + Vite  
+> 📚 **使用示例**: [https://github.com/sahadev/vcc3-use-demo](https://github.com/sahadev/vcc3-use-demo)

-#### 使用示例
+## ✨ 特性

-请移步至使用 Demo：[https://github.com/sahadev/vcc3-use-demo](https://github.com/sahadev/vcc3-use-demo)
+- 🎨 **可视化拖拽** - 通过拖拽快速搭建组件结构
+- ⚡ **实时预览** - 代码生成实时预览，所见即所得
+- 📝 **代码生成** - 自动生成规范的 Vue 组件代码
+- 🎯 **多组件库支持** - 支持 Element Plus、Ant Design Vue、Vant、iView、Quasar 等主流组件库
+- 🔧 **属性编辑** - 可视化编辑组件属性，支持扩展
+- 📦 **模板预设** - 提供常用组件模板，快速开始
+- 🎨 **代码编辑** - 支持二次编辑 Vue 代码和 JS 逻辑
+- 📊 **结构视图** - 可视化查看组件结构关系
+- 💾 **导出功能** - 支持导出单页 HTML 和 Vue 组件代码

-## 本地如何运行此项目
+## 🚀 快速开始

-首先进行安装:
+### 环境要求

-```sh
-npm i
+- Node.js >= 14.x
+- npm >= 6.x 或 yarn >= 1.x
+
+### 安装依赖
+
+```bash
+npm install
+# 或
+yarn install
 ```

-再进行启动(Vite):
+### 启动开发服务器

-```
+```bash
 npm run dev
+# 或
+npm run serve
 ```

-运行完成后，就可以访问[http://localhost:9818/](http://localhost:9818/)预览效果了.
+启动成功后，访问 [http://localhost:9818/](http://localhost:9818/) 即可预览。

-## 使用介绍
+### 构建生产版本

-此前在 B 站上录了两段视频。可以通过这两段视频简单了解如何使用它:
-[【拖拽式Vue组件代码生成平台(LCG)介绍视频】 https://www.bilibili.com/video/BV17h411f7g2/)
-[【拖拽式Vue组件代码生成平台(LCG)介绍视频】 https://www.bilibili.com/video/BV17h411f7g2/)
+```bash
+# 构建为库文件
+npm run build

-### 说明文档
+# 构建为 Vercel 部署版本
+npm run build:vercel

-[https://vcc3-docs.surge.sh/#/](https://vcc3-docs.surge.sh/#/)
+# 构建为发布版本
+npm run build:release
+```

-### 功能更新日志
+## 🛠️ 技术栈

- 2022 年 03 月 16 日 支持生成单页 Html，支持 Vue2 以及 Vue3，并支持一键部署至 VCC 服务器。
- 2023 年 12 月 06 日 更新 Element 组件库版本、更新 Vue 框架版本。
+- **框架**: Vue 3.3+
+- **构建工具**: Vite 2.6+
+- **UI 组件库**: Element Plus 2.4+
+- **状态管理**: Vuex 4.0+
+- **拖拽功能**: vuedraggable 4.1+
+- **代码编辑器**: CodeMirror
+- **图表库**: ECharts 5.4+

-### 核心仓库
+## 📚 支持的组件库

-VCC 依赖于一个核心的代码转换库：[vue-component-code-creater](https://github.com/sahadev/vue-component-code-creater)，通过这个库来完成 Vue 文件的解析和 Vue 文件的生成。如果需要更改核心实现，可通过此库提供的源码进行修改。
+VCC 3 目前支持以下主流 Vue 组件库：

-## 贡献
+- ✅ **Element Plus** - 基于 Vue 3 的组件库
+- ✅ **Ant Design Vue** - 企业级 UI 设计语言
+- ✅ **Vant** - 轻量、可靠的移动端组件库
+- ✅ **iView** - 高质量 UI 组件库
+- ✅ **Quasar** - 高性能 Vue.js 框架
+- ✅ **原生 HTML** - 支持原生 HTML 元素

-1. Fork 仓库
-2. 创建分支 (`git checkout -b my-new-feature`)
-3. 提交修改 (`git commit -am 'Add some feature'`)
-4. 推送 (`git push origin my-new-feature`)
-5. 创建 PR
+## 📁 项目结构

-## 欢迎 fork 和反馈
+```
+vue-component-creater-ui/
+├── src/
+│   ├── components/          # 核心组件
+│   │   ├── AttributeInput.vue    # 属性输入组件
+│   │   ├── Code.vue              # 代码展示组件
+│   │   ├── CodeEditor.vue       # 代码编辑器
+│   │   ├── CodeStructure.vue    # 代码结构视图
+│   │   ├── Preview.vue          # 预览组件
+│   │   └── RawComponents.vue    # 原始组件列表
+│   ├── components-v2/        # V2 版本组件
+│   │   ├── VCC.vue              # 主组件
+│   │   └── ToolsBar.vue         # 工具栏
+│   ├── rawComponents/        # 组件库源文件
+│   │   ├── element/             # Element Plus 组件
+│   │   ├── antd/                # Ant Design Vue 组件
+│   │   ├── vant/                # Vant 组件
+│   │   ├── iview/               # iView 组件
+│   │   ├── quasar/              # Quasar 组件
+│   │   └── raw/                 # 原生 HTML 组件
+│   ├── libs/                 # 核心库文件
+│   │   ├── store.js             # 状态管理
+│   │   ├── code-generator-factory.js  # 代码生成工厂
+│   │   └── ...
+│   ├── map/                  # 组件映射文件
+│   ├── utils/                # 工具函数
+│   └── main.js               # 入口文件
+├── public/                   # 静态资源
+├── dist/                     # 构建输出
+├── vite.config.js           # Vite 配置
+└── package.json             # 项目配置
+```

-如有建议或意见，欢迎在 github [issues](https://github.com/sahadev/vue-component-creater-ui/issues) 区提问
+## 📖 使用指南

-## 协议
+### 基本使用

-本仓库遵循 [MIT 协议](http://www.opensource.org/licenses/MIT)
+1. **拖拽组件** - 从左侧组件库中拖拽组件到中间预览区域
+2. **编辑属性** - 点击组件，在右侧属性面板中编辑组件属性
+3. **查看代码** - 点击右上角代码图标，查看实时生成的代码
+4. **导出代码** - 复制生成的代码到你的项目中

-## 有疑问？
+### 视频教程

-可以通过sahadev@foxmail.com给我发送邮件，我会及时回复的。
+- [【拖拽式Vue组件代码生成平台(LCG)介绍视频】](https://www.bilibili.com/video/BV17h411f7g2/)

-或者加群和大家一起讨论吧! 可以加我微信：SAHADEV-smile，我拉你入群。加我微信时请备注 VCC。
+### 详细文档

-另外我也特别希望可以和大家一起做这个项目。这个项目目前主要面对的是前端开发者。后期可以面向后端开发者与产品与 UE。
+📚 **完整文档**: [https://vcc3-docs.surge.sh/#/](https://vcc3-docs.surge.sh/#/)
+
+## 🔧 开发指南
+
+### 添加新组件库
+
+1. 在 `src/rawComponents` 目录下创建以组件库名称命名的文件夹（如 `myui`）
+2. 在该文件夹内创建 `index.vue` 文件，并引入组件
+3. 在组件元素上添加 `lc-mark` 属性，使其可被拖拽
+4. 在 `src/components/RawComponents.vue` 中引入新组件库
+5. 执行编译命令：`npm run compileComponent`
+
+### 组件标记
+
+组件必须添加 `lc-mark` 属性才能被拖拽：
+
+```vue
+<el-button lc-mark>默认按钮</el-button>
+```
+
+### 编译组件
+
+添加或修改组件后，需要重新编译：
+
+```bash
+npm run compileComponent
+```
+
+### 注意事项
+
+- ⚠️ 在 `script` 标签内部慎用大于小于号，可能导致预编译阶段解析出错
+- ⚠️ 组件的 CSS 中不能使用 SCSS 写法，否则编译 Vue 文件会不通过
+- ⚠️ 在文件中不能声明与 prop 相同的变量名
+
+## 📝 更新日志
+
+### v0.5.3 (当前版本)
+
+- ✅ 升级至 Vue 3.3+
+- ✅ 升级至 Vite 2.6+
+- ✅ 更新 Element Plus 组件库版本
+- ✅ 支持生成单页 HTML
+- ✅ 支持 Vue2 和 Vue3 代码生成
+- ✅ 优化代码生成逻辑
+- ✅ 改进用户体验
+
+### 历史版本
+
+- **2023-12-06**: 更新 Element 组件库版本、更新 Vue 框架版本
+- **2022-03-16**: 支持生成单页 Html，支持 Vue2 以及 Vue3，并支持一键部署至 VCC 服务器
+
+## 🔗 相关项目
+
+### 核心依赖
+
+VCC 依赖于核心代码转换库：[vue-component-code-creater](https://github.com/sahadev/vue-component-code-creater)
+
+该库负责：
+- Vue 文件的解析
+- Vue 文件的生成
+- 代码结构转换
+
+如需修改核心实现，请参考该库的源码。
+
+## ❓ 常见问题
+
+### Q: 如何添加自定义组件？
+
+A: 参考 [开发指南](#-开发指南) 中的"添加新组件库"部分。
+
+### Q: 为什么拖拽的组件无法显示？
+
+A: 确保组件元素已添加 `lc-mark` 属性，并且已执行 `npm run compileComponent` 重新编译。
+
+### Q: 生成的代码可以直接使用吗？
+
+A: 生成的代码是标准的 Vue 组件代码，可以直接在项目中使用。但建议根据实际需求进行微调。
+
+### Q: 支持哪些 Vue 版本？
+
+A: 当前版本支持 Vue 3.x，历史版本支持 Vue 2.x。
+
+### Q: 如何部署到生产环境？
+
+A: 执行 `npm run build` 构建项目，然后将 `dist` 目录部署到静态服务器即可。
+
+## 🤝 贡献指南
+
+我们欢迎所有形式的贡献！
+
+### 贡献流程
+
+1. Fork 本仓库
+2. 创建特性分支 (`git checkout -b feature/AmazingFeature`)
+3. 提交你的修改 (`git commit -m 'Add some AmazingFeature'`)
+4. 推送到分支 (`git push origin feature/AmazingFeature`)
+5. 开启一个 Pull Request
+
+### 贡献方向
+
+- 🐛 修复 Bug
+- ✨ 添加新功能
+- 📝 完善文档
+- 🎨 优化 UI/UX
+- ⚡ 性能优化
+- 🔧 添加新的组件库支持
+
+## 📮 反馈与支持
+
+### 问题反馈
+
+如有建议或发现问题，欢迎在 [GitHub Issues](https://github.com/sahadev/vue-component-creater-ui/issues) 中反馈。
+
+### 联系方式
+
+- 📧 **邮箱**: sahadev@foxmail.com
+- 💬 **微信**: SAHADEV-smile（加好友时请备注 VCC）
+- 👥 **交流群**: 添加微信后，我会拉你入群和大家一起讨论
+
+### 项目愿景
+
+这个项目目前主要面向前端开发者，帮助提升开发效率。未来计划：
+- 🎯 面向后端开发者
+- 🎯 面向产品和 UE 设计师
+- 🎯 提供更多组件库支持
+- 🎯 增强代码生成能力
+
+我们特别希望可以和大家一起完善这个项目！🚀
+
+## 📄 开源协议
+
+本项目遵循 [MIT 协议](http://www.opensource.org/licenses/MIT)
+
+---
+
+<div align="center">
+
+**如果这个项目对你有帮助，请给一个 ⭐ Star 支持一下！**
+
+Made with ❤️ by [sahadev](https://github.com/sahadev)
+
+</div>
--- a/package-lock.json
+++ b/package-lock.json
@@ -766,6 +766,7 @@
    "node_modules/@types/lodash-es": {
      "version": "4.17.12",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/lodash": "*"
      }
@@ -923,6 +924,7 @@
      "version": "5.0.8",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/helper-compilation-targets": "^7.12.16",
        "@soda/friendly-errors-webpack-plugin": "^1.8.0",
@@ -1173,6 +1175,7 @@
    "node_modules/@vue/compiler-sfc": {
      "version": "3.3.10",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/parser": "^7.23.5",
        "@vue/compiler-core": "3.3.10",
@@ -1614,6 +1617,7 @@
    "node_modules/acorn": {
      "version": "7.4.1",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },
@@ -1660,6 +1664,7 @@
      "version": "6.12.6",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "fast-json-stable-stringify": "^2.0.0",
@@ -2205,6 +2210,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "caniuse-lite": "^1.0.30001565",
        "electron-to-chromium": "^1.4.601",
@@ -2951,6 +2957,7 @@
      "version": "6.8.1",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "icss-utils": "^5.1.0",
        "postcss": "^8.4.21",
@@ -3043,6 +3050,7 @@
      "version": "8.12.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "json-schema-traverse": "^1.0.0",
@@ -4132,6 +4140,7 @@
      "version": "6.8.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@babel/code-frame": "^7.0.0",
        "ajv": "^6.10.0",
@@ -4378,6 +4387,7 @@
      "version": "2.25.3",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "array-includes": "^3.1.4",
        "array.prototype.flat": "^1.2.5",
@@ -6613,6 +6623,7 @@
      "version": "0.14.3",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@samverschueren/stream-to-observable": "^0.3.0",
        "is-observable": "^1.1.0",
@@ -6808,11 +6819,13 @@
    },
    "node_modules/lodash": {
      "version": "4.17.21",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/lodash-es": {
      "version": "4.17.21",
-      "license": "MIT"
+      "license": "MIT",
+      "peer": true
    },
    "node_modules/lodash-unified": {
      "version": "1.0.3",
@@ -7167,6 +7180,7 @@
      "version": "8.12.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "json-schema-traverse": "^1.0.0",
@@ -8018,6 +8032,7 @@
        }
      ],
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "nanoid": "^3.3.7",
        "picocolors": "^1.0.0",
@@ -8948,6 +8963,7 @@
    "node_modules/rollup": {
      "version": "2.61.0",
      "license": "MIT",
+      "peer": true,
      "bin": {
        "rollup": "dist/bin/rollup"
      },
@@ -9062,6 +9078,7 @@
      "version": "1.44.0",
      "devOptional": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "chokidar": ">=3.0.0 <4.0.0",
        "immutable": "^4.0.0"
@@ -10302,6 +10319,7 @@
    "node_modules/vite": {
      "version": "2.7.1",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "esbuild": "^0.13.12",
        "postcss": "^8.3.11",
@@ -10337,6 +10355,7 @@
    "node_modules/vue": {
      "version": "3.3.10",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@vue/compiler-dom": "3.3.10",
        "@vue/compiler-sfc": "3.3.10",
@@ -10546,6 +10565,7 @@
    "node_modules/vue-template-compiler": {
      "version": "2.6.14",
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "de-indent": "^1.0.2",
        "he": "^1.1.0"
@@ -10640,6 +10660,7 @@
      "version": "5.89.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "@types/eslint-scope": "^3.7.3",
        "@types/estree": "^1.0.0",
@@ -10784,6 +10805,7 @@
      "version": "8.12.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "json-schema-traverse": "^1.0.0",
@@ -10891,6 +10913,7 @@
      "version": "8.12.0",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "dependencies": {
        "fast-deep-equal": "^3.1.1",
        "json-schema-traverse": "^1.0.0",
@@ -10991,6 +11014,7 @@
      "version": "8.11.2",
      "dev": true,
      "license": "MIT",
+      "peer": true,
      "bin": {
        "acorn": "bin/acorn"
      },