demand

Project iteration, to reconstruct a user operation, can freely choose template, can customize the content of the page. All of the content on this single page is customized by the user. On reflection, it seems appropriate to use Vue because most of the operations on the page can be understood as reordering and editing of the aggregate data. Below are some of the key issues in record development.

Vue deep copy of raw data

Parse (json.stringify (…)); parse(json.stringify (…)); ) to copy a copy of data for operation. In general, data interference between components is caused by this problem.

Separation of default data from edited data

This was not considered in the initial implementation, and the crude method of retrieving the default data was to copy a copy of the default data when entering the page. It was later discovered that this would cause the default data to change after the user manipulates the data. A good solution is to keep them separate and make them all separate requests.

Element’s Dialog Dialog listens

As for Dialog, the current version of Element 2.0 directly generates and hides all the dialogs needed during page loading, and only performs show/hide operation when switching state. In consideration of reusability, it does not destroy or regenerate. Therefore, there may be a problem that can only be triggered for the first time in the monitoring update of data. One of the solutions is to monitor the influence dialog box to display hidden attributes, such as dialogVisible in the official example, and then perform data update operations when the dialog box is displayed.

Cross-domain problems with locally developed data requests

On the one hand, you can modify its default hostname lookup behavior by adding disableHostCheck: true to webpack-dev-server. You can also configure proxyTable under config > index.js to solve this problem.

proxyTable: {
  '/api': {
    target: 'http://api.x.com',
    changeOrigin: true,
    pathRewrite: {
      '^/api': '/api'}}}Copy the code

Vue-cli uses the http-proxy-middleware plugin github: github.com/chimurai/ht…

Data storage and retrieval

Localstorage is used to store identity-specific ids, and axios is used to make server data requests based on the ids. JSONP modules need to be added if cross-domains are involved. Link: github.com/axios/axios…

To improve

  • Vue lazy loading is not used. Due to the complexity of operation logic, all JS files on the home page are nearly 800 KB. If the JS files of future iterations may be larger, there may be larger JS files, which may lead to a long waiting time for the first loading. Load JS on demand and plan ahead.
  • Vuex is not used, and data communication between components is currently implemented through prop parameter transfer. While there is currently no problem with large-scale data sharing between components, it is necessary to introduce Vuex for data processing. As the project gets more complicated, the current communication between components becomes more and more cumbersome.

In the final

The above points are some key issues extracted from the whole home page project. With the end of the first Vue project, I have to sigh that data-driven is really simple, convenient and efficient. It’s nothing compared to the way jQuery used to find, bind the DOM and then render. It’s always exciting to try something new.

In addition…

If you have any questions, please point out! Tmac. wang/2017/11/%E5…