{"repo":"sahadev/vue-component-creater-ui","free":true,"listed":false,"github":"https://github.com/sahadev/vue-component-creater-ui","clone":"git clone https://github.com/sahadev/vue-component-creater-ui.git","description":"拖拽式Vue组件代码生成编辑器（VCC）","language":"Vue","stars":795,"topics":["low-code","vuejs","vue-components","drag","draggable"],"license":"MIT","category":"ui-components","readme_excerpt":"VCC 3 VCC (Vue Component Creator) 是一个低代码平台中的独立 Vue 组件代码编辑器，可以独立运行。当前版本是基于 Vue3 的 VCC 3 版本。 通过拖拽式操作，快速完成 Vue 组件代码骨架的搭建，提升开发效率。 🌐 在线预览 : https://vcc3.vercel.app/ 📦 当前版本 : Vue3 + Vite 📚 使用示例 : https://github.com/sahadev/vcc3-use-demo ✨ 特性 - 🎨 可视化拖拽 - 通过拖拽快速搭建组件结构 - ⚡ 实时预览 - 代码生成实时预览，所见即所得 - 📝 代码生成 - 自动生成规范的 Vue 组件代码 - 🎯 多组件库支持 - 支持 Element Plus、Ant Design Vue、Vant、iView、Quasar 等主流组件库 - 🔧 属性编辑 - 可视化编辑组件属性，支持扩展 - 📦 模板预设 - 提供常用组件模板，快速开始 - 🎨 代码编辑 - 支持二次编辑 Vue 代码和 JS 逻辑 - 📊 结构视图 - 可视化查看组件结构关系 - 💾 导出功能 - 支持导出单页 HTML 和 Vue 组件代码 🚀 快速开始 环境要求 - Node.js = 14.x - npm = 6.x 或 yarn = 1.x 安装依赖 启动开发服务器 启动成功后，访问 http://localhost:9818/ 即可预览。 构建生产版本 🛠️ 技术栈 - 框架 : Vue 3.3+ - 构建工具 : Vite 2.6+ - UI 组件库 : Element Plus 2.4+ - 状态管理 : Vuex 4.0+ - 拖拽功能 : vuedraggable 4.1+ - 代码编辑器 : CodeMirror - 图表库 : ECharts 5.4+ 📚 支持的组件库 VCC 3 目前支持以下主流 Vue 组件库： - ✅ Element Plus - 基于 Vue 3 的组件库 - ✅ Ant Design Vue - 企业级 UI 设计语言 - ✅ Vant - 轻量、可靠的移动端组件库 - ✅ iView - 高质量 UI 组件库 - ✅ Quasar - 高性能 Vue.js 框架 - ✅ 原生 HTML - 支持原生 HTML 元素 📁 项目结构 📖 使用指南 基本使用 1. 拖拽组件 - 从左侧组件库中拖拽组件到中间预览区域 2. 编辑属性 - 点击组件，在右侧属性面板中编辑组件属性 3. 查看代码 - 点击右上角代码图标，查看实时生成的代码 4. 导出代码 - 复制生成的代码到你的项目中 视频教程 - 【拖拽式Vue组件代码生成平台(LCG)介绍视频】 详细文档 📚 完整文档 : 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 属性才能被拖拽： 编译组件 添加或修改组件后，需要重新编译： 注意事项 - ⚠️ 在 script 标","default_branch":null,"files":null,"tree":[],"storefront":"/r/sahadev","claimed":false,"request_supported":{"post":"https://gitbuyer.com/r/sahadev/vue-component-creater-ui/request-supported","requests":0},"note":"indexed from public GitHub; nothing is for sale on this page. Clone it from GitHub. Paid listings live at /search."}