Giter Club home page Giter Club logo

vue-component-creater-ui's Introduction

VCC 3

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

通过它可以通过拖拽快速完成 Vue 组件代码骨架的搭建。详见后文视频介绍链接。

点击这里快速预览效果:https://vcc3.surge.sh/ 当前已经升级至 Vue3 + Vite。

使用示例

请移步至使用 Demo:https://github.com/sahadev/vcc3-use-demo

本地如何运行此项目

首先进行安装:

npm i

再进行启动(Vite):

npm run dev

运行完成后,就可以访问http://localhost:9818/预览效果了.

使用介绍

此前在 B 站上录了两段视频。可以通过这两段视频简单了解如何使用它: 【拖拽式 Vue 组件代码生成平台(LCG)介绍视频-哔哩哔哩】https://b23.tv/FInuZ8 【LCG 近期功能更新介绍-哔哩哔哩】https://b23.tv/SAHwVq

说明文档

https://vcc3-docs.surge.sh/#/

功能更新日志

  • 2022 年 03 月 16 日 支持生成单页 Html,支持 Vue2 以及 Vue3,并支持一键部署至 VCC 服务器。
  • 2023 年 12 月 06 日 更新 Element 组件库版本、更新 Vue 框架版本。

核心仓库

VCC 依赖于一个核心的代码转换库:vue-component-code-creater,通过这个库来完成 Vue 文件的解析和 Vue 文件的生成。如果需要更改核心实现,可通过此库提供的源码进行修改。

贡献

  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 和反馈

如有建议或意见,欢迎在 github issues 区提问

协议

本仓库遵循 MIT 协议

有疑问?

可以通过[email protected]给我发送邮件,我会及时回复的。

或者加群和大家一起讨论吧! 可以加我微信:SAHADEV-smile,我拉你入群。加我微信时请备注 VCC。

另外我也特别希望可以和大家一起做这个项目。这个项目目前主要面对的是前端开发者。后期可以面向后端开发者与产品与 UE。

vue-component-creater-ui's People

Contributors

sahadev avatar

Stargazers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

Watchers

 avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar  avatar

vue-component-creater-ui's Issues

<el-form >标签包裹问题

在你的应用中可以将子标签单独显示出来,但是在别人项目中却无法显示,因为拖拽代码时只带有子标签却没有带 标签,希望可以更改框架,显示代码中附带标签

组件中使用指令问题

比如v-for='item in datalist',会在data里自动生成item变量,methods中的方法生成代码是只会保留方法名

【需求】支持Vue3

来自B站朋友的反馈:

希望可以支持Vue3。支持输出以setup形式的代码。

项目本身也需要升级至Vue3。以便集成AntD。

【需求】丰富的组件库

来自群友的建议:

支持国内的地图插件,比如百度,高德,腾讯这些。

支持vant,AntD各类组件库。

【需求】预览支持全屏

来自M的建议:

我上个星期拖了个页面想看一下全屏预览的效果怎么样,然后才发现没有这个功能,然后就感觉看得怪别扭的[捂脸][捂脸]
提示一下“全屏预览模式,按Esc键退出”也可以的(进入预览模式后)

【需求】支持工程化

来自海浩的建议:

支持与IDE结合,可以通过编辑器对文件进行二次编辑。并支持解析TS与import。

这个问题的难点在于编辑完成如何反向输出。

【需求】支持导出独立的Html

来自番茄的建议:

最近试用了几款web可视化工具,发现vcc非常理想的设计工具,非常感谢您的开发!现在有个小建议:在使用过程中发现,导出的代码是vue组件代码,如果想正常使用,还需要搭建vue项目,由于我的用途仅仅是设计一些能够与后台交互的简单界面,现有的VCC提供的功能已够实用,并没有二次开发的需求,请问能否添加一个功能,将设计好的vue组件以传统的html页面的形式导出,以方便直接调用,感谢!

番茄
2021.11.29

【缺陷】style在导出时没有了

来自群友的反馈:

在el-button上增加了style之后,预览情况下生效了。但在导出时没有对应的属性。

实际确认确实没有,这里是个缺陷。

布局组件还有点小bug,拖入后没占用高度

应该是布局组件默认没有内容,所以没有高度,导致无法拖入其他组件到布局组件中。
不过可以在“Inspect Components Structure”中选中,然后编辑一下样式或内容,让它占个高度解决。

Recommend Projects

  • React photo React

    A declarative, efficient, and flexible JavaScript library for building user interfaces.

  • Vue.js photo Vue.js

    🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.

  • Typescript photo Typescript

    TypeScript is a superset of JavaScript that compiles to clean JavaScript output.

  • TensorFlow photo TensorFlow

    An Open Source Machine Learning Framework for Everyone

  • Django photo Django

    The Web framework for perfectionists with deadlines.

  • D3 photo D3

    Bring data to life with SVG, Canvas and HTML. 📊📈🎉

Recommend Topics

  • javascript

    JavaScript (JS) is a lightweight interpreted programming language with first-class functions.

  • web

    Some thing interesting about web. New door for the world.

  • server

    A server is a program made to process requests and deliver data to clients.

  • Machine learning

    Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.

  • Game

    Some thing interesting about game, make everyone happy.

Recommend Org

  • Facebook photo Facebook

    We are working to build community through open source technology. NB: members must have two-factor auth.

  • Microsoft photo Microsoft

    Open source projects and samples from Microsoft.

  • Google photo Google

    Google ❤️ Open Source for everyone.

  • D3 photo D3

    Data-Driven Documents codes.