[发明专利]基于可进阶组件库快速产出前端项目的方法及系统

说明书

本发明涉及Web项目开发技术领域，具体涉及基于可进阶组件库快速产出前端项目的方法及系统。方法包括：S1，开发人员根据组件设计图，提前开发单组件UI库并维护；S2，UI设计师通过前端Canvas画布可视化配置呈现的项目整体界面、单组件交互效果和页面之间跳转逻辑，选择产出初始化项目或单页面或选择开发框架并提交；S3，根据步骤S2中配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件，供前端开发人员使用。本发明具有能够缩短开发周期，实现UI设计和前端开发并行，同时增加开发质量和节约成本的特点。

技术领域

本发明涉及Web项目开发技术领域，具体涉及基于可进阶组件库快速产出前端项目的方法及系统。

背景技术

在以往传统式的互联网公司中，一套完整项目的开发及完成，除产品设计外，包括UI（User Interface，用户界面）设计+前端开发+后端开发，而Web项目的成本，绝大部分也是人力成本，其中前后两端的开发占整体项目人力成本的绝大部分。

传统的web项目前端开发主要包含三步：

1.选择适合自己项目的前端框架并生成基础的项目开发环境架构。

2.据UI设计师给出的设计图编写界面代码及交互代码。

3.据业务逻辑编写插入个性化业务逻辑代码，例如接口数据处理等等。

传统的web项目开发流程存在以下缺点：

1.开发周期问题

现有项目开发中，整体项目开发链路UI设计+前端+后端，前端和UI设计无法像前端和后端一样并行开发同步进行，前端需要等待UI设计完成后才可以介入开发，开发周期长，整体效率低，且前端实现效果和UI设计有出入时还需要反复和设计师确认修改。

2.开发质量问题

市面上现有前端开发UI组件库，只集合单组件代码，但实现整体项目搭建、单页面布局、个性化页面效果、页面之间跳转等等代码还是要由人工来完成，现有组件库只起到了有限的一小部分帮助，绝大部分实现还是由人工实现，出错率高，且样式及效果单一，个性化部分无法满足。

3.开发效率问题

市面上现有组件库，不同的技术框架对应不同组件库，使用方式不同，开发者需要翻阅不同的使用文档，但最终呈现界面效果却大致相同，徒增开发者使用学习成本。

因此，设计一种能够缩短开发周期，实现UI设计和前端开发并行，同时增加开发质量和节约成本的基于可进阶组件库快速产出前端项目的方法及系统，就显得十分重要。

发明内容

本发明是为了克服现有技术中，现有的web项目开发流程，存在开发周期长，开发质量差以及增加开发者使用学习成本的问题，提供了一种能够缩短开发周期，实现UI设计和前端开发并行，同时增加开发质量和节约成本的基于可进阶组件库快速产出前端项目的方法及系统。

为了达到上述发明目的，本发明采用以下技术方案：

基于可进阶组件库快速产出前端项目的方法，包括如下步骤；

S1，开发人员根据组件设计图，提前开发单组件UI库并维护；

S2，UI设计师通过前端Canvas画布可视化配置呈现的项目整体界面、单组件交互效果和页面之间跳转逻辑，选择产出初始化项目或单页面或选择开发框架并提交；

S3，根据步骤S2中配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件，供前端开发人员使用。

作为优选，步骤S1包括如下步骤：

S11，将UI设计师提供的整体UI界面拆分成单个模块化前端组件，并定义每个模块化前端组件可配置化的各类样式及各种可执行的交互效果；