vue重构自动建站

为何会写这个项目

最近在公司一直在作小程序的项目，在项目中就有一个使用组件构建小程序的功能，就相似之前的建站工具，这个功能是用比较传统的方式写的，使用JQ和JQ-UI的拖拽功能，相信你们也很熟悉这种组合方式，因为最近一直在学习vue，而且vue是数据驱动，就想用vue来写一下这个功能。刚开始的准备写的时候，想在网上找一个相似的demo研究研究，找了一圈发现，基本上什么也找不到太多开源，以前好不容易找到一篇相似的文章，做者也要作相似的功能，可是没有把代码开源出来，最后只能本身东平西凑的找资料，完成了项目的第一个测试版。

项目准备

一、vue-cli

二、vuedraggable

三、sortablejs

四、vuex

五、element-ui

vue-cli是vue官方推荐的脚手架还很适合有vue基础的人使用。 在这个项目中因为用到了拖拽元素就为了方便就使用了vuedraggable，vuedraggable是基于sortablejs的封装因此也要引入。因为组件中会存在大量的数据因此为了数据的统一管理，这里就使用了vuex。element-ui这个我就不解释了，为了好看点就引入。

安装过程

一、安装vue-cli并初始化一个vue项目

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

在main.js文件中基本上是引入了项目所须要的模块

二、dragapi.js

dragapi.js左侧菜单栏的数据配置

三、componentsData.js

每一个组件初始化的数据配置

四、vuex.js

对数据的集中管理，每当组件的某个数据变化的时候都要同步到vuex

五、App.vue

在App.vue主要有三个自定义组件，draggable的拖拽组件，Sort元素排序组件，BaseEdit元素样式编辑组件

draggable是vuedraggable的组件我就很少说了，下面咱们来看一下Sort.vue文件是怎么样的

六、Sort.vue

这个文件实际上是挺好理解的就是显示组件视图，这里咱们能够看到咱们引入了Btn.vue、TextCp.vue这个两个组件，当拖拽组件到Sort的时候回显相应的组件视图。在Sort.vue也要引入vuex由于咱们须要更新视图只要更新数据就能够了，这也是数据驱动的好处，不用再频繁的操做DOM。

七、BaseEdit.vue

这个就是编辑器组件，能够回显并编辑组件的数据。每一个组件都会有一个本身单独的编辑器组件，原本想把编辑组件放到放到组件自己去会更好，可能会在下次更新github会封装在一块儿。

接下来咱们看看每一个组件具体是怎么写的

八、TextCp.vue

九、TextCpEdit.vue

十、DeleteCp.vue

这是对组件进行删除操做的删除组件

总结

说一下编写组件的基本流程

一、dragapi.js添加一项组件

二、componentsData.js 添加组件建立时须要初始化的数据

三、写xxx.vue组件（在Sort视图中显示）

四、写xxxEdit.vue组件（组件的特有编辑器）

看一下最终的效果

因为这是本人第一次写技术贴，有不少不足的地方，请你们谅解。若是有什么地方写得不明白能够到github下载源码研究一下，或者在下面评论或者提issues。

最后把源码附上 源码地址

https://github.com/dykily/dragWidget