CN117055949B - 一种自动生成vite配置的方法和系统 - Google Patents
一种自动生成vite配置的方法和系统 Download PDFInfo
- Publication number
- CN117055949B CN117055949B CN202311308657.XA CN202311308657A CN117055949B CN 117055949 B CN117055949 B CN 117055949B CN 202311308657 A CN202311308657 A CN 202311308657A CN 117055949 B CN117055949 B CN 117055949B
- Authority
- CN
- China
- Prior art keywords
- configuration
- vite
- module
- generating
- user
- Prior art date
- Legal status (The legal status is an assumption and is not a legal conclusion. Google has not performed a legal analysis and makes no representation as to the accuracy of the status listed.)
- Active
Links
- 238000000034 method Methods 0.000 title claims abstract description 36
- 230000000007 visual effect Effects 0.000 claims abstract description 28
- 238000004891 communication Methods 0.000 claims description 19
- 230000008859 change Effects 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 10
- 238000012544 monitoring process Methods 0.000 claims description 8
- 238000012795 verification Methods 0.000 claims description 8
- 230000004044 response Effects 0.000 claims description 7
- 238000004806 packaging method and process Methods 0.000 claims description 4
- 238000009877 rendering Methods 0.000 claims 2
- 238000011161 development Methods 0.000 abstract description 10
- 238000005457 optimization Methods 0.000 description 7
- 230000006870 function Effects 0.000 description 5
- 238000004364 calculation method Methods 0.000 description 4
- 238000013507 mapping Methods 0.000 description 4
- 230000008569 process Effects 0.000 description 3
- 238000010276 construction Methods 0.000 description 2
- 238000010586 diagram Methods 0.000 description 2
- 239000000284 extract Substances 0.000 description 2
- 230000010485 coping Effects 0.000 description 1
- 238000005516 engineering process Methods 0.000 description 1
- 238000012986 modification Methods 0.000 description 1
- 230000004048 modification Effects 0.000 description 1
- 238000012856 packing Methods 0.000 description 1
- 230000008092 positive effect Effects 0.000 description 1
- 238000011160 research Methods 0.000 description 1
- 238000009517 secondary packaging Methods 0.000 description 1
- 238000006467 substitution reaction Methods 0.000 description 1
Classifications
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or management
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/20—Software design
- G06F8/24—Object-oriented
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/30—Creation or generation of source code
- G06F8/38—Creation or generation of source code for implementing user interfaces
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/02—Protocols based on web technology, e.g. hypertext transfer protocol [HTTP]
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/01—Protocols
- H04L67/06—Protocols specially adapted for file transfer, e.g. file transfer protocol [FTP]
-
- H—ELECTRICITY
- H04—ELECTRIC COMMUNICATION TECHNIQUE
- H04L—TRANSMISSION OF DIGITAL INFORMATION, e.g. TELEGRAPHIC COMMUNICATION
- H04L67/00—Network arrangements or protocols for supporting network services or applications
- H04L67/34—Network arrangements or protocols for supporting network services or applications involving the movement of software or configuration parameters
-
- Y—GENERAL TAGGING OF NEW TECHNOLOGICAL DEVELOPMENTS; GENERAL TAGGING OF CROSS-SECTIONAL TECHNOLOGIES SPANNING OVER SEVERAL SECTIONS OF THE IPC; TECHNICAL SUBJECTS COVERED BY FORMER USPC CROSS-REFERENCE ART COLLECTIONS [XRACs] AND DIGESTS
- Y02—TECHNOLOGIES OR APPLICATIONS FOR MITIGATION OR ADAPTATION AGAINST CLIMATE CHANGE
- Y02D—CLIMATE CHANGE MITIGATION TECHNOLOGIES IN INFORMATION AND COMMUNICATION TECHNOLOGIES [ICT], I.E. INFORMATION AND COMMUNICATION TECHNOLOGIES AIMING AT THE REDUCTION OF THEIR OWN ENERGY USE
- Y02D10/00—Energy efficient computing, e.g. low power processors, power management or thermal management
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- General Engineering & Computer Science (AREA)
- Theoretical Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Computer Networks & Wireless Communication (AREA)
- Signal Processing (AREA)
- Computer Security & Cryptography (AREA)
- Human Computer Interaction (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
本发明涉及Web前端工程开发技术领域,尤其涉及一种自动生成vite配置的方法和系统,方法包括首先服务器端定时抓取vite官方文档的信息,根据该信息生成预先设计的JSON数据格式;根据JSON数据格式生成可视化初始化界面;接着用户在可视化界面进行操作后将配置数据上传至服务器端;服务器端根据用户提交的配置数据生成vite代码化配置的文件;最后用户下载vite代码化配置文件并添加至前端工程根目录下或覆盖本地工程文件。本发明降低开发者在企业级部署中需要灵活面对各种不同环境而进行配置的难度和人力投入成本。
Description
技术领域
本发明涉及Web前端工程开发技术领域,尤其涉及一种自动生成vite配置的方法和系统。
背景技术
随着Web前端技术的不断发展,目前Vue3已经成为前端工程开发的主流。vite作为Vue3推荐的官方打包工具,对于它的运用在实际开发中是十分重要的。然而vite是通过极其复杂的JavaScript或TypeScript代码配置而成,除vite本身的各种配置属性,其提供的插件也有极多的变种属性,这些对开发者尤其是初级开发者带来了极大的困扰。虽然Vue3官方的脚手架提供了开箱即用的配置,但是这些只能满足一些基础的本地开发或学习的需要,对于企业级部署中需要灵活面对各种不同环境而配置的需求,还需要开发者花费大量的时间和精力对照官方文档进行一一配置。
发明内容
本发明提供了一种自动生成vite配置的方法和系统,解决vite配置繁琐的问题。
为了实现本发明的目的,所采用的技术方案是:一种自动生成vite配置的方法,方法包括以下步骤:
S1、服务器端定时抓取vite官方文档的信息,根据该信息生成预先设计的JSON数据格式;
S2、根据JSON数据格式生成可视化界面,并进行可视化界面的初始化;
S3、用户在可视化界面进行操作后将配置数据上传至服务器端;
S4、服务器端根据用户提交的配置数据生成vite代码化配置的文件;
S5、用户下载vite代码化配置文件并添加至前端工程根目录下或覆盖本地工程文件。
作为本发明的优化方案,服务器端具有完整的生成浏览器端可视化界面vite配置的环境,并通过JSON数据转化为相应的网页组件,以供用户操作。
作为本发明的优化方案,通过JSON数据转化为相应的网页组件,具体生成方式是通过部署在服务器端的Vue3框架搭建的前端工程,对ant-design-vue中Form组件进行二次封装形成BasicForm组件,从而转化JSON数据为BasicForm配置数据,进而再通过编写的useForm方法将配置数据的schemas属性进行转换,useFrom方法内部会使用Vue3框架的watch函数监听schemas值的变化,该监听会在BasicForm组件初始化时被挂载到该组件上,一旦该值发生变化,就将更新的值以赋值给组件属性props的方式传递给组件BasicForm,此时schemas值与组件BasicForm的props相当于建立了一层联系。之后每当schemas值发生变化时,BasicForm组件的props也会随之改变,进而BasicForm组件内部定义的getBindValue计算属性方法会被执行。该计算属性方法被定义为const getBindValue =computed(()=>{...useAttrs(), ...props}),其中useAttrs与computed函数均由Vue3框架提供,该计算属性方法的目的是将BasicForm组件上事件属性与定义的props合并,然后getBindValue计算属性方法被执行后的返回值会通过Vue3框架的v-bind来绑定到Form组件的props上,因此子组件Form的props也会随schemas值的变化而发生变化。最后Vue3框架会由于检测到Form组件的props发生更新变化,从而进一步更新Form的样式、数据或事件的监听方法,如表单的标题、行排序的方式、change事件等等。与此同时,Form组件内部模板template所包含的自定义组件BasicFormItem则使用Vue3框架的v-for来遍历通过props传递过来的schemas内部来确定需要加载渲染的组件是何种组件,例如是Input输入框还是Select下拉框亦或是自定义组件,并将这些组件需要的props值从schemas提取出来传递给组件BasicFormItem,最终BasicFormItem组件会根据Vue3框架响应式原理重新动态渲染生成配置对应的组件。
作为本发明的优化方案,生成配置对应的组件包括Input输入框、Select下拉框、Textarea文本域和Button按钮中的一种或几种。
作为本发明的优化方案,在步骤S4中,服务器端对用户提交的配置数据给出配置建议,并同时对配置数据合法性进行验证,通过合法性校验则生成代码化配置文件,以及需要运行的npm或yarn命令。其中,配置建议主要分为官方建议和大数据统计建议:官方建议主要为从官方文档内获取的建议,比如在选择“部署环境”属性后,浏览器端会通过网络通讯模块发送网络请求,服务器端会根据当前配置在数据库中查找当前属性的键值对映射关系来返回其他关联属性建议的值,如果用户已经对建议的属性进行了填写则提示是否进行修改;大数据统计建议则为服务器端在搜集大量相关vite配置文件后,在数据库中记录不同属性被选择的次数,然后向用户展示不同选项被用户选择的比例,除此以外,该类型建议也会结合官方建议进行适配,当在配置有关联关系的属性时,某一属性在被选择后会提示该属性的其他关联属性被选择的概率。在填写完毕后,服务器端还会进行统一的合法校验,与被建议的值类似,部分属性设置之间有互斥性,其互斥性关系通过数据库保存的键值对映射关系进行保存和查找。例如在选择工程所使用的库时包含有lit-element库,则需要将useDefineForClassFields设置为false,而在大多数情况下该值默认为true。
为了实现本发明的目的,所采用的技术方案是:一种自动生成vite配置的系统,包括服务器端处理模块和用户浏览器端模块;服务器端处理模块包括界面生成模块、配置文件生成模块和信息抓取模块;用户浏览器端模块包括上传模块、下载模块和网络通讯模块;上传模块通过网络通讯模块与界面生成模块连接,下载模块通过网络通讯模块与配置文件生成模块连接;界面生成模块用于生成vite配置的可视化界面,信息抓取模块用于定时抓取vite官方文档的信息;上传模块用于用户上传配置数据并通过网络通讯模块传输至服务器端处理模块,下载模块用于用户通过网络通讯模块下载vite代码化配置文件。
作为本发明的优化方案,界面生成模块具有完整的生成浏览器端可视化界面vite配置的环境,并通过JSON数据转化为相应的网页组件,以供用户操作。
作为本发明的优化方案,配置文件生成模块服务器端对用户提交的配置数据给出配置建议,并同时对配置数据合法性进行验证,通过合法性校验生成代码化配置文件,以及需要运行的npm或yarn命令。
作为本发明的优化方案,下载模块用于下载vite代码化配置文件。
本发明具有积极的效果:本发明通过信息抓取模块定期对vite官方文档中的属性进行整合,一方面能够保证生成的可视化界面所包含的配置属性为最新版本,另一方面也减少了人工整合数据的成本。通过界面生成模块可以生成vite配置属性参数所对应的可视化界面,其原理是通过对自研前端组件BasicForm的调用将变化的配置属性根据Vue的响应式原理转化为相应的操作组件,这可以节约vite文档更新后前端开发人员跟进更新的开发成本,也为用户在浏览器端进行可视化文件配置提供了方便。随后用户通过上传模块所连接的网络通讯模块将填写的配置信息上传至服务器,然后服务器通过配置文件生成模块生成用户所需要的配置文件和需要执行的npm或yarn命令,并通过网络通讯模块所连接的下载模块回传给用户,用户只需将回传的配置文件替换对应的本地文件并执行回传的node命令即可,无需其他多余操作。这些整体上解决了应对高度复杂vite配置的情况下,如何提高前端开发工程基础框架搭建效率的问题。降低开发者在企业级部署中需要灵活面对各种不同环境而进行配置的难度和人力成本。
附图说明
为了更清楚地说明本发明实施例的技术方案,下面将对实施例中所需要使用的附图作简单地介绍,应当理解,以下附图仅示出了本发明的某些实施例,因此不应被看作是对范围的限定,对于本领域普通技术人员来讲,在不付出创造性劳动的前提下,还可以根据这些附图获得其他相关的附图,其中:
图1为自动生成vite配置的方法的流程示意图;
图2为自动生成vite配置的系统的模块示意图。
具体实施方式
为了使本发明的目的、技术方案及优点更加清楚明白,以下结合具体实施例,对本发明进行进一步详细说明。应当理解,此处所描述的具体实施例仅仅用以解释本发明,并不用于限定本发明。
如图1所示,本发明公开了一种自动生成vite配置的方法,方法包括以下步骤:
S1、服务器端定时抓取vite官方文档的信息,根据该信息生成预先设计的JSON数据格式;
S2、根据JSON数据格式生成可视化界面,并进行可视化界面的初始化;
S3、用户在可视化界面进行操作后将配置数据上传至服务器端;
S4、服务器端根据用户提交的配置数据生成vite代码化配置的文件;
S5、用户下载vite代码化配置文件并添加至前端工程根目录下或覆盖本地工程文件。
服务器端具有完整的生成浏览器端可视化界面vite配置的环境,并通过JSON数据转化为相应的网页组件,以供用户操作。
通过JSON数据转化为相应的网页组件,具体生成方式是通过部署在服务器端的Vue3框架搭建的前端工程,对ant-design-vue中Form组件进行二次封装形成BasicForm组件,从而转化JSON数据为BasicForm配置数据,进而再通过编写的useForm方法将配置数据的schemas属性进行转换,useFrom方法内部会使用Vue3框架的watch函数监听schemas值的变化,该监听会在BasicForm组件初始化时被挂载到该组件上,一旦该值发生变化,就将更新的值以赋值给组件属性props的方式传递给组件BasicForm,此时schemas值与组件BasicForm的props相当于建立了一层联系。之后每当schemas值发生变化时,BasicForm组件的props也会随之改变,进而BasicForm组件内部定义的getBindValue计算属性方法会被执行。该计算属性方法被定义为const getBindValue = computed(()=>{...useAttrs(),...props}),其中useAttrs与computed函数均由Vue3框架提供。该计算属性方法的目的是将BasicForm组件上事件属性与定义的props合并,然后getBindValue计算属性方法被执行后的返回值会通过Vue3框架的v-bind来绑定到Form组件的props上,因此子组件Form的props也会随schemas值的变化而发生变化。最后Vue3框架会由于检测到Form组件的props发生更新变化,从而进一步更新Form的样式、数据或事件的监听方法,如表单的标题、行排序的方式、change事件等等。与此同时,Form组件内部模板template所包含的自定义组件BasicFormItem则使用Vue3框架的v-for来遍历通过props传递过来的schemas内部来确定需要加载渲染的组件是何种组件,例如是Input输入框还是Select下拉框亦或是自定义组件,并将这些组件需要的props值从schemas提取出来传递给组件BasicFormItem,最终BasicFormItem组件会根据Vue3框架响应式原理重新动态渲染生成配置对应的组件。
在步骤S4中,服务器端对用户提交的配置数据给出配置建议,并同时对配置数据合法性进行验证,通过合法性校验生成代码化配置文件,以及需要运行的npm或yarn命令。若没有通过合法性校验则会返回警告提示。
其中,配置建议主要分为官方建议和大数据统计建议:官方建议主要为从官方文档内获取的建议,比如在选择“部署环境”属性后,浏览器端会通过网络通讯模块发送网络请求,服务器端会根据当前配置在数据库中查找当前属性的键值对映射关系来返回其他关联属性建议的值,如果用户已经对建议的属性进行了填写则提示是否进行修改;大数据统计建议则为服务器端在搜集大量相关vite配置文件后,在数据库中记录不同属性被选择的次数,然后向用户展示不同选项被用户选择的比例,除此以外,该类型建议也会结合官方建议进行适配,当在配置有关联关系的属性时,某一属性在被选择后会提示该属性的其他关联属性被选择的概率。在填写完毕后,服务器端还会进行统一的合法校验,与被建议的值类似,部分属性设置之间有互斥性,其互斥性关系通过数据库保存的键值对映射关系进行保存和查找。例如在选择工程所使用的库时包含有lit-element库,则需要将useDefineForClassFields设置为false,而在大多数情况下该值默认为true。
如图2所示,一种自动生成vite配置的系统,包括服务器端处理模块和用户浏览器端模块;服务器端处理模块包括界面生成模块、配置文件生成模块和信息抓取模块;用户浏览器端模块包括上传模块、下载模块和网络通讯模块;上传模块通过网络通讯模块与界面生成模块连接,下载模块通过网络通讯模块与配置文件生成模块连接;界面生成模块用于生成vite配置的可视化界面,信息抓取模块用于定时抓取vite官方文档的信息;上传模块用于用户上传配置数据并通过网络通讯模块传输至服务器端处理模块,下载模块用于用户通过网络通讯模块下载vite代码化配置文件。
界面生成模块具有完整的生成浏览器端可视化界面vite配置的环境,并通过JSON数据转化为相应的网页组件,以供用户操作。
配置文件生成模块服务器端对用户提交的配置数据给出配置建议,并同时对配置数据合法性进行验证,通过合法性校验生成代码化配置文件,以及需要运行的npm或yarn命令。
下载模块用于下载vite代码化配置文件,并执行返回的npm或yarn命令。
使用vite打包一个前端工程项目必须要配置对应的配置文件。配置文件主要是通知vite,要调用哪些格式的文件进行什么样的编译和转换、这些文件的入口有哪些、最后编译生成的文件具体以什么规则进行命名。尽管对于初级开发者,Vue3官方的脚手架提供了开箱即用的配置,但是这些只能满足一些基础的本地开发或学习的需要,对于企业级部署中需要灵活面对各种不同环境而配置的需求,还需要开发者花费大量的时间和精力对照官方文档进行一一配置。
具体实施时,根据上面所述的步骤S1,预先设计的JSON数据格式如下:
“{
“配置属性名称”:“{
“type”:“属性TypeScript类型”,
“require”:“是否必填”,
“default”:“官方配置的默认值”,
“info”:“解释说明”,
}”,
}”
根据上面所述JSON数据格式,以root属性为例,格式如下:
“{
“root”:“{
“type”:“string”,
“require”:“false”,
“default”:“process.cwd()”,
“info”:“项目根目录(index.html文件所在的位置)。可以是一个绝对路径,或者一个相对于该配置文件本身的相对路径。”,
}”,
}”
根据上面所述的步骤S2,通过JSON数据转化为相应的网页组件,其生成方式是通过部署在服务器端的Vue3框架搭建的前端工程,对ant-design-vue中Form组件进行二次封装形成BasicForm组件,从而可以转化JSON数据为BasicForm配置数据,进而通过编写的useForm方法将其内部属性schemas替换,替换后将根据Vue3的响应式原理动态渲染生成配置对应组件对应组件。以上述root属性为例,生成的BasicForm配置数据如下:
[{
field: 'root', // v-model绑定的字段名
label: 'root:', // from表单label名
component: 'Input', // 操作的组件类型为Input框
require:false, // 是否必填
default:'process.cwd()', // 默认值
info: '项目根目录(index.html 文件所在的位置)。可以是一个绝对路径,或者一个相对于该配置文件本身的相对路径。', // 提示信息
}]。
本发明在应对高度复杂的vite配置情况下能够大大的降低人力成本并提高前端开发工程基础框架的搭建效率。
需要说明的是,在附图的流程图示出的步骤可以在诸如一组计算机可执行指令的计算机系统中执行,并且,虽然在流程图中示出了逻辑顺序,但是在某些情况下,可以以不同于此处的顺序执行所示出或描述的步骤。
具体的,本发明实施例的装置中各模块实现其功能的具体过程可参见方法实施例中的相关描述,此处不再赘述。
显然,本领域的技术人员应该明白,上述的本发明的各模块或各步骤可以用通用的计算装置来实现,它们可以集中在单个的计算装置上,或者分布在多个计算装置所组成的网络上,可选地,它们可以用计算装置可执行的程序代码来实现,从而,可以将它们存储在存储装置中由计算装置来执行,或者将它们分别制作成各个集成电路模块,或者将它们中的多个模块或步骤制作成单个集成电路模块来实现。这样,本发明不限制于任何特定的硬件和软件结合。
以上所述仅为本发明较佳的具体实施方式,但本发明的保护范围并不局限于此,任何熟悉本技术领域的技术人员在本发明揭露的技术范围内,根据本发明的技术方案及其发明构思加以等同替换或改变,都应涵盖在本发明的保护范围之内。
Claims (6)
1.一种自动生成vite配置的方法,其特征在于:所述的方法包括以下步骤:
S1、服务器端定时抓取vite官方文档的信息,根据该信息生成预先设计的JSON数据格式;
S2、根据JSON数据格式生成可视化界面,并进行可视化界面的初始化;
S3、用户在可视化界面进行操作后将配置数据上传至服务器端;
S4、服务器端根据用户提交的配置数据生成vite代码化配置的文件;
S5、用户下载vite代码化配置文件并添加至前端工程根目录下或覆盖本地工程文件;
所述服务器端具有完整的生成浏览器端可视化界面vite配置的环境,并通过JSON数据转化为相应的网页组件,以供用户操作;
通过JSON数据转化为相应的网页组件,具体生成方式是通过部署在服务器端的Vue3框架搭建的前端工程,对ant-design-vue中Form组件进行二次封装形成BasicForm组件,从而转化JSON数据为BasicForm配置数据,进而再通过编写的useForm方法将配置数据的schemas属性进行转换,useFrom方法内部会使用Vue3框架的watch函数监听schemas值的变化,该监听会在BasicForm组件初始化时被挂载到该组件上,一旦该值发生变化,就将更新的值以赋值给组件属性props的方式传递给BasicForm组件,最终BasicFormItem组件会根据Vue3框架响应式原理重新动态渲染生成配置对应的组件。
2.根据权利要求1所述的一种自动生成vite配置的方法,其特征在于:生成配置对应的组件包括Input输入框、Select下拉框、Textarea文本域和Button按钮中的一种或几种。
3.根据权利要求1所述的一种自动生成vite配置的方法,其特征在于:在步骤S4中,服务器端对用户提交的配置数据给出配置建议,并同时对配置数据合法性进行验证,通过合法性校验则生成代码化配置文件,以及需要运行的npm或yarn命令。
4.一种自动生成vite配置的系统,其特征在于:包括服务器端处理模块和用户浏览器端模块;服务器端处理模块包括界面生成模块、配置文件生成模块和信息抓取模块;用户浏览器端模块包括上传模块、下载模块和网络通讯模块;所述的上传模块通过网络通讯模块与界面生成模块连接,所述的下载模块通过网络通讯模块与配置文件生成模块连接;所述的界面生成模块用于生成vite配置的可视化界面,所述的信息抓取模块用于定时抓取vite官方文档的信息;所述的上传模块用于用户上传配置数据并通过网络通讯模块传输至服务器端处理模块,所述的下载模块用于用户通过网络通讯模块下载vite代码化配置文件;
基于抓取的vite官方文档信息生成预先设计的JSON数据格式,根据JSON 数据格式生成可视化界面;
界面生成模块具有完整的生成浏览器端可视化界面vite配置的环境,并通过JSON数据转化为相应的网页组件,以供用户操作;
通过JSON数据转化为相应的网页组件,具体生成方式是通过部署在服务器端处理模块的Vue3框架搭建的前端工程,对ant-design-vue中Form组件进行二次封装形成BasicForm组件,从而转化JSON数据为BasicForm配置数据,进而再通过编写的useForm方法将配置数据的schemas属性进行转换,useFrom方法内部会使用Vue3框架的watch函数监听schemas值的变化,该监听会在BasicForm组件初始化时被挂载到该组件上,一旦该值发生变化,就将更新的值以赋值给组件属性props的方式传递给BasicForm组件,最终BasicFormItem组件会根据Vue3框架响应式原理重新动态渲染生成配置对应的组件。
5.根据权利要求4所述的一种自动生成vite配置的系统,其特征在于:配置文件生成模块服务器端对用户提交的配置数据给出配置建议,并同时对配置数据合法性进行验证,通过合法性校验生成代码化配置文件,以及需要运行的npm或yarn命令。
6.根据权利要求4所述的一种自动生成vite配置的系统,其特征在于:所述的下载模块用于下载vite代码化配置文件。
Priority Applications (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311308657.XA CN117055949B (zh) | 2023-10-11 | 2023-10-11 | 一种自动生成vite配置的方法和系统 |
Applications Claiming Priority (1)
Application Number | Priority Date | Filing Date | Title |
---|---|---|---|
CN202311308657.XA CN117055949B (zh) | 2023-10-11 | 2023-10-11 | 一种自动生成vite配置的方法和系统 |
Publications (2)
Publication Number | Publication Date |
---|---|
CN117055949A CN117055949A (zh) | 2023-11-14 |
CN117055949B true CN117055949B (zh) | 2024-02-09 |
Family
ID=88666651
Family Applications (1)
Application Number | Title | Priority Date | Filing Date |
---|---|---|---|
CN202311308657.XA Active CN117055949B (zh) | 2023-10-11 | 2023-10-11 | 一种自动生成vite配置的方法和系统 |
Country Status (1)
Country | Link |
---|---|
CN (1) | CN117055949B (zh) |
Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO1993021591A1 (en) * | 1992-04-14 | 1993-10-28 | Teknekron Communications Systems, Inc. | Method for converting a first data collection to a second data collection |
CN110597506A (zh) * | 2019-11-14 | 2019-12-20 | 南京百敖软件有限公司 | 一种前端应用可视化开发工具和使用方法 |
CN114489625A (zh) * | 2022-04-08 | 2022-05-13 | 北京优锘科技有限公司 | 将json格式文本转换为可视化配置工具的方法和装置 |
CN114924726A (zh) * | 2022-06-08 | 2022-08-19 | 北京数联众创科技有限公司 | 一种快速验证应用程序接口的装置及其控制方法 |
CN115098186A (zh) * | 2022-06-20 | 2022-09-23 | 中国平安财产保险股份有限公司 | 项目处理方法、装置、计算机设备及存储介质 |
CN115268886A (zh) * | 2022-06-22 | 2022-11-01 | 福建亿能达信息技术股份有限公司 | 零代码实现数据可视化页面的方法、设计器、设备及介质 |
CN115712793A (zh) * | 2022-11-11 | 2023-02-24 | 兴业银行股份有限公司 | 全景前端文档站点生成方法及系统 |
-
2023
- 2023-10-11 CN CN202311308657.XA patent/CN117055949B/zh active Active
Patent Citations (7)
Publication number | Priority date | Publication date | Assignee | Title |
---|---|---|---|---|
WO1993021591A1 (en) * | 1992-04-14 | 1993-10-28 | Teknekron Communications Systems, Inc. | Method for converting a first data collection to a second data collection |
CN110597506A (zh) * | 2019-11-14 | 2019-12-20 | 南京百敖软件有限公司 | 一种前端应用可视化开发工具和使用方法 |
CN114489625A (zh) * | 2022-04-08 | 2022-05-13 | 北京优锘科技有限公司 | 将json格式文本转换为可视化配置工具的方法和装置 |
CN114924726A (zh) * | 2022-06-08 | 2022-08-19 | 北京数联众创科技有限公司 | 一种快速验证应用程序接口的装置及其控制方法 |
CN115098186A (zh) * | 2022-06-20 | 2022-09-23 | 中国平安财产保险股份有限公司 | 项目处理方法、装置、计算机设备及存储介质 |
CN115268886A (zh) * | 2022-06-22 | 2022-11-01 | 福建亿能达信息技术股份有限公司 | 零代码实现数据可视化页面的方法、设计器、设备及介质 |
CN115712793A (zh) * | 2022-11-11 | 2023-02-24 | 兴业银行股份有限公司 | 全景前端文档站点生成方法及系统 |
Non-Patent Citations (2)
Title |
---|
5G行业专网自管理系统的设计及实现;许晓伟 等;《通信技术》;第55卷(第9期);1232-1237 * |
基于配置文件的web页面自动生成系统;尹航;詹舒波;;《软件》;第35卷(第10期);117-121 * |
Also Published As
Publication number | Publication date |
---|---|
CN117055949A (zh) | 2023-11-14 |
Similar Documents
Publication | Publication Date | Title |
---|---|---|
CN110806863A (zh) | 接口文档生成方法及装置、电子设备、存储介质 | |
US7954107B2 (en) | Method and system for integrating the existing web-based system | |
CN111104635B (zh) | 一种表格网页的生成方法和装置 | |
US20170192877A1 (en) | Mobile application development and deployment | |
CN102214098A (zh) | 一种基于WebKit浏览器引擎的动态页面数据采集方法 | |
CN102495735A (zh) | web 端UI组件应用框架系统 | |
CN100433013C (zh) | 一种通过树型结构展现数据的方法及系统 | |
US7849394B2 (en) | Linked code generation report | |
US9052845B2 (en) | Unified interface for meta model checking, modifying, and reporting | |
CN112114890A (zh) | 小程序的处理方法、装置、设备及存储介质 | |
US7734740B2 (en) | Configuration management apparatus and related methods | |
CN115480801A (zh) | 一种基于Vue框架的多项目开发部署运行方法和系统 | |
CN114254606A (zh) | 微服务框架模型 | |
CN110109684B (zh) | 区块链节点管理代理服务安装方法、电子装置及存储介质 | |
CN117055949B (zh) | 一种自动生成vite配置的方法和系统 | |
JP2001325098A (ja) | アプリケーションプログラムの作成方法、データベース操作方法、項目オブジェクト管理方法、モジュール動作制御方法ならびにデータベース操作方法、項目オブジェクト管理方法およびモジュール動作制御方法を実現するためのプログラムを記録したコンピュータ可読な記録媒体 | |
WO2024066825A1 (zh) | 页面项目开发方法、装置、设备、介质及产品 | |
JP7011752B2 (ja) | ナビゲーションスキーマの分析および生成のシステムおよび方法 | |
Simonsen | PetriCode: a tool for template-based code generation from CPN models | |
CN103226475A (zh) | 转码时实现控件替换的方法及装置 | |
CN107451167A (zh) | 站内点击位的点击数据获取方法和系统 | |
CN114791826A (zh) | 基于参数配置的Jenkins项目运行方法及装置 | |
US20100299619A1 (en) | Model for Reusable User Interface and Logic for Software Wizards | |
CN117149166B (zh) | 电磁水表数据对接代码生成方法及装置 | |
CN112988136B (zh) | 一种用户界面编辑方法及装置 |
Legal Events
Date | Code | Title | Description |
---|---|---|---|
PB01 | Publication | ||
PB01 | Publication | ||
SE01 | Entry into force of request for substantive examination | ||
SE01 | Entry into force of request for substantive examination | ||
GR01 | Patent grant | ||
GR01 | Patent grant |