可视化拖拽系统 #20190516 更新

之前只是简单的删除了公司的一些代码，并没有细看，issues和私下有人说跑不起来，今天抽出几分钟吧主要的两个接口MOCK到本地，并实现npm run dev 跑起来！

这里还要说一下，整个拖拽可视化过程都需要后端接口返回组件的样式和数据，这次只是今天加了一个楼层的配置模拟接口！

这个项目提交的github主要是提供一种VUE实现拖拽生成页面的开发思路，有很多不完美的地方，大家可以指正，开发这个项目时我也是第一次做这个场景的项目开发，并没有类似场景的开发经验，所以如果又其他更有更好的开发思路和方案欢迎交流沟通，不限框架！我当时在选型时考虑的是React和Vue的，之所以 选择Vue是因为相对熟练，毕竟从Vue1.x就在玩了，并且相对于React的单向数据流，Vue的双向数据绑定更能轻松实现场景中实时配置，可视化区域实时更新！如上是简单的选型考虑！至于实现方案我相信一定还有其他更好的方案，欢迎类似场景需求同行交流经验

#20180814更新

1.加入组件code split优化

2.项目目录出入口多页面打包完成，拆分view和edit两个页面，功能单一性；

  view只负责渲染组件用户浏览页面组件的加载
  
  edit加载更多UI和JS插件等
  
  view和edit拆分有助于后期开发的可观和操作性

3.埋点的加入

##使用说明

npm install

npm run dev //本地运行 访问可视化编辑访问edit.html，显示效果访问view.html

npm run pre //预发打包

npm run build

componnet ====>编辑可视化组件

viewComponents ====> 用户访问页面查看组件

layout ====> 可视化编辑结构组件

server ====> 所有相关请求接口文件配置

widgets ===> 组件列表编辑配置

plugins ===> 开发vue插件用，目前项目中用到的弹框等都是elementUI那一套，并没有自己开发，只写了个toast的例子在里边

组件开发步骤：

1。src/components里创建vue文件，同时在index.js里创建异步组件方法例ordinaryProduct:()=>import('./ordinaryProduct')

2。widgets-->widgets.js配置相关组件信息

由于项目中设计到公司的一些域名，可能直接跑无法运行；

clone后要修改个文件：server中api文件中的createObject接口，这个接口是在拖拽后从后端请求组件配置接口，接口格式已经放到easy mock中；或者直接改掉store中getDefaultConfig方法，自己把组件配置写在本地一个文件中，这样拖拽时就可以看到效果

整个可视化项目中心都在store和render文件里，viewRender只是clone了一下并删掉了一些view时没用的功能；

核心:vuedraggable 和 vue的component组件，一切都围绕这两块做的

分享整个可视化项目主要是给大家提供一个思路，（项目中用到了elementUI的一些上传，按钮，弹框的UI，所以打包后vendor比较大，也没有把view和edit单独打包公用插件）代码有瑕疵的地方还望指出，理想情况下如果创建一套这样可视化拖拽系统，其实应该加入node，虽然这一套可视化加入了异步加载组件，但如果用户访问我们搭建好的页面时还是需要加载js后才会出现页面，这各部分如果有node加入的话，用SSR效率和可用性更加完美，毕竟我们搭建的页面时给用户看的；

欢迎大神指导意见

整个项目从搭建开始都是作者一人在搞，项目近，任务重，请轻喷！！！

原创不易，多多支持；

TODOS

copy 编辑配置有问题

整体结构目录优化，重灾区top.vue，util文件夹，edit.js等文件调整和文件内部拆分颗粒