一种基于制造技术

本发明专利技术提供了移动端页面开发技术领域的一种基于

【技术实现步骤摘要】
一种基于VUE的移动端页面生成方法及系统


[0001]本专利技术涉及移动端页面开发
，特别指一种基于
VUE
的移动端页面生成方法及系统
。

技术介绍

[0002]随着互联网的发展，前端框架也迅速发展，手持设备的使用也越来越广泛，为人们的出行
、
住宿
、
医疗等各方面提供很大的便利，同时也带来了更大的移动端页面的开发需求
。
针对移动端页面的开发，传统的开发模式对开发人员的技术水平有一定的要求，且由于开发人员所熟悉的技术栈
、ui
框架及个人的代码编写习惯差异，会导致重复的功能组件较难复用，多人协作开发的项目
(
移动端页面
)
，代码风格的规范依赖于开发人员的自觉性，较难统一，不易于项目的维护，使得开发迭代一个项目的成本较高
、
周期较长
。
[0003]因此，如何提供一种基于
VUE
的移动端页面生成方法及系统，实现提升移动端页面开发和维护的便捷性以及效率，成为一个亟待解决的技术问题
。

技术实现思路

[0004]本专利技术要解决的技术问题，在于提供一种基于
VUE
的移动端页面生成方法及系统，实现提升移动端页面开发和维护的便捷性以及效率
。
[0005]第一方面，本专利技术提供了一种基于
VUE
的移动端页面生成方法，包括如下步骤：
[0006]步骤
S10、
基于至少包括名称
、
标题
、
图标以及数据库表的配置文件创建一用于生成移动端页面的项目；
[0007]步骤
S20、
通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；
[0008]步骤
S30、
基于
VUE
对所述移动端页面进行二次开发；
[0009]步骤
S40、
基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成
。
[0010]进一步的，所述步骤
S10
还包括：配置所述项目的编辑权限
。
[0011]进一步的，所述步骤
S20
具体为：
[0012]通过设有组件列表区
、
页面设计区
、
页面预览区
、
属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于
uni
‑
ui
封装有若干个组件；
[0013]通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中
。
[0014]进一步的，所述步骤
S30
具体为：
[0015]通过所述页面生成器将移动端页面导出为
VUE
文件进行本地的二次开发后，再导入二次开发后的所述
VUE
文件以生成新的移动端页面，将新的所述移动端页面的配置信息
更新至数据库表
。
[0016]进一步的，所述步骤
S40
具体为：
[0017]基于
uni
‑
app
创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为
JSON
文件，通过所述打包模板将各所述
JSON
文件以及配置文件打包为项目包并导出，以完成移动端页面的生成
。
[0018]第二方面，本专利技术提供了一种基于
VUE
的移动端页面生成系统，包括如下模块：
[0019]项目创建模块，用于基于至少包括名称
、
标题
、
图标以及数据库表的配置文件创建一用于生成移动端页面的项目；
[0020]移动端页面组装模块，用于通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；
[0021]移动端页面再开发模块，用于基于
VUE
对所述移动端页面进行二次开发；
[0022]项目包导出模块，用于基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成
。
[0023]进一步的，所述项目创建模块还用于：配置所述项目的编辑权限
。
[0024]进一步的，所述移动端页面组装模块具体用于：
[0025]通过设有组件列表区
、
页面设计区
、
页面预览区
、
属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于
uni
‑
ui
封装有若干个组件；
[0026]通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中
。
[0027]进一步的，所述移动端页面再开发模块具体用于：
[0028]通过所述页面生成器将移动端页面导出为
VUE
文件进行本地的二次开发后，再导入二次开发后的所述
VUE
文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表
。
[0029]进一步的，所述项目包导出模块具体用于：
[0030]基于
uni
‑
app
创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为
JSON
文件，通过所述打包模板将各所述
JSON
文件以及配置文件打包为项目包并导出，以完成移动端页面的生成
。
[0031]本专利技术的优点在于：
[0032]通过至少包括名称
、
标题
、
图标以及数据库表的配置文件创建一项目，通过设有组件列表区
、
页面设计区
、
页面预览区
、
属性配置区以及工具栏的页面生成器打开项目，而组件列表区基于
uni
‑
ui
封装有若干个组件，在页面生成器中通过点击和拖拽的交互动作组装项目的移动本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种基于
VUE
的移动端页面生成方法，其特征在于：包括如下步骤：步骤
S10、
基于至少包括名称
、
标题
、
图标以及数据库表的配置文件创建一用于生成移动端页面的项目；步骤
S20、
通过页面生成器打开所述项目，在所述页面生成器中通过点击和拖拽的交互动作组装项目的移动端页面，将所述移动端页面的配置信息存储至数据库表中；步骤
S30、
基于
VUE
对所述移动端页面进行二次开发；步骤
S40、
基于所述配置文件以及配置信息将移动端页面导出为项目包，以完成移动端页面的生成
。2.
如权利要求1所述的一种基于
VUE
的移动端页面生成方法，其特征在于：所述步骤
S10
还包括：配置所述项目的编辑权限
。3.
如权利要求1所述的一种基于
VUE
的移动端页面生成方法，其特征在于：所述步骤
S20
具体为：通过设有组件列表区
、
页面设计区
、
页面预览区
、
属性配置区以及工具栏的页面生成器打开所述项目；所述组件列表区基于
uni
‑
ui
封装有若干个组件；通过点击和拖拽的交互动作，将所述组件列表区中的组件拉到页面设计区中以组装项目的移动端页面的结构，通过所述属性配置区配置各组件的对象属性，通过所述页面预览区对移动端页面进行实时预览，通过所述工具栏输入至少包括页面名称和备注信息的页面信息后，通过所述工具栏将移动端页面的配置信息存储至数据库表中
。4.
如权利要求1所述的一种基于
VUE
的移动端页面生成方法，其特征在于：所述步骤
S30
具体为：通过所述页面生成器将移动端页面导出为
VUE
文件进行本地的二次开发后，再导入二次开发后的所述
VUE
文件以生成新的移动端页面，将新的所述移动端页面的配置信息更新至数据库表
。5.
如权利要求1所述的一种基于
VUE
的移动端页面生成方法，其特征在于：所述步骤
S40
具体为：基于
uni
‑
app
创建一打包模板，获取所述项目中所有移动端页面的配置信息，将各所述配置信息逐一转换为
JSON
文件，通过所述打包模板将各所述
JSON
文件以及配置...

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