前提
入职新公司，接手了前员工的一个前端项目，技术栈为vue。刚进入公司的时候，让我添加一个小功能，从首页点击选项跳转到对应页面，并携带点击点的参数，然后开启了我的痛苦修改bug阶段。
对之前的vue代码稍微理一下
- 所有文件组件代码都放在了views文件夹下，view文件夹内没有其他任何文件夹了
- 发送异步请求使用了vue-resource和axios两种方式
- 所有接口都是直接使用绝对地址，进行跨域请求
- ui组件库同时使用了elment-ui和iview
- 路由配置组件没有尽心按需加载
- 图标组件库同时使用了echarts和d3
- 使用了jquery操作DOM
- 所有无用代码依然保留在项目当中
- 一个一年左右的项目，我已经是第七任接手的前端开发人员了
同时，新任领导，正在与局方洽谈项目二期开发，然而在当前版本上，我已经没有办法继续进行新一期的开发了。
所有一切综合在一起，所以跟领导申请进行项目重构。这才导致连续一个多月，没有进行任何文章的更新了。经过前端重构，测试重新测试，项目在今天终于准备上线了，利用上线之前这一段时间，稍微总结一下，这一项目的重构。
重构的目的是可以进行新一期的继续开发，修改发现的bug，减少无谓的数据请求，由于该项目是没有设计图的，所以还得考虑页面布局。
重构之后的技术栈
- 依然是vue项目
- UI库采用element-ui
- 发送请求使用axios
- 取消所有的跨域请求
- 路由按需加载
- 图标库使用echarts
- 删除jquery
至于过程和修正业务逻辑部分不做任何表述。主要稍微简要介绍一些用户体验方面的修改。
1.关于echarts图标绘制，首先确定所有基础项配置属性，最起码在页面出来的时候，绘制出来图形基础。直接配置option。
init () {
this.$nextTick(function () {
if (!this.myChart) this.myChart = this.$echart.init(this.$refs.ref)
this.myChart.setOption(this.option)
})
}
这块其实很容易理解，初始化图标，需要在当前组件DOM绘制完成之后。
然后数据请求回来之后，对数据进行处理。
const series = ...
this.myChart.setOption({series})
这里需要理解echarts的实例方法setOption
设置图表实例的配置项以及数据，万能接口，所有参数和数据的修改都可以通过 setOption 完成，ECharts 会合并新的参数和数据，然后刷新图表。如果开启动画的话，ECharts 找到两组数据之间的差异然后通过合适的动画去表现数据的变化。
此时，echarts图表绘制基本完成，考虑到用户体验，还需要监听浏览器resize事件，此时，echarts也提供了echarts的实例方法resize，所以只要监听了window.onresize，然后调用echrtsInst.resize()即可。
window.addEventListener('resize', () => {
if (this.myChart) this.myChart.resize()
}, false)
前后也就三行代码，给人的体验是完全不一致的。
剩下的其实就是代码规范之类的。
建议
代码组织，按照vuejs官方风格指南。
代码规范，采用eslint进行约束，虽然第一次使用，需要配置idea开发工具（因为我们基本上都会装上prettier插件），比较麻烦，但是后面真是一劳永逸的工作。