最近在公司一直在做小程序的项目，在项目中就有一个使用组件构建小程序的功能，就类似以前的建站工具，这个功能是用比较传统的方式写的，使用JQ和JQ-UI的拖拽功能，相信大家也很熟悉这种组合方式，由于最近一直在学习vue，并且vue是数据驱动，就想用vue来写一下这个功能。刚开始的准备写的时候，想在网上找一个类似的demo研究研究，找了一圈发现，基本上什么也找不到太多开源，之前好不容易找到一篇类似的文章，作者也要做类似的功能，但是没有把代码开源出来，最后只能自己东平西凑的找资料，完成了项目的第一个测试版。
vue-cli是vue官方推荐的脚手架还很适合有vue基础的人使用。 在这个项目中由于用到了拖拽元素就为了方便就使用了vuedraggable，vuedraggable是基于sortablejs的封装所以也要引入。由于组件中会存在大量的数据所以为了数据的统一管理，这里就使用了vuex。element-ui这个我就不解释了，为了好看点就引入。
npm install --global vue-cli
vue init webpack vuetest
npm install vuedraggable
npm install sortablejs
npm install --save vuex
npm install --save axios
npm install element-ui
npm run dev
完成上面这些操作就可以正式开始编写代码了
在main.js文件中基本上是引入了项目所需要的模块
dragapi.js左侧菜单栏的数据配置
每个组件初始化的数据配置
对数据的集中管理，每当组件的某个数据变化的时候都要同步到vuex
在App.vue主要有三个自定义组件，draggable的拖拽组件，Sort元素排序组件，BaseEdit元素样式编辑组件
draggable是vuedraggable的组件我就不多说了，下面我们来看一下Sort.vue文件是怎么样的
这个文件其实是挺好理解的就是显示组件视图，这里我们可以看到我们引入了Btn.vue、TextCp.vue这个两个组件，当拖拽组件到Sort的时候回显相应的组件视图。在Sort.vue也要引入vuex因为我们需要更新视图只要更新数据就可以了，这也是数据驱动的好处，不用再频繁的操作DOM。
这个就是编辑器组件，可以回显并编辑组件的数据。每个组件都会有一个自己单独的编辑器组件，本来想把编辑组件放到放到组件本身去会更好，可能会在下次更新github会封装在一起。
接下来我们看看每个组件具体是怎么写的
这是对组件进行删除操作的删除组件
1、dragapi.js添加一项组件
2、componentsData.js 添加组件创建时需要初始化的数据
3、写xxx.vue组件（在Sort视图中显示）
4、写xxxEdit.vue组件（组件的特有编辑器）
看一下最终的效果
由于这是本人第一次写技术贴，有很多不足的地方，请大家谅解。如果有什么地方写得不明白可以到github下载源码研究一下，或者在下面评论或者提issues。
最后把源码附上 源码地址