CN114461210A - VUE (virtual operating Environment) -based componentized page development method, device, equipment and storage medium - Google Patents
VUE (virtual operating Environment) -based componentized page development method, device, equipment and storage medium Download PDFInfo
- Publication number
- CN114461210A CN114461210A CN202111625357.5A CN202111625357A CN114461210A CN 114461210 A CN114461210 A CN 114461210A CN 202111625357 A CN202111625357 A CN 202111625357A CN 114461210 A CN114461210 A CN 114461210A
- Authority
- CN
- China
- Prior art keywords
- vue
- development
- page
- target component
- componentized
- 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.)
- Pending
Links
Images
Classifications
-
- 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
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F8/00—Arrangements for software engineering
- G06F8/70—Software maintenance or 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)
- Human Computer Interaction (AREA)
- Stored Programmes (AREA)
Abstract
The invention discloses a VUE (virtual machine environment) modularization-based page development method, a VUE modularization-based page development device, VUE modularization-based page development equipment and a storage medium, and belongs to the technical field of webpage development, wherein the VUE modularization-based page development method comprises the following steps of: before actual page development, acquiring a preset development requirement of a page development project, and determining and constructing to obtain a target component according to the preset development requirement; and when an actual page is designed by using a Vue. js open source framework in actual page development, selecting the target component conforming to the actual page, calling a target method in the target component, and developing a componentized page. The invention adopts the modularization idea to construct the components, reserves the layout mode of the VUE, quickly performs page layout, combines the service requirements to realize various tool libraries, simplifies the calling flow of the tool libraries, creates a unified standard external interface, unifies the code standard, is convenient for maintenance and management, and finally improves the efficiency of VUE page development.
Description
Technical Field
The invention relates to the field of webpage development, in particular to a VUE-based componentization page development method, a VUE-based componentization page development device, VUE-based componentization page development equipment and a computer-readable storage medium.
Background
As projects become larger and larger, business modules of a single engineering architecture are not clearly divided, the degree of coupling before the modules is large, the later maintenance cost is high, one part is often modified, other coupling modules are possibly affected, and problems are difficult to locate. Meanwhile, the reusability of the repeated working code unit is low, even if the code is copied and reused at the code level, multiple synchronous updates are needed for modification after multiplexing, and the later-stage unified upgrade and maintenance of the same code are inconvenient.
Disclosure of Invention
The invention mainly aims to provide a VUE-based componentized page development method, and aims to solve the technical problem of low VUE page development efficiency in the prior art.
In order to achieve the above object, the present invention provides a VUE-based componentized page development method, including:
before actual page development, acquiring a preset development requirement of a page development project, and determining and constructing a target component according to the preset development requirement;
and when an actual page is designed by using a Vue.js open source framework in actual page development, selecting the target component conforming to the actual page, calling a target method in the target component, and developing a componentized page.
Optionally, the step of determining and constructing a target component according to the preset development requirement includes:
determining a method to be rewritten required by the target assembly and a requirement parameter required by rewriting the method to be rewritten according to the preset development requirement;
and rewriting the method to be rewritten to obtain a target method based on the requirement parameters, and constructing and obtaining the target assembly by one or more target methods.
Optionally, the VUE-based componentized page development method further includes:
before actual page development, if the preset development requirement has reference to the existing first target component, nesting the first target component in the current second target component.
Optionally, the VUE-based componentized page development method further includes:
when an actual page is designed by using a Vue.js open source framework in actual page development, if a modification instruction for the first target component is received, after the first target component is modified, synchronous modification is realized on the second target component at the introduction of the first target component.
Optionally, the step after determining and constructing the target component according to the preset development requirement further includes:
after receiving an instruction to issue the target component, issuing the target component using a packet manager (NPM);
when the actual page is designed using the vue. js open source framework in the actual page development, the target component is installed using the package manager NPM.
Optionally, after the step of selecting the target component conforming to the actual page, the method further includes:
configuring the component parameters in the target method in the options attribute of the DOM element of the target component, or transferring the component parameters in the target method in an initialization method.
Optionally, the VUE-based componentized page development method further includes:
if the component parameters in the target method are configured in the options attribute of the DOM element of the target component, judging whether the component parameters are callback functions;
and if the component parameter is a callback function, configuring the callback function through the specified preset variable acquired from the VUE instance.
In addition, to achieve the above object, the present invention further provides a VUE-based componentized page development apparatus, including:
the system comprises a construction module, a display module and a display module, wherein the construction module is used for acquiring a preset development requirement of a page development project before actual page development, and determining and constructing a target component according to the preset development requirement;
and the development module is used for selecting the target component conforming to the actual page and calling a target method in the target component to develop the componentized page when the actual page is designed by using the Vue.js open source framework in the actual page development.
In addition, to achieve the above object, the present invention further provides a VUE-based componentized page development device, where the VUE-based componentized page development device includes: the page development method comprises a memory, a processor and a VUE-based componentized page development program which is stored on the memory and can run on the processor, wherein when the VUE-based componentized page development program is executed by the processor, the steps of the VUE-based componentized page development method are realized.
In addition, to achieve the above object, the present invention further provides a computer readable storage medium, where a VUE-based componentized page development program is stored, and when being executed by a processor, the VUE-based componentized page development program implements the steps of the VUE-based componentized page development method as described above.
According to the VUE-based componentized page development method, the VUE-based componentized page development equipment and the computer-readable storage medium, the preset development requirements of a page development project are obtained before actual page development, and a target component is determined and constructed according to the preset development requirements; and when an actual page is designed by using a Vue.js open source framework in actual page development, selecting the target component conforming to the actual page, calling a target method in the target component, and developing a componentized page.
In the embodiment, the componentization idea is adopted to construct the components, and one component is a tag of two sentences of HTML, so that the component is very simple to use. Developers are relieved from the complicated JS codes, and the error rate of foreground codes is reduced to a great extent; the layout mode of the VUE is reserved, and therefore page layout is performed quickly. The technical requirements on the foreground of a developer are very low, and only the VUE usage grammar needs to be known, so that more energy is put on the realization of the service function, and the development efficiency is greatly improved. Moreover, various tool libraries are realized by combining diversification of business requirements, the calling process of the tool libraries is simplified, and the tool libraries can be used anywhere only by once installation so as to meet the business development requirements under different daily scenes. Finally, in order to create a unified standard external interface, an API with a unified style is designed for each component interface during development, so that the calling habit of service developers is strengthened, and a coding specification with a unified style is formed. Meanwhile, the development styles in the interfaces are unified, and maintenance and management are facilitated.
Drawings
FIG. 1 is a schematic diagram of a hardware execution environment execution device according to an embodiment of the present invention;
FIG. 2 is a schematic flow chart illustrating an embodiment of a VUE-based componentized page development method according to the present invention;
fig. 3 is a schematic diagram of a technical architecture of an embodiment of a VUE-based componentized page development method of the present invention.
The implementation, functional features and advantages of the objects of the present invention will be further explained with reference to the accompanying drawings.
Detailed Description
It should be understood that the specific embodiments described herein are merely illustrative of the invention and are not intended to limit the invention.
Referring to fig. 1, fig. 1 is a schematic structural diagram of an operating device in a hardware operating environment according to an embodiment of the present invention.
As shown in fig. 1, the operation device may include: a processor 1001, such as a Central Processing Unit (CPU), a communication bus 1002, a user interface 1003, a network interface 1004, and a memory 1005. Wherein a communication bus 1002 is used to enable connective communication between these components. The user interface 1003 may include a Display screen (Display), an input unit such as a Keyboard (Keyboard), and the optional user interface 1003 may also include a standard wired interface, a wireless interface. The network interface 1004 may optionally include a standard wired interface, a WIreless interface (e.g., a WIreless-FIdelity (WI-FI) interface). The Memory 1005 may be a Random Access Memory (RAM) Memory, or may be a Non-Volatile Memory (NVM), such as a disk Memory. The memory 1005 may alternatively be a storage device separate from the processor 1001.
Those skilled in the art will appreciate that the configuration shown in FIG. 1 does not constitute a limitation of the operating device and may include more or fewer components than shown, or some components may be combined, or a different arrangement of components.
As shown in fig. 1, a memory 1005, which is a storage medium, may include therein an operating system, a data storage module, a network communication module, a user interface module, and a VUE-based componentized page development program.
In the operating device shown in fig. 1, the network interface 1004 is mainly used for data communication with other devices; the user interface 1003 is mainly used for data interaction with a user; the processor 1001 and the memory 1005 in the execution device of the present invention may be provided in the execution device, and the execution device calls the VUE-based componentized page development program stored in the memory 1005 through the processor 1001 and performs the following operations:
before actual page development, acquiring a preset development requirement of a page development project, and determining and constructing a target component according to the preset development requirement;
and when an actual page is designed by using a Vue.js open source framework in actual page development, selecting the target component conforming to the actual page, calling a target method in the target component, and developing a componentized page.
Further, the processor 1001 may call the VUE-based componentized page development program stored in the memory 1005, and also perform the following operations:
the step of determining and constructing the target component according to the preset development requirement comprises the following steps:
determining a method to be rewritten required by the target assembly and a requirement parameter required by rewriting the method to be rewritten according to the preset development requirement;
and rewriting the method to be rewritten to obtain a target method based on the requirement parameters, and constructing and obtaining the target assembly by one or more target methods.
Further, the processor 1001 may call the VUE-based componentized page development program stored in the memory 1005, and also perform the following operations:
the VUE-based componentized page development method further comprises the following steps:
before actual page development, if the preset development requirement has reference to the existing first target component, nesting the first target component in the current second target component.
Further, the processor 1001 may call the VUE-based componentized page development program stored in the memory 1005, and also perform the following operations:
the VUE-based componentized page development method further comprises the following steps:
when an actual page is designed by using a Vue.js open source framework in actual page development, if a modification instruction for the first target component is received, after the first target component is modified, synchronous modification is realized on the second target component at the introduction of the first target component.
Further, the processor 1001 may call the VUE-based componentized page development program stored in the memory 1005, and also perform the following operations:
after the step of determining and constructing the target component according to the preset development requirement, the method further includes:
after receiving an instruction to issue the target component, issuing the target component using a packet manager (NPM);
when the actual page is designed using the vue. js open source framework in the actual page development, the target component is installed using the package manager NPM.
Further, the processor 1001 may call the VUE-based componentized page development program stored in the memory 1005, and also perform the following operations:
after the step of selecting the target component conforming to the actual page, the method further comprises the following steps:
configuring the component parameters in the target method in the options attribute of the DOM element of the target component, or transferring the component parameters in the target method in an initialization method.
Further, the processor 1001 may call the VUE-based componentized page development program stored in the memory 1005, and also perform the following operations:
the VUE-based componentized page development method further comprises the following steps:
if the component parameters in the target method are configured in the options attribute of the DOM element of the target component, judging whether the component parameters are callback functions;
and if the component parameter is a callback function, configuring the callback function through the specified preset variable acquired from the VUE instance.
An embodiment of the present invention provides a VUE-based componentized page development method, and referring to fig. 2, fig. 2 is a flowchart illustrating a first embodiment of the VUE-based componentized page development method according to the present invention.
In this embodiment, the VUE-based componentized page development method includes:
step S10: before actual page development, acquiring a preset development requirement of a page development project, and determining and constructing to obtain a target component according to the preset development requirement.
In this embodiment, before actual web page development, preset development requirements of a page development project, including page elements, page layout, and the like, which need to be used, are obtained, which target components are used are determined according to the preset page requirements, and the target components are constructed, so that one or more of the target components can be conveniently selected during actual design.
Step S20: and when an actual page is designed by using a Vue.js open source framework in actual page development, selecting the target component conforming to the actual page, calling a target method in the target component, and developing a componentized page.
In the actual page development process, when an actual page is designed by using the vue.js open source framework, target components which meet page elements, page layout and the like of the actual page are selected, namely, in target components which are realized and constructed in advance, target components which meet the current development requirements and meet the current design requirements are selected, a target method in the selected target components is called, the design requirements are realized, and the componentized page development is completed. The calling of the target method of the target component is very simple, and taking the textinput component as an example, the code is as follows:
(thot. $ refs. cuacct _ code. textinput ("clear"); // that $ refs. cuacct _ CODE acquisition component instance
In addition, it should be noted that it is necessary to ensure that the target component is initialized before calling the target method of the target component, otherwise, an exception may be thrown.
In this embodiment, referring to the schematic technical architecture diagram of fig. 3, the following basic modules are included:
1. js, the framework adopts a lightweight progressive JavaScript front-end framework capable of quickly constructing a data-driven web interface, and a core library only focuses on a view layer, so that the framework is easy to use and is convenient to integrate with a third-party library or an existing project. On the other hand, when the VUE is used in combination with a modern tool chain and various supporting class libraries, the VUE can completely provide a drive for complex single-page application, and from the viewpoint of project development, the development efficiency can be improved, and unnecessary DOM operation can be reduced; and bidirectional data binding, wherein the front end only needs to pay attention to business logic through instructions provided by the framework, and does not pay attention to how the DOM is rendered.
2. ElementUI, a set of VUE 2.0-based desktop end-component libraries for developers, designers, and product managers. On the basis of the component library, in order to facilitate the requirement of service development, the component library is further packaged into an independent standardized basic UI component, and the front-end page can be configured.
3. Loadsh, a JavaScript utility library, and is consistent in performance, modular, high-performance, and highly scalable. For business development, program logic is simplified, LOC is reduced, and code readability is improved.
4. Less, a CSS preprocessing language, which extends the CSS language and adds the characteristics of variable, Mixin, function, etc., so that the CSS is easier to maintain and extend. Meanwhile, the skin changing scheme of the front-end frame in the embodiment is realized, and the packing characteristics of multiple sets of skins can be simultaneously supported to meet the actual requirements of users
5. Babel, a tool chain, is used primarily to translate ECMAScript 2015+ version code into a backwards compatible JavaScript syntax to be able to run in current and old versions of browsers or other environments. The problem of compatibility of the current front-end browser is solved to a great extent, so that developers are more concentrated on business logic development.
The system comprises the following core modules:
the first, ajax module defines the interaction protocol of the front end and the back end, and provides some methods for acquiring the back end data, and supports the current popular promise programming style.
And II, performing ditt, wherein the ditt is a data dictionary module and is used for acquiring a data dictionary of the background.
And thirdly, the utils are tool modules and provide some common tool methods, such as JSON serialization and deserialization methods, date serialization deserialization methods, DES encryption and decryption methods, URL processing methods and the like.
And fourthly, the cookies and the cookies tool library realize related operations of adding, deleting, modifying and checking front-end cookies and are convenient for a front-end caller to use.
Fifth, consts are constant modules that define some constants of the front-end framework.
Sixthly, IndexedDb is a way to store data in a browser. Since the DB is called because the query mode of the client is enriched and the local storage is adopted, the influence of the network on the page data can be effectively reduced. With IndexedDb, the browser can store more data, thereby enriching the application types of the browser end. Meanwhile, the limitation of the cache size of the front-end browser is solved. Meanwhile, the framework realizes API encapsulation of adding, deleting, modifying and checking the IndexedDb database, similar callers clearly realize the internal implementation, and only the data storage needs to be operated.
Seven, date tool library provides relevant API for date relevant operation, such as date formatting, date comparison, etc.
And eighthly, queue-utilis, a queuing tool library provides the currently mainstream web socket protocol queuing application and provides operations such as sign-in and sign-out of the queuing service.
The nine, VUE-utils, VUE tool library provides an extension to the VUE framework prototype approach, currently supporting instance lookup functionality for parent and child components.
Ten, fs-enc and fs-enc mainly provide two methods of encryption and decryption, are encryption algorithm class libraries written by pure JavaScript, can conveniently carry out MD5, SHA1, SHA2, SHA3 and RIPEMD-160 hash in JavaScript, and carry out AES, DES, Rabbit, RC4 and Triple DES encryption and decryption.
The UI framework comprises the following components:
a. the UI component, the UI framework of the embodiment, is a set of components based on Element-UI extension, and is suitable for multi-scenario application development. The framework can realize 23 multi-scenario UI components such as an address component, a message dialog box component, a validaebox check box component, a textinput text box component, a combobox drop-down box component, a table form component, a form component, a telinput telephone component, a mobileinput mobile phone input component, and a fieldset layout component.
b. The echats component and the UI framework of the embodiment realize secondary packaging of an echats tool library, simultaneously support three UIs, namely a line graph, a column graph and a pie graph, simplify the original API calling flow, package a unified calling method externally, and enable development to be simple.
c. And UI (user interface) skin changing support, the UI framework of the embodiment is combined with a web pack packaging tool, and multiple sets of skin styles are supported by one set of UI components under the condition that the original API is not changed. Meanwhile, for a user, the API call logic of the original component is not required to be changed, and only different skin styles are required to be introduced.
d. Unified management, the UI framework of this embodiment introduces a currently popular NPM package management tool in order to solve the problems of unified management, update, release, and the like of the framework version. By using the NPM hosting framework version, all the content supported by the framework can be used by only performing a simple install command on the business.
In this embodiment, for the existing front-end UI interface development, if a development interface is drawn according to a UI designer, for example, when an input box is implemented, code development of page structure elements is required, which results in that redundant and identical codes are formed when a large number of input boxes appear, and a unified UI component cannot be reused. If the common function is logically modified, all the places using the common function need to be modified at the same time. Therefore, the whole project development and the later maintenance are very difficult, so that in the embodiment, the UI framework is reconstructed, the logic of the public part is extracted, the unified method for calling the component UI, the unified style, the unified use, the unified development mode and the like are realized, the difficulty of project maintenance is greatly reduced, the simplicity of the whole project is improved, the development and the maintenance are simpler, and the efficiency of VUE page development is finally improved. In addition, in the embodiment, the modular concept is adopted to construct the components, and one component is a tag of two sentences of HTML, so that the use is very simple. Developers are relieved from the complicated JS codes, and the error rate of foreground codes is reduced to a great extent; the layout mode of the VUE is reserved, and therefore page layout is performed quickly. The technical requirements on the foreground of a developer are very low, and only the VUE usage grammar needs to be known, so that more energy is put on the realization of the service function, and the development efficiency is greatly improved. Moreover, various tool libraries are realized by combining diversification of business requirements, the calling process of the tool libraries is simplified, and the tool libraries can be used anywhere only by once installation so as to meet the business development requirements under different daily scenes. Finally, in order to create a unified standard external interface, an API with a unified style is designed for each component interface during development, so that the calling habit of service developers is strengthened, and a coding specification with a unified style is formed. Meanwhile, the development styles in the interfaces are unified, and maintenance and management are facilitated.
Optionally, the step of determining and constructing a target component according to the preset development requirement includes:
determining a method to be rewritten required by the target assembly and a requirement parameter required by rewriting the method to be rewritten according to the preset development requirement;
and based on the requirement parameters, rewriting the method to be rewritten to obtain a target method, and constructing and obtaining the target assembly by one or more target methods.
In this embodiment, in step S10, before the actual web page is developed, preset development requirements of the page development project are obtained, including page elements, page layout, and the like, which need to be used, and when determining which target components are used according to the preset page requirements and constructing the target components, the method which needs to be rewritten and the parameters which need to be used for rewriting are determined in the determined target components according to the preset development requirements, that is, the parameters needed by the method to be rewritten and the method to be rewritten are determined. And rewriting one or more methods to be rewritten according to the requirement parameters to obtain a target component meeting the requirement of the preset page, wherein the number of the methods to be rewritten specifically included in the target component and the number of the requirement parameters of the methods to be rewritten need to be determined according to the preset development requirement, so as to finish the page development design with the highest efficiency.
Optionally, the VUE-based componentized page development method further includes:
before actual page development, if the preset development requirement has reference to the existing first target component, nesting the first target component in the current second target component.
In this embodiment, before actual page development, nesting is allowed in a target component to meet a preset development requirement, and if an existing target component is referred to in the preset development requirement, the existing target component is nested in the referred target component, so that development meeting the preset development requirement is completed.
Optionally, the VUE-based componentized page development method further includes:
when an actual page is designed by using a Vue.js open source framework in actual page development, if a modification instruction for the first target component is received, after the first target component is modified, synchronous modification is realized on the second target component at the introduction of the first target component.
In this embodiment, in the actual page development process, an actual page is designed by using a vue.js open source framework, and when a referenced target component needs to be modified, if the referenced target component is modified, all other target components referencing the referenced target component are synchronously modified, so that when a common function does not need to be logically modified any more, a corresponding method needs to be found at the same time, and all parts using the method need to be modified.
Optionally, the step after determining and constructing the target component according to the preset development requirement further includes:
after receiving an instruction to issue the target component, issuing the target component using a packet manager (NPM);
when the actual page is designed using the vue. js open source framework in the actual page development, the target component is installed using the package manager NPM.
The UI framework in this embodiment is based on the VUE front-end framework, and all development modes need to meet the requirements of the VUE front-end development specification, and the installation requirements of the VUE front-end development specification are the same as the steps of the VUE for installing the third-party library. The installation command in this embodiment is as follows: npm install szkingdom. Thus, after the target component is built, it is published using the package manager NPM, and where it needs to be used, different target components are installed using the package manager NPM.
Optionally, after the step of selecting the target component conforming to the actual page, the method further includes:
configuring the component parameters in the target method in the options attribute of the DOM element of the target component, or transferring the component parameters in the target method in an initialization method.
In this embodiment, the component parameters of the target component can be configured on the options attribute of the DOM element of the target component, as shown in the following code: kui-textinput ref: "YMT _ CODE": options: "{ title: 'one-CODE general account number', disabled: true, width:400, val: YMT _ CODE, hidden:! YMT _ CODE } "/>. Or the target component initialization also supports automatic initialization of the VUE page, and manual initialization can also be carried out. The manual initialization mode is very simple, and only the corresponding component method needs to be called on the refs object of the current component of the VUE page and the component parameters are input, taking the fieldset component as an example, the component manual initialization code is as follows:
the fieldset is a refs component method extended to a VUE sub-component, two parameters, namely, issowToolbaractive and toolbar, are introduced when the component is initialized, different component parameters are different, and parameters specifically recognizable by a target component refer to a document under docs or view component source codes.
Optionally, the VUE-based componentized page development method further includes:
if the component parameters in the target method are configured in the options attribute of the DOM element of the target component, judging whether the component parameters are callback functions;
and if the component parameter is a callback function, configuring the callback function through the specified preset variable acquired from the VUE instance.
In this embodiment, for a component parameter configured on a VUE element, if the component parameter is a callback function, a variable may be specified during configuration, and this variable can be fetched in the VUE instance as an attribute, otherwise, the parser cannot identify the parameter, as shown below:
< kui-button ref ═ BANK _ OPER _ BTN "+ BAnkKey
return bankInfoConf.OLD_EXT_ORG&&obj.value＝＝'0'||(custExtAttr＝＝'0'&&bankInfoConf.MAIN_FLAG！＝＝'1'&&obj.value＝＝'1')})}"/>
Wherein, an kui-button component is configured in the VUE page, and a handler callback function changeBank info is configured, which must be defined in the corresponding methods of the VUE: method { changebankinfo (index) {.
In addition, an embodiment of the present invention further provides a VUE-based componentized page development apparatus, where the VUE-based componentized page development apparatus includes:
the system comprises a construction module, a display module and a display module, wherein the construction module is used for acquiring a preset development requirement of a page development project before actual page development, and determining and constructing a target component according to the preset development requirement;
and the development module is used for selecting the target component conforming to the actual page and calling a target method in the target component to develop the componentized page when the actual page is designed by using the Vue.js open source framework in the actual page development.
In addition, an embodiment of the present invention further provides a VUE-based componentized page development device, where the VUE-based componentized page development device includes: the page development method comprises a memory, a processor and a VUE-based componentized page development program which is stored on the memory and can run on the processor, wherein when the VUE-based componentized page development program is executed by the processor, the steps of the VUE-based componentized page development method are realized.
In addition, an embodiment of the present invention further provides a computer-readable storage medium, where a VUE-based componentized page development program is stored on the computer-readable storage medium, and when being executed by a processor, the VUE-based componentized page development program implements the steps of the VUE-based componentized page development method described above.
It should be noted that, in this document, the terms "comprises," "comprising," or any other variation thereof, are intended to cover a non-exclusive inclusion, such that a process, method, article, or system that comprises a list of elements does not include only those elements but may include other elements not expressly listed or inherent to such process, method, article, or system. Without further limitation, an element defined by the phrase "comprising an … …" does not exclude the presence of other like elements in a process, method, article, or system that comprises the element.
The above-mentioned serial numbers of the embodiments of the present invention are merely for description and do not represent the merits of the embodiments.
Through the above description of the embodiments, those skilled in the art will clearly understand that the method of the above embodiments can be implemented by software plus a necessary general hardware platform, and certainly can also be implemented by hardware, but in many cases, the former is a better implementation manner. Based on such understanding, the technical solution of the present invention may be embodied in the form of a software product, which is stored in a storage medium (e.g., ROM/RAM, magnetic disk, optical disk) as described above and includes instructions for enabling a terminal device (e.g., a mobile phone, a computer, a server, or a network device) to execute the method according to the embodiments of the present invention.
The above description is only a preferred embodiment of the present invention, and not intended to limit the scope of the present invention, and all modifications of equivalent structures and equivalent processes, which are made by using the contents of the present specification and the accompanying drawings, or directly or indirectly applied to other related technical fields, are included in the scope of the present invention.
Claims (10)
1. A VUE-based componentized page development method is characterized by comprising the following steps:
before actual page development, acquiring a preset development requirement of a page development project, and determining and constructing a target component according to the preset development requirement;
and when an actual page is designed by using a Vue.js open source framework in actual page development, selecting the target component conforming to the actual page, calling a target method in the target component, and developing a componentized page.
2. The VUE-based componentized page development method of claim 1, wherein the step of determining and constructing a target component according to the preset development requirements comprises:
determining a method to be rewritten required by the target assembly and a requirement parameter required by rewriting the method to be rewritten according to the preset development requirement;
and rewriting the method to be rewritten to obtain a target method based on the requirement parameters, and constructing and obtaining the target assembly by one or more target methods.
3. The VUE-based componentized page development method of claim 1, further comprising:
before actual page development, if reference to the existing first target component exists in the preset development requirement, nesting the first target component in the current second target component.
4. The VUE-based componentized page development method of claim 3, wherein the VUE-based componentized page development method further comprises:
when an actual page is designed by using a Vue.js open source framework in actual page development, if a modification instruction for the first target component is received, after the first target component is modified, synchronous modification is realized on the second target component at the introduction of the first target component.
5. The VUE-componentization-based page development method of claim 1, wherein the step after determining and constructing a target component according to the preset development requirements further comprises:
after receiving an instruction to issue the target component, issuing the target component using a packet manager (NPM);
when the actual page is designed using the vue. js open source framework in the actual page development, the target component is installed using the package manager NPM.
6. The VUE-componentization-based page development method of claim 1, wherein the step after said selecting said target component that conforms to said actual page, further comprises:
configuring the component parameters in the target method in the options attribute of the DOM element of the target component, or transferring the component parameters in the target method in an initialization method.
7. The VUE-based componentized page development method of claim 6, further comprising:
if the component parameters in the target method are configured in the options attribute of the DOM element of the target component, judging whether the component parameters are callback functions;
and if the component parameter is a callback function, configuring the callback function through the specified preset variable acquired from the VUE instance.
8. A VUE-based componentized page development apparatus, comprising:
the system comprises a construction module, a display module and a display module, wherein the construction module is used for acquiring a preset development requirement of a page development project before actual page development, and determining and constructing a target component according to the preset development requirement;
and the development module is used for selecting the target component conforming to the actual page and calling a target method in the target component to develop the componentized page when the actual page is designed by using the Vue.js open source framework in the actual page development.
9. A VUE-based componentized page development device, comprising: a memory, a processor, and a VUE-based componentized page development program stored on the memory and executable on the processor, the VUE-based componentized page development program configured to implement the steps of the VUE-based componentized page development method of any of claims 1 to 7.
10. A computer-readable storage medium, wherein the computer-readable storage medium has stored thereon a VUE-based componentized page development program that, when executed by a processor, implements the steps of the VUE-based componentized page development method of any of claims 1 to 7.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111625357.5A CN114461210A (en) | 2021-12-27 | 2021-12-27 | VUE (virtual operating Environment) -based componentized page development method, device, equipment and storage medium |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202111625357.5A CN114461210A (en) | 2021-12-27 | 2021-12-27 | VUE (virtual operating Environment) -based componentized page development method, device, equipment and storage medium |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN114461210A true CN114461210A (en) | 2022-05-10 |
Family
ID=81407767
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202111625357.5A Pending CN114461210A (en) | 2021-12-27 | 2021-12-27 | VUE (virtual operating Environment) -based componentized page development method, device, equipment and storage medium |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN114461210A (en) |
Cited By (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115390802A (en) * | 2022-08-23 | 2022-11-25 | 上海百秋新网商数字科技有限公司 | Componentization development method, system, equipment and storage medium of application program |
| CN116775022A (en) * | 2023-06-19 | 2023-09-19 | 北京全网数商科技股份有限公司 | Front-end application component development method based on VUE |
| CN118170368A (en) * | 2024-05-15 | 2024-06-11 | 杭州飞象企服网络技术有限公司 | Plug-in development method for Web marketing page |
Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1703379A1 (en) * | 2005-03-14 | 2006-09-20 | Research In Motion Limited | System and method for applying development patterns for component based applications |
| CN109146251A (en) * | 2018-07-24 | 2019-01-04 | 武汉空心科技有限公司 | Component- based development method and system |
| CN109542399A (en) * | 2018-10-25 | 2019-03-29 | 深圳市金证科技股份有限公司 | Software development methodology, device, terminal device and computer readable storage medium |
| US20200249921A1 (en) * | 2019-01-31 | 2020-08-06 | Salesforce.Com, Inc. | Structured development for web application frameworks |
| CN111796820A (en) * | 2020-05-21 | 2020-10-20 | 苏宁云计算有限公司 | Method and device for constructing front-end page based on integrated assembly and electronic equipment |
| CN111966336A (en) * | 2020-07-24 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Page generation method and device based on VUE and visual graphic operation |
| CN112162729A (en) * | 2020-09-23 | 2021-01-01 | 北京首钢自动化信息技术有限公司 | VUE-based component development and display method |
| CN113110836A (en) * | 2021-03-25 | 2021-07-13 | 南京飞灵智能科技有限公司 | VUE-based front-end application componentization development method and device |
| US20210349711A1 (en) * | 2020-05-08 | 2021-11-11 | Jpmorgan Chase Bank, N.A. | Method and apparatus for implementing a ui modernization application module |
-
2021
- 2021-12-27 CN CN202111625357.5A patent/CN114461210A/en active Pending
Patent Citations (9)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| EP1703379A1 (en) * | 2005-03-14 | 2006-09-20 | Research In Motion Limited | System and method for applying development patterns for component based applications |
| CN109146251A (en) * | 2018-07-24 | 2019-01-04 | 武汉空心科技有限公司 | Component- based development method and system |
| CN109542399A (en) * | 2018-10-25 | 2019-03-29 | 深圳市金证科技股份有限公司 | Software development methodology, device, terminal device and computer readable storage medium |
| US20200249921A1 (en) * | 2019-01-31 | 2020-08-06 | Salesforce.Com, Inc. | Structured development for web application frameworks |
| US20210349711A1 (en) * | 2020-05-08 | 2021-11-11 | Jpmorgan Chase Bank, N.A. | Method and apparatus for implementing a ui modernization application module |
| CN111796820A (en) * | 2020-05-21 | 2020-10-20 | 苏宁云计算有限公司 | Method and device for constructing front-end page based on integrated assembly and electronic equipment |
| CN111966336A (en) * | 2020-07-24 | 2020-11-20 | 苏州浪潮智能科技有限公司 | Page generation method and device based on VUE and visual graphic operation |
| CN112162729A (en) * | 2020-09-23 | 2021-01-01 | 北京首钢自动化信息技术有限公司 | VUE-based component development and display method |
| CN113110836A (en) * | 2021-03-25 | 2021-07-13 | 南京飞灵智能科技有限公司 | VUE-based front-end application componentization development method and device |
Cited By (5)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN115390802A (en) * | 2022-08-23 | 2022-11-25 | 上海百秋新网商数字科技有限公司 | Componentization development method, system, equipment and storage medium of application program |
| CN115390802B (en) * | 2022-08-23 | 2025-01-21 | 上海百秋新网商数字科技有限公司 | Application component development method, system, device and storage medium |
| CN116775022A (en) * | 2023-06-19 | 2023-09-19 | 北京全网数商科技股份有限公司 | Front-end application component development method based on VUE |
| CN118170368A (en) * | 2024-05-15 | 2024-06-11 | 杭州飞象企服网络技术有限公司 | Plug-in development method for Web marketing page |
| CN118170368B (en) * | 2024-05-15 | 2024-08-23 | 杭州飞象企服网络技术有限公司 | Plug-in development method for Web marketing page |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US12086535B2 (en) | Systems and methods of a script generation engine | |
| US7917888B2 (en) | System and method for building multi-modal and multi-channel applications | |
| CN114461210A (en) | VUE (virtual operating Environment) -based componentized page development method, device, equipment and storage medium | |
| US7707563B2 (en) | System and method for network-based computing | |
| Phanouriou | Uiml: a device-independent user interface markup language | |
| US20170031574A1 (en) | Supporting webpage design and revision irrespective of webpage framework | |
| KR20220002823A (en) | Method, device and electronic equipment for deploying operators in deep learning framework | |
| WO2005074490A2 (en) | System and method for developing and deploying computer applications over a network | |
| US20040268249A1 (en) | Document transformation | |
| CN107092589B (en) | Web server system, screen control display method, and presentation application generation method | |
| CN115495081A (en) | Method and system for generating and loading low-code page component based on JSON data | |
| CN109725932B (en) | Method and device for generating description document of application component | |
| CN116204226A (en) | Application development system, method, device and storage medium | |
| CN113867728A (en) | A converged interface response data, component-based development framework applied to the third-generation modern web front-end | |
| CN107077484B (en) | Generating a web browser view of an application | |
| AU2003271847B2 (en) | Wireless communication device | |
| Berment et al. | Several technical issues for building new lexical bases | |
| CN119271178A (en) | A vue-based ip input component and system | |
| CN117170654A (en) | Development method and device of graphical user interface application program and electronic equipment | |
| CN118092914A (en) | Page generation method, device, equipment, storage medium and low-code generation system | |
| CN116820414A (en) | Front-end customized delivery methods, devices, equipment and storage media | |
| CN119557037A (en) | Method, system, equipment and storage medium for rendering componentized data table | |
| Rouvinen | Dynamic application development in Symbian OS | |
| CN115658065A (en) | Front-end UI framework construction method and device | |
| Synodinos et al. | WOnDA: An extensible multi-platform hypermedia design model |
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 |