5、axios安装,后面与后台数据交互会用到
安装axios
npm install --save axios差不多准备工作就这些了，接下来我们看项目实施；
项目开始
1、各种文件的配置
-> main.js中文件的配置
图片中都有解释，应该可以看的懂的；
-> 侧边栏拖拽组件数据的配置
因为文件太长，所以删掉了一些，这里就是一个简单的格式，仅供参考，不作为标准；
在组件当中，存在一个布局的问题，所以要有布局组件，让组件可以放到布局组建中，这样才更加的灵活
-> vuexjs 状态管理中的js配置
说明：
1、因为用户在拖拽之后要实时保存到sessionStorage中， 所以再初始的时候要到sessionStroage中去取数据，防止突然刷新页面，还没有保存到数据库中，用户刚刚编辑的数据全部丢失的情况;
2、这里说明一下，可能考虑到用于已经提交了数据，所以用户关闭窗口之后，再次进来的时候，要结合后台给出的用户之前的数据，一起存储到sessionStorage中去，相信这一点大家肯定想的到的，这里善意提醒一下 0.0；
3、我这这里暂时放了四个参数，图中都有说明，我主要是将基本编辑做成了一个组件，会根据用户点击时哪个组件，而重新渲染数据给到编辑组件，从而可以实时对应到点击的组件去编辑；
4、editShow的作用就是控制编辑组件显示与否的，主要删除组件的时候，让编辑组件隐藏一下；点击其他组件的显示一下；
基本的配置就这些了，接下来就是真正的开发了;
2、项目开发开始
-> app.vue文件中该怎么写？
<template>
<!--用的element-ui-->
<el-container>
<el-aside>
<Draggable class="app-aside-drag" :options="dragOption">
<div class="app-aside-list"
v-for="(dragList,index) in dragData"
:type="dragList.type"
:key="dragList.type">
<div class="aside-item-body">
<i class="aside-item-ele"></i>
<span class="aside-item-ele">{{ list.title }}</span>
</div>
</div>
</Draggable>
<el-aside>
<el-main class="app-main">
<section class="app-phone">
