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

权利要求书

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

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

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

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

2.根据权利要求1所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S1包括如下步骤：

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

S12，根据UI界面提供的模块化前端组件进行代码片段生产；

S13，前端结合现有官方组件库进行二次封装，并生产出模块化前端组件在不同框架所对应的代码片段；

S14，前端产出不同页面及项目交互效果所对应的代码片段；

S15，将所有生成的代码片段上传至代码集中；

其中所述代码集通过NodeJs运行环境结合MySQL关系型数据库进行管理及增删改查和后期复用操作。

3.根据权利要求2所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S11中每个模块化前端组件均包括有可选的配置或属性所生成的样式代码和交互代码。

4.根据权利要求2所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S2包括如下步骤：

S21，选择需要产出的模块化前端组件和框架，通过NodeJs运行环境在MySQL数据库存储的代码集中进行查找所述模块化前端组件对应不同框架的代码片段，最后返回处理及拼接，生成单文件或项目文件；

S22，选择需要配置的不同页面之间跳转关联关系，对应的代码片段由代码集产出，并进行拼接操作，最终生成单文件或项目文件；

S23，在页面中通过可视化组件库及画布，进行拖拽拼接，自定义宽高和自定义交互，最终生产出整个页面所呈现的效果，完成单个页面产出效果配置；

S24，步骤S21至步骤S23的配置完成后点击确认，通过NodeJs运行环境在MySQL数据库里的代码集中查找到对应框架、对应模块化前端组件、对应交互效果所对应的代码片段，并进行组装拼接，最后产出对应的单文件或者整体项目zip文件，最终通过接口数据流传输返回，并下载到本地。

5.根据权利要求4所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S21中所述框架包括react开发框架或vue开发框架。

6.根据权利要求4所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S3包括如下步骤：

S31，接收配置的整体项目及页面的配置信息数据；

S32，拆分页面中的单页面、单模块化前端组件配置及产出框架选择、路由跳转、页面交互信息；

S33，根据拆分出来的各种模块化前端组件的配置信息，到MySQL数据库里存储的代码集中选择对应的代码片段；

S34，由NodeJs运行环境将步骤S33中选择的代码片段进行组装，组装后生成单文件或结合框架代码片段生成项目文件；

S35，将最终生成的单文件或者项目文件通过接口数据流形式返回给客户端。

7.根据权利要求6所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，步骤S34中所述单文件的格式包括vue、tsx、html和css。

8.基于可进阶组件库快速产出前端项目的系统，用于实现权利要求1-7任一项所述的基于可进阶组件库快速产出前端项目的方法，其特征在于，所述基于可进阶组件库快速产出前端项目的系统包括：

单组件维护模块，用于根据组件设计图，提前开发单组件UI库并维护；

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

开发环境项目生成模块，用于根据配置提交的数据，并结合对应的模版代码，通过NodeJs运行环境的fs模块，产出生成对应的开发环境整体项目框架文件或单页面文件。