A perfect reconstruction project front-end code

premise

  The entry of new companies, took over the former employees of a front-end project, the technology stack for the vue. At first joined the company, let me add a little feature from the home page click on the option to jump to the corresponding page, and click on the point of carrying the parameters, then opened my pain bug fixes stage.

Vue before the code for a little haircut

• All files are placed under the component code views folders, view a folder within a folder that no other
• Sending an asynchronous request vue-resource and used in two ways axios
• All interfaces are directly using the absolute address, cross-domain request
• ui component library uses both elment-ui and iview
• No dedicated routing configuration component loaded on demand
• Icon component library uses both echarts and d3
• DOM operations using jquery
• All Dead code still remains in the project which
• A project about a year, I have a seventh front-end developer to take over the

  At the same time, the new leadership, under negotiation with the Council two development projects, but in the current version, I have no way to proceed with the development of a new one.
  Everything integrated together, so apply with the leadership of the reconstruction project. This leads to a continuous more than a month, it did not update any of the articles. After the front reconstruction, test re-test, the project is finally ready on the line, take advantage of this period of time before the line, a little sum up, the reconstruction of this project.
  The purpose of the reconstruction is carried out to continue the development of new one, and bug fixes found to reduce unnecessary data requests, as the project is not design, it had to consider the page layout.

---

Technology stack after reconstruction

• The project is still vue
• UI library using element-ui
• Sending a request using axios
• Cancel all cross-domain requests
• Routing loaded on demand
• Icon library echarts
• Delete jquery

  As part of the process and correct business logic makes no representation. The main brief introduction to some changes a little user experience.
1. About echarts icon draw, first determine the basis for all items configuration properties, at least when the page out, draw out the graphic basis. Direct configuration option.

init () {
  this.$nextTick(function () {
    if (!this.myChart) this.myChart = this.$echart.init(this.$refs.ref)
    this.myChart.setOption(this.option)
  })
}         

This is actually very easy to understand icons initialization is required after the current component DOM drawing.
After the data request is then returned to process the data.

const series = ...
this.myChart.setOption({series})

It should be understood that the example method setOption echarts

Examples of the chart data and configuration items, universal interface to modify all parameters and data can be completed by setOption, ECharts will incorporate the new parameters and data, and then refresh the chart. If you turn the animation, then, ECharts find the differences between the two sets of data and changes to the performance data through the appropriate animation.
At this point, echarts diagramming basically completed, taking into account the user experience, but also need to listen browser resize event, this time, echarts also provides examples of methods resize echarts, so long as the monitor window.onresize, then call echrtsInst.resize () It can be.

window.addEventListener('resize', () => {
  if (this.myChart) this.myChart.resize()
}, false)

Also before and after three lines of code, giving the experience is completely at odds.
In fact, the rest of the code is the norm and the like.

---

Suggest

Code organization, according to vuejs official style guide .
Code standards, using eslint be constrained, although the first time, you need to configure the idea of development tools (because we will basically install the prettier plug), too much trouble, but really once and for all the work behind.