1 项目介绍 Esview是一款拖拽组件生成vue页面的工具，并且可以生成代码。 包含拖拽生成页面、页面管理、组件管理等功能。 前端采用vue和iview，生成的代码必须安装vue和iview才能使用， 后台采用java（springboot）作为持久层，保存生成的页面、创建的组件。 github : https://github.com/furioussoul/soul-esview 掘金：https://juejin.im/post/5a150b5ff265da432d27bd10
2 演示 Vue可视化，Vue代码生成
3 原理 如何实现拖拽：html源生api，代码在dnd.js。 如何生成代码：拖拽生成的页面，背后是一个树形的结构，通过递归向下法解析语法树生成最终的.vue代码。 组件的属性编辑影响组件样式：vue会监听这棵属性结构的所有属性，当属性被编辑过后，vue会更新整个页面。
@ImSiegeLion 前端搞得这么复杂，就是为了更多人有饭吃。以前用Microsoft FrontPage拼图的时候，有没有人想过今天的前端有这么大一个群体？不出两年，肯定会有一个更复杂的概念性框架出来号称改变一切，然后前端就更多事情干了，信不信？
@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>
