使用vue如何构建一个自动建站项目

写在前面

之前一直用Jquery+Jquery-ui来做这个项目，那个时候没有设计稿，没有项目需求，就因为BOSS一句话，要做这样的东西，当时就…好吧！我承认，其实已经习惯了，无所谓了(也是无奈，哎)!!!

在之后的一段时间里，做了一个demo出来，BOSS很满意了，所以自己接下来就慢慢做吧，差不多两三个月吧，就闷头做这个，后来项目上线了，当然因为产品的不完善，还是有点问题了！

不过基本能满足公司的需求了，能编辑的都可以编辑，组件的background(包括背景图片) color border box-shadow margin padding width height 对齐方式(字体和组件内部元素) border-radius font(font-size/font-family)等等这些基础的都可以随心变更，当然考虑到可能满足不了公司的使用，就加了一个自定义样式的功能，而这个只有懂前端的人才能使用了，没办法，需求永远赶不上变化，这样保险一点。因为大家都知道，需求的满足和变更永远跑在现成需求的前面

除了这些基础的可更改，各个组件的特有可变更的功能也基本齐全的，比如轮播图图片变更，轮播方式，控制是否轮播等等这些功能，这里就不一一介绍了

包括后来，因为有组件内部个别元素不能修改，又增加了[绑定修改]功能，就是这个功能选中之后，在视图界面，选中需要修改的元素，便可以进行修改了，这个功能还是有点意思的

说了这么多，其实当时因为做的仓促，存储的时候存的是HTML,大家不要鄙视(要脸0.0),这个也是我心里一直的梗，最近加上BOSS重新提出了一些想法，有蛮多东西要加，思前想后,决定将项目重构一下

考虑到vue响应式与基本是纯数据操作，所以决定使用vue重新构建这个项目。

开发准备

1、使用vue-cli，下载下来配置好的东西
2、因为中间牵涉了拖拽生成组件的操作，所以使用了vuedraggable和sortablejs。

安装vuedraggable sortablejs

 npm install vuedraggable npm install sortablejs

项目中我们只需要引入vuedraggable就可以了，牵涉了sortablejs东西的时候，vuedraggable会去自己加载调用sortablejs里面的方法的，这个就不是我们需要关注的(你如果想了解，可以自己去看看)；

3、安装vuex，因为里面牵涉到了大量的数据交互，很多组件都需要一些公用的数据，不使用vuex去管理，将会为开发带来更多不必要的麻烦;

安装vuex

 npm install --save vuex 

4、因为没有设计稿的缘故，所以大胆使用了第三方UI库 element-ui;

element-ui官网地址

安装elememt

 npm install element-ui //为什么是element-ui而不是element?因为当时npm上已经有了element包了(我当时还觉得挺有意思的，0.0 好冷啊！！！)

5、axios安装,后面与后台数据交互会用到

安装axios

 npm install --save axios

差不多准备工作就这些了，接下来我们看项目实施；

项目开始

1、各种文件的配置

-> main.js中文件的配置

图片中都有解释，应该可以看的懂的；

-> 侧边栏拖拽组件数据的配置

因为文件太长，所以删掉了一些，这里就是一个简单的格式，仅供参考，不作为标准；

在组件当中，存在一个布局的问题，所以要有布局组件，让组件可以放到布局组建中，这样才更加的灵活

-> vuexjs 状态管理中的js配置

说明：

1、因为用户在拖拽之后要实时保存到sessionStorage中， 所以再初始的时候要到sessionStroage中去取数据，防止突然刷新页面，还没有保存到数据库中，用户刚刚编辑的数据全部丢失的情况;
2、这里说明一下，可能考虑到用于已经提交了数据，所以用户关闭窗口之后，再次进来的时候，要结合后台给出的用户之前的数据，一起存储到sessionStorage中去，相信这一点大家肯定想的到的，这里善意提醒一下 0.0；
3、我这这里暂时放了四个参数，图中都有说明，我主要是将基本编辑做成了一个组件，会根据用户点击时哪个组件，而重新渲染数据给到编辑组件，从而可以实时对应到点击的组件去来源gaodaimacom搞#^代%!码网编辑；
4、editShow的作用就是控制编辑组件显示与否的，主要删除组件的时候，让编辑组件隐藏一下；点击其他组件的显示一下；

基本的配置就这些了，接下来就是真正的开发了;

2、项目开发开始

-> app.vue文件中该怎么写？

  <!--用的element-ui-->   <div class="app-aside-list"> <div class="aside-item-body"> <i class="aside-item-ele"></i><span class="aside-item-ele">{{ list.title }}</span></div></div>  <section class="app-phone"> <div class="app-phone-header"> <span class="phone-camera"></span><span class="phone-ls"></span></div><!--页面view区 --><div class="app-phone-footer"> <button class="app-phone-menu">RS</button></div></section> <!--组件编辑区域-->

-> 来看看sort view视图区域组件

   <!-- ui组件 --><!--这里不懂的人，可以去vue官网看看动态组件--><div> </div>

-> 再来看看编辑组件

   <div> 0 && editShow === true"> //组件特有编辑   <div> </div> //公共样式编辑      setStyle(value,item.style)" v-model="sortApi[editIndex].style[item.style]" show-alpha> <span class="black-text-shadow"> {{ sortApi[editIndex].style[item.style] }} </span></div>

-> 选出一个组件来看看里面是怎么配置的

 //按钮组件，其实里面很简单 //组件的对应的编辑组件，里面内容和这个也差不多，下面就不写了  <div class="btn-box ui-sortable">  {{ content.text }}  //因为每个组件都有删除功能，所以写成了一个组件 </div>

->最后来看看删除组件吧

  <div class="delete-compontent-box"> <div class="el-icon-delete remove-component"></div> <div class="el-message-box__content"> <div class="el-message-box__status el-icon-warning"></div><div class="el-message-box__message dialog-message">此操作将删除该模块, 是否继续?</div></div><span class="dialog-footer"> 取 消确 定</span></div>

-> 来看看效果图吧

效果图展示

结束语

好了，今天写了很多了，最后我们来梳理一下思路：

1、首先配置左侧的拖拽组件
2、配置vuex中的数据
3、app.vue中配置
4、编辑组件的配置
5、各种数据的传递与依赖

其实每个项目，都需要一个清晰的路线，这样才能很好的开发下去，所以我的建议是，在拿到项目的时候，千万不要一股脑的去写，一定要想好怎么做，以及突发事情的发生(比如突来的需求变更)，这样既方便了我们自己，也方便了后来维护的人，也阻止了不必要的麻烦

谢谢大家的耐心的阅读，毕竟这只是一个大概的介绍，肯定存在很多不足，如果大家有建议，欢迎留言交流，也希望大家多多支持gaodaima搞代码网。