都说好酒要珍藏，年份越老味道越好，那么项目的话，就要反过来了。要时常的更新迭代才能保证项目的时效性，不会太落伍于时代。就在前两个星期，我接到了公司的重构优化的需求，对象是一个很老的项目（对于前端来说）也就是两年前的项目了。
ps：本编只是讲大体是如何去做的（只是一个参考思路），没有具体实现的步骤～如果有需求，之后再补上咯～毕竟我也还是个弟弟，有什么可以改进的地方还希望大佬们多多指出～
老项目的分析
前端框架
使用的是Vue、以及Vue-cli2.0+的版本
插件分析
- element-ui
- 版本太老很多新的功能都没有
- 使用不够规范
- vue-router 项目里面不可避免的使用了 vue-router 路由功能下面是里面存在的问题
- 路由的配置和页面的路由配置都写的一个文件里面
- 页面路由配置已经很多，有1000+行
- 路由的引入的方式存在问题（写的很奇怪我母鸡之前为什么要这个写）
- axios
- axios的配置初始化文件过多，能有将近10个文件，看了代码是因为接口有那么多
- 项目里面还有引入 jquery 里面的 ajax 方法的
- Vuex
- 文件过多（很多都可以合并）
- 书写方式不优雅
代码分析
由于这是一个公司内部的系统，所以很多同事都在上面开发过，所以代码的维护管理上面也是很困难，代码的梳理和维护成本过高，还有就是还有后台的同事也在上面进行开发（代码什么写的有些感人），说到这里并不是说我针对什么的。所以总结下来就是：
- 代码质量不高
- 代码很杂不利于维护
- 代码的书写规范缺失
结论
最后决定还是从手脚架先入手，先去升级一下 vue-cli 的版本，然后再加上一些代码的自动校验，同时也要对原来老的代码都过一遍校验，之后再去优化代码，或者是插件的使用问题。这个东西不是能够一蹴而就的。
升级过程
升级 vue-cli
我选择是直接初始化一个新的项目，如果不知道怎么初始化项目的话请点击这里，直接使用最新的 vue-cli 再去把老项目里面的业务代码和其他文件都复制过来。
优化一些插件的使用
复制过来之后把一些基础的东西都先改掉，比如：main.js、app.vue 里面的东西等。之后就是路由的问题。我这里是先把路由捋了一遍，把之前的一个文件，拆分了，分成了 config.js 也就是路由的配置文件，router.js 页面路由配置文件，index.js 最终的整合输出文件，因为这个系统的业务那边还是在同步进行，所有这个 vue-router 要先优化出来，然后不仅仅是如此，后面有时间也会转成 typescript 方式书写，做成可视化路由配置最好。其余的基本就是保持不变，留着以后逐步迭代掉。
添加代码规范校验
代码的校验，是修改了 vue-cli 的校验修改为自己公司发在npm上面的包，其实就是参考了标准规则，加上了自己公司的团队的风格。大家可以参考一下哦。还有就是对之前代码的格式化之后报错简直了～且行且～～
添加 commit message 自动生成
利用 commitizen cz-customizable 这个两个插件定制自动生成commit message，来规范提交信息。因为我看了之前的提交记录真的都全是 update 。我都一脸的懵～
git commit 校验
husky lint-staged 这两个插件里面的 hooks 实现在 git commit 之前对提交的代码再次进行校验，我尝试过把上面一步跟这一步合并到一个 hooks 里面但是没有成功～
总结
现在这个项目结构，手脚架的重构算是基本上完成了，剩下里面代码的重构和优化，就等需求没有那么强烈的时候慢慢去迭代掉了。
问题
-
线上iconfont丢失问题，因为之前是下载到项目里面的东西，现在改成了线上引入的方式，导致的这个问题，修改完代码就好了
-
文件下载问题，因为项目转移的时候，有一个file文件夹里面的东西我给弄丢了。就导致了这个问题，还是我自己疏忽大意导致的，后来就改为线上引入的
-
别的大问题暂时还没有遇到，欢迎交流啊～
-
你的代码里有你读过的书和走过的路
-
经历过才会有更好的成长
博客地址 欢迎到访
GitHub 我不要Star✨（疯狂暗示）
