写在前面
之前一直用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 好冷啊!!!)










