It is said that wine should be preserved, and the older the wine, the better the taste. It is necessary to update and iterate frequently to ensure the timeliness of the project and not to be too outdated. In the last couple of weeks, I’ve received a refactoring request from the company for a very old project (for the front end) that was two years old.

Ps: this part is just about how to do it (just a reference), there is no specific implementation steps ~ if there is demand, then fill up the role ~ after all, I am still a younger brother, what can improve the place also hope big guys more pointed out ~

Analysis of old projects

The front frame

Vue and vuE-CLI2.0 + versions are used

Plug-in analysis

  • element-ui
    • The version is too old and many new features are missing
    • Non-standard use
  • Vue-router routing is inevitable in vue-Router projects. The following are the problems with vue-Router routing
    • Route configuration and page route configuration are written in a file
    • The page routing configuration is already large, with 1000+ lines
    • – There is a problem with the way routes are introduced
  • axios
    • The configuration initialization file in AXIos is too many, it can be nearly 10 files, I looked at the code because there are so many interfaces
    • The project also introduces ajax methods from jquery
  • Vuex
    • Too many files (many can be merged)
    • The writing style is not elegant

The code analysis

Since this is a company’s internal system, so a lot of colleagues in the above development, so the above code maintenance and management also is very difficult, code and high maintenance costs, and colleagues also and the background in the above development (what code to write some touching), here is not to say that I’m against something. So it comes down to this:

  • Code quality is not high
  • The code is messy and not maintainable
  • Code writing specifications are missing

conclusion

Finally decided to start from the scaffolding, first to upgrade the VUE-CLI version, and then add some code automatic verification, but also to the original old code have a verification, and then to optimize the code, or the use of plug-ins. This is not something that can be built overnight.

The upgrade process

To upgrade the vue – cli

I choose to initialize a new project directly. If you don’t know how to initialize a project, please click here and directly use the latest VUe-CLI to copy the business code and other files from the old project.

Optimize the use of some plug-ins

After copying it, change some basic things first, such as main.js, app.vue, etc. Then there is the question of routing. I split the previous file into config.js, the routing configuration file, the router.js page, the routing configuration file, and the index.js final integration output file, because the service side of the system is still synchronized. All vue-routers need to be optimized first, and then not only that, but also written in typescript at some point in the future, which is best configured as visual routes. The rest is basically left unchanged and iterated over.

Add code specification validation

The verification of the code is modified vuE-CLI verification is modified as the package sent by my company on THE NPM. In fact, it refers to the standard rules and adds the style of my company’s team. You can refer to oh. There is also the previous code formatting after the error is simply ~ line and ~ ~

Add commit message generation automatically

The commitizen CZ-CustomIZABLE plug-in customizes automatic commit message generation to standardize commit information. Because I looked at the previous commit records and they were really all updates. I have a face meng ~

Git commit check

The hooks implementation in husky Lint-staged plug-ins validates the submitted code again before git commit. I tried merging the above and this steps into a single hook but failed

conclusion

Now the reconstruction of the project structure and scaffolding is basically completed, and the reconstruction and optimization of the remaining code will be iterated slowly when the demand is not so strong.

The problem

  • The problem of online iconfont loss is caused by something that was downloaded into the project before, but now it is introduced online. The problem is caused by modifying the code

  • File download problem, because I lost something in a file folder when the project was transferred. That’s what caused the problem, which was caused by my own negligence, and then changed to online introduction

  • Other big problems have not been encountered, welcome to exchange ah ~

  • Your code has books you’ve read and paths you’ve traveled

  • Better growth comes from experience

Blog address welcome to visit

GitHub I don’t want Star✨ (Crazy hint)