Vue可视化,Vue代码生成,Vue动态表单
发布于 8 个月前 作者 furioussoul 8747 次浏览 最后一次编辑是 7 个月前 来自 分享

1 项目介绍 Esview是一款拖拽组件生成vue页面的工具,并且可以生成代码。 包含拖拽生成页面、页面管理、组件管理等功能。 前端采用vue和iview,生成的代码必须安装vue和iview才能使用, 后台采用java(springboot)作为持久层,保存生成的页面、创建的组件。 github : https://github.com/furioussoul/soul-esview 掘金:https://juejin.im/post/5a150b5ff265da432d27bd10

2 演示 Vue可视化,Vue代码生成

QQ图片20171027113639.png

3 原理 如何实现拖拽:html源生api,代码在dnd.js。 如何生成代码:拖拽生成的页面,背后是一个树形的结构,通过递归向下法解析语法树生成最终的.vue代码。 组件的属性编辑影响组件样式:vue会监听这棵属性结构的所有属性,当属性被编辑过后,vue会更新整个页面。

13 回复

期待不久的将来,Vue社区可以像npm一样有一个丰富的(组件)市场,然后70%的前端工程师就可以下岗了,啊哈哈哈!

已经实现动态表单

@ImSiegeLion 前端搞得这么复杂,就是为了更多人有饭吃。以前用Microsoft FrontPage拼图的时候,有没有人想过今天的前端有这么大一个群体?不出两年,肯定会有一个更复杂的概念性框架出来号称改变一切,然后前端就更多事情干了,信不信?

@yudawei1230 淘汰的那70%是搬砖的,如果楼主的这个项目比同类产品可以更智能些,生成的代码可维护性更高些,那些搬砖的码农还有什么存在的意义?

@anonymousnewguy 可是,楼主的项目不就是为了能让前端变得更简单些吗?

@ImSiegeLion 我不是说楼主的项目。技术的进化本来就是从简单到复杂再到简单再到复杂不断的循环。如果技术会一直变得越来越简单,年轻人早就找不到工作了。

@ImSiegeLion 提点意见,生成怎么样的代码好?

@furioussoul 首先,我还没看你的项目代码。然后,先讲个小故事,那时公司需要尽快搞一个自己官网,静态的花哨的,但是人手不够,就买了一个月的某自助建站的服务,让UI同事拖拖拽拽搞出了一个漂亮的官网,四个月后,官网要更新,我们前端不是很忙,这时才详细的去看那些自动生成的代码,瞬间惊呆了,这都是些啥啊…,DOM层次又多又乱,CSS哪里都是,还一堆绝对定位,脸上很懵逼,心里MMP 跑偏了。。。现在转Node后台了,对Vue谈不上很了解,说一点浅薄的见解,我希望可以生成那种看起来就和手写出来的一样的代码(…),代码编写风格规范,层次清晰,事件绑定什么的,逻辑变更什么的,(以上全是废话),可以更便于后期维护(重点)。

@ImSiegeLion 生成工具一般只能做到生成静态页面,事件绑定做不到,因为里面有业务逻辑。 我目前生成的代码是可以维护的。 如Table: <template> <div> <Table :columns=“columns” :data=“data”></Table> </div> </template> <script> export default { data() { return { “columns”: [{ “title”: “Name”, “key”: “name” }, { “title”: “Age”, “key”: “age” }, { “title”: “Address”, “key”: “address” }], “data”: [{ “name”: “John Brown”, “age”: 18, “address”: “New York No. 1 Lake Park”, “date”: “2016-10-03” }, { “name”: “Jim Green”, “age”: 24, “address”: “London No. 1 Lake Park”, “date”: “2016-10-01” }, { “name”: “Joe Black”, “age”: 30, “address”: “Sydney No. 1 Lake Park”, “date”: “2016-10-02” }, { “name”: “Jon Snow”, “age”: 26, “address”: “Ottawa No. 2 Lake Park”, “date”: “2016-10-04” }] } } } </script>

赞一个,很不错。值得借鉴学习。

楼楼登录失败啦 image.png

login 失败: image.png

回到顶部