[发明专利]一种Vue项目代码逆向重构方法

说明书

本发明涉及一种Vue项目代码逆向重构方法，属于前端开发领域。特征在于包括：包括了负责配置项目文件依赖的Web客户端，所述Web客户端同时负责上传Vue项目文件与下载重构之后的项目页面文件；Web客户端从项目管理服务器读取并显示所有上传的项目文件信息与转化状态，转化状态分为正在转化与转化完成，Web客户端可下载已完成转化的项目文件；所述重构方法还包括了DOM转化服务器与页面生成服务器，其中DOM转化服务器包含了组件。本发明能够快速将Vue项目代码转化成传统架构代码，简化项目重构操作，解决项目兼容性的问题，降低项目代码重构的人力操作成本与时间成本。

技术领域

本发明涉及前端开发领域，具体涉及前端Vue项目逆向重构的方法与工具。

背景技术

目前在国内前端开发行业中，主要流行的前端框架是Vue。相比早期最基本的HTML、CSS和JavaScript/ajax，以及最新的高级版本HTML5、CSS3，和SVG等，Vue框架通过虚拟DOM技术，极大地减少了前端代码对DOM的直接操作，并将数据层与视图层相互绑定，减少了前端页面的代码量；然而Vue框架不支持IE8以及更低版本，在部分实际项目中，项目所面向的使用人群的计算机设备系统比较落后，依然在使用WindowsXP甚至Windows98等老式系统，无法支持Vue项目。在考虑项目平台兼容性时，要人工完成Vue项目的向前兼容，根据项目的页面需求、功能需求与页面结构重新梳理逻辑，通过前端传统的HTML+CSS+JavaScript+JQuery+Ajax，设计HTML页面DOM结构，通过jQuery完成DOM操作实现页面功能，通过Ajax完成http请求，整个流程代码量十分庞大，大大增加了人力成本与时间成本。

目前现有技术中还没有将Vue框架项目自动重构成传统架构项目的工具。

发明内容

本发明目的在于提供一种将Vue项目重构成传统架构项目的方法，该重构方法能够自动快速的将Vue项目代码转化成传统架构代码，简化项目重构操作，解决项目兼容性的问题，降低项目代码重构的人力操作成本与时间成本。

一种Vue项目代码逆向重构方法，其特殊之处在于，包括了负责配置项目文件依赖的Web客户端，所述Web客户端同时负责上传Vue项目文件与下载重构之后的项目页面文件；Web客户端从项目管理服务器读取并显示所有上传的项目文件信息与转化状态，转化状态分为正在转化与转化完成，Web客户端可下载已完成转化的项目文件；所述重构方法还包括了DOM转化服务器与页面生成服务器。

整个流程包括以下步骤：

S1、Web客户端选择Vue项目文件，并配置Vue项目所需的依赖包管理与项目页面结构，将Vue项目文件上传到项目管理服务器中；

S2、项目管理服务器生成项目信息记录与唯一ID，备份Vue项目源码到数据库，分析项目页面结构并将项目文件数据与唯一ID发送到DOM转化服务器；

S3、DOM转化服务器根据S1所述依赖包管理与项目文件中的Vue标签，从组件库中获取相应的组件转化模板，根据模板将Vue组件代码转化为HTML代码；

S4、DOM转化服务器根据S2所述项目页面结构，将所有页面代码转化为虚拟DOM、js文件与样式文件，发送唯一ID与代码文件到页面生成服务器中；

S5、页面生成服务器根据虚拟DOM与样式文件生成相应的HTML项目代码，并通过src关联页面的JS文件，并将唯一ID与项目代码返回项目管理服务器；

S6、项目管理服务器收到唯一ID与项目代码后，根据唯一ID获取项目信息，并修改项目状态为转化完成。

所述S1具体步骤：在Web客户端，将本地项目文件输入到客户端页面中，配置项目路由结构、Vue项目依赖配置信息与项目信息参数，项目信息参数包括项目名称、项目使用者、代码转换后的代码规范与项目页面目录规范，完成后通过异步执行的方式将所有信息数据上传到项目管理服务器。