一种基于制造技术

本发明专利技术涉及前端技术领域，具体为一种基于

【技术实现步骤摘要】
一种基于Avue实现可视化配置生成Web页面的前端开发的实现方法


[0001]本专利技术涉及前端
，具体为一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法
。

技术介绍

[0002]Web
前端交互页面的制作，需要在
VUE
文件中将
HTML、JS、CSS
三块内容组合编写才能生成完整的前端交互页面
。
[0003]现有技术中，通过人工编写这些内容来生成
Web
前端交互页面，其生成效率较低，且人工组合页面时的出错率较高，配置时候也相对比较长
。
又由于同一系统在不同地区推广时，不同用户对页面
UI
设计要求存在较大的差异
。
系统内容相似，页面样式不同，导致前端开发工作重复，且出错率较高
。

技术实现思路

[0004]本专利技术的目的在于提供一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，以解决上述
技术介绍
中提出的问题
。
[0005]为实现上述目的，本专利技术提供如下技术方案：一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，所述实现方法包括以下步骤：
[0006]搭建项目；
[0007]标准化界面组件封装；
[0008]开发页面设计区；
[0009]生成可供用户直接使用的文件
。
[0010]优选的，使用
vue
‑
cli
脚手架搭建前端项目，使用
NPM
引入
Avue
以及其他相关包
。
[0011]优选的，搭建项目时，利用视口单位实现适配页面，使用
vw、vh
作为
css
的视口单位
。
[0012]优选的，标准化界面组件封装时，基于
Avue
提供的组件采用
HTML、CSS
和
JavaScript
修改构建一套标准化界面组件
。
[0013]优选的，开发页面设计区时，引入
vuedraggable
开发组件拖拽设计区域的内容
。
[0014]优选的，生成可供用户直接使用的文件包括：
[0015]预定义的一整套页面布局的集合，页面框架是预定义的一整套页面布局的集合，采用
HTML、CSS
和
JavaScript
技术封装常用的页面框架，使用自定义过滤函数将源代码过滤为符合规则的可用代码，使得用户直接使用
。
[0016]优选的，生成可供用户直接使用的文件还包括：
[0017]通过
JS
封装函数对界面设计区的组件添加参数配置方法，得到需要的交互组件
。
[0018]优选的，生成可供用户直接使用的文件还包括：
[0019]采用
CSS
技术为页面框架和交互组件设计若干样式文件，同时在页面风格
、
用户交
互
、
系统性能方面进行优化改进，提升用户交互体验和使用满意度
。
[0020]优选的，生成可供用户直接使用的文件还包括：
[0021]筛选出公共样式，采用
Sass
变量将公共样式提取出来，建立全局样式，在组件样式里调用公共样式变量，在需要修改全局样式时，直接方法生成全局样式表，替换原有样式表，实现对样式的全局统一管理
。
[0022]优选的，生成可供用户直接使用的文件还包括：
[0023]对封装的组件提供多个
Class
类，在需要自定义时，自定义类生效，开发人员修改自定义类对应的样式，在需要依赖全局样式时，全局样式生效，组件样式跟随全局样式变化
。
[0024]与现有技术相比，本专利技术的有益效果是：
[0025]本专利技术提出的基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，使用
Avue
前端框架
、
可视化页面配置生成
web
交互页面
、
减少开发工作量；配置人员可以根据业务需要修改页面布局参数与配置，生成符合业务要求及
UI
设计规范的页面；使用
Sass
变量集中式存储管理全局组件相关
CSS
参数；使用
vuex
集中管理设计页面的样式以及组件属性相关内容；配置生成，所见即所得，且出错率低
。
附图说明
[0026]图1为本专利技术标准化界面样式图；
[0027]图2为本专利技术拖拽实现原理图；
[0028]图3为本专利技术生成文件流程图
。
具体实施方式
[0029]为了使本专利技术的目的
、
技术方案进行清楚
、
完整地描述，及优点更加清楚明白，以下结合附图对本专利技术实施例进行进一步详细说明
。
应当理解，此处所描述的具体实施例是本专利技术一部分实施例，而不是全部的实施例，仅仅用以解释本专利技术实施例，并不用于限定本专利技术实施例，本领域普通技术人员在没有做出创造性劳动前提下所获得的所有其他实施例，都属于本专利技术保护的范围
。
[0030]请参阅图1至图3，本专利技术提供一种技术方案：一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，所述实现方法包括以下步骤：
[0031]步骤一 搭建项目
[0032]使用
vue
‑
cli
脚手架搭建前端项目，使用
NPM
引入
Avue
以及其他相关包
。
[0033]npm i@smallwei/avue
‑
S
[0034]import Avue from'@smallwei/avue'
；
[0035]import'@smallwei/avue/lib/index.css'
；
[0036]Vue.use(Avue)
；
[0037]利用视口单位实现适配页面，仅使用
vw、vh
作为
css
的视口单位，可以解决用媒体查询带来的响应式断层问题和
rem
的脚本依赖问题
。
[0038]vw
：
1vw
等于视口宽度的1％
。
[0039]vh
：
1vh
等于视口高度的1％
。
[00本文档来自技高网...

【技术保护点】

【技术特征摘要】
1.
一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，其特征在于：所述实现方法包括以下步骤：搭建项目；标准化界面组件封装；开发页面设计区；生成可供用户直接使用的文件
。2.
根据权利要求1所述的一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，其特征在于：使用
vue
‑
cli
脚手架搭建前端项目，使用
NPM
引入
Avue
以及其他相关包
。3.
根据权利要求2所述的一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，其特征在于：搭建项目时，利用视口单位实现适配页面，使用
vw、vh
作为
css
的视口单位
。4.
根据权利要求1所述的一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，其特征在于：标准化界面组件封装时，基于
Avue
提供的组件采用
HTML、CSS
和
JavaScript
修改构建一套标准化界面组件
。5.
根据权利要求1所述的一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，其特征在于：开发页面设计区时，引入
vuedraggable
开发组件拖拽设计区域的内容
。6.
根据权利要求1所述的一种基于
Avue
实现可视化配置生成
Web
页面的前端开发的实现方法，其特征在于：生成可供用户直接使用的文件包括：预定义的一整套页面布局的集合...

【专利技术属性】
技术研发人员：宋天奇，
申请(专利权)人：浪潮云信息技术股份公司，
类型：发明
国别省市：