技术拆解-图说新闻平台

拆解思路：

1、先通过 package.json 了解用到的技术

2、启动程序

3、【关键】通过 vue-devtools 查看页面组件结构

4、通过组件名称，跟踪页面代码

用到的技术

Vue：前端框架

Vuex：状态管理(页面不同区域的数据状态联动)

elementui：页面样式

html2canvas：导出图片

vue-draggable-resizable-gorkys：拖拽、粘合

xlsx：解析 excel

jQueryUI：组件拖拽排序用到了sortable、文本框用到了 draggable 等

Cropper：图片裁剪插件

medium-editor：文本编辑

通过 ElementUI 来构建，只要把其用熟练，模块化组装一个组件是很快的。

用第三方插件来实现。

通过绝对定位给页面盖上一张图片是简单的，但是我们要考虑添加的这个图片，需要跟随者整个组件的移动而移动。

因此图片的位置应该是相对组件的，而不是相对整个页面。

目前做的图片替换，其实是在组件模板中，就已经给图片固定了位置，然后直接替换这个图片，这样是比较好实现的。

后面我们需要考虑图片可以随意放位置的情况，不过这个应用场景并不多，可以靠后。

Vue.nextTick()是个用于拖动、定位的好方法。

ZZY 充当产品经理，给出文本的需求文档和 Axure 交互稿

每次确认需求时，开发向产品经理说一遍需求

找其他同事，这几天先帮忙在反馈群里值班

遇到问题，10 分钟没头绪，就找公司其他组的经验丰富的同事寻求帮助。

先把最常用的几个命令琢磨透

提高提交代码的频率

遇到冲突，自己没把握的，向提交方确认下，再确定处理方案

#技术拆解 #JavaScript