一种基于VUE的页面生成方法、平台、设备和介质技术

技术编号:33438688 阅读:23 留言:0更新日期:2022-05-19 00:26
本发明专利技术提供一种基于VUE的页面生成方法、装置、设备和介质,方法包括:项目建立流程、页面设计流程、静态文件生成流程和复用准备流程:当开发者基于开发者的操作建立项目后进入设计器设计页面时,开发者仅需要通过拖动组件列表区的组件到页面展示区进行配置,即可方便快捷的生成一个页面,并同步进行渲染;同时对已有控件功能进行了二次封装整合,并且可将页面中一些可复用的内容保存为模板提供给其他页面或开发者使用,大大提高了组件的复用率。当项目所有页面的vue文件都生成完毕后,并根据组件类型统计结果动态执行所需依赖包的命令,减少不需要的依赖包,防止打包文件过大。防止打包文件过大。防止打包文件过大。

【技术实现步骤摘要】
一种基于VUE的页面生成方法、平台、设备和介质


[0001]本专利技术涉及计算机
,特别涉及一种基于VUE的页面生成方法、装置、设备和介质。

技术介绍

[0002]随着时代的发展,前端技术及框架的不断更新,开发项目可以使用的技术栈也越来越丰富。传统的开发模式下,由于开发人员所熟悉的前端技术栈、UI框架的不同,以及个人代码编写习惯的不同,导致重复的功能组件难以复用,多人项目中的代码格式规范难以统一,不易于维护,导致项目开发的成本较高、周期较长。

技术实现思路

[0003]本专利技术要解决的技术问题,在于提供一种基于VUE的页面生成方法、装置、设备和介质,开发者仅需要通过拖动平台内置的组件到页面展示区进行配置,即可方便快捷的生成一个页面,同时对已有控件功能进行了二次封装整合,并且可将页面中一些可复用的内容保存为模板提供给其他页面或开发者使用,大大提高了组件的复用率。
[0004]第一方面,本专利技术提供了一种基于VUE的页面生成方法,包括:
[0005]所述项目建立流程:基于开发者的操作建立项目,并生成项目的基本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.一种基于VUE的页面生成方法,其特征在于:包括:项目建立流程:基于开发者的操作建立项目,并生成项目的基本信息;页面设计流程:当开发者从项目进入设计器设计页面时,生成一个页面配置对象用于存储页面所属的项目信息和一个组件数组;所述设计器具有组件列表区、页面展示区和组件配置区,当所述组件列表区中的组件被拖入到所述页面展示区时,组件配置区域会展示对应选中组件的属性以供配置,则将组件对应的js对象插入到所述页面配置对象的组件数组中,所述页面展示区则根据所述页面配置对象的组件数组,从已封装的组件中按照组件的类型找到对应的组件并根据组件的属性渲染出对应的元素;静态文件生成流程:预先准备一个基础的前台打包项目,同时将项目的每个页面的页面配置信息取出并逐一解析生成为一标准的vue文件;当项目所有页面的vue文件都生成完毕后,统计项目的所有页面所使用到的组件类型,并根据项目的所述基本信息生成一配置文件,根据组件类型统计结果,动态执行安装项目依赖包的命令,待项目所有依赖包安装完毕后执行打包命令,从而生成项目打包后的静态文件并提供给开发者下载;复用准备流程:将所述vue文件导出到本地对应的打包项目中以供二次开发,或将页面存入平台中以供修改调整页面。2.根据权利要求1所述的一种基于VUE的页面生成方法,其特征在于:还包括:二次开发流程:直接修改导出到本地的所述vue文件,之后在本地自行打包;页面修改流程:当在页面展示区域的组件被选中时,将该组件设置为当前激活组件,并在组件配置区将组件对应的js对象上的属性展示出来以供配置;当组件配置区中的配置属性被重新配置时,同步变更页面配置对象中对应组件的配置属性,供页面展示区动态渲染出新的页面;脚本自定义流程:当开发者在组件配置区域编写自定义脚本时,根据组件的id将所述自定义脚本存储到页面的配置对象中;在页面渲染后,组件能根据所述id在对应的事件中找到对应的自定义脚本并执行;并且还提供一套内置API供开发者自定义组件之间交互的动作逻辑。3.根据权利要求1所述的一种基于VUE的页面生成方法,其特征在于:还包括:字符串生成流程:预先定义每种组件生成为字符串的方法,在根据js对象的类型及配置属性生成字符串,并拼凑为完整的页面字符串后传入后台接口,以供后台根据字符串在前台打包项目对应的页面目录下生产对应的vue文件。4.根据权利要求1所述的一种基于VUE的页面生成方法,其特征在于:所述设计器根据ant

design

vue内置封装了一套对应的组件,并约定了这些组件的一些默认的属性,生成为js对象存储在平台内,每一个js对象对应组件列表区域的一个组件。5.一种基于VUE的页面生成装置,其特征在于:包括:项目建立模块,基于开发者的操作建立项目,并生成项目的基本信息;设计器,供开发者设计页面,生成一个页面...

【专利技术属性】
技术研发人员:黄家昌李文集杨辉邱道椿
申请(专利权)人:福建亿能达信息技术股份有限公司
类型:发明
国别省市:

网友询问留言 已有0条评论
  • 还没有人留言评论。发表了对其他浏览者有用的留言会获得科技券。

1