CN113110836B - Front-end application componentization development method and device based on VUE - Google Patents
Front-end application componentization development method and device based on VUE Download PDFInfo
- Publication number
- CN113110836B CN113110836B CN202110317913.6A CN202110317913A CN113110836B CN 113110836 B CN113110836 B CN 113110836B CN 202110317913 A CN202110317913 A CN 202110317913A CN 113110836 B CN113110836 B CN 113110836B
- Authority
- CN
- China
- Prior art keywords
- component library
- component
- components
- end application
- development
- 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
- 238000011161 development Methods 0.000 title claims abstract description 58
- 238000000034 method Methods 0.000 title claims abstract description 43
- 230000001419 dependent effect Effects 0.000 claims description 10
- 238000012545 processing Methods 0.000 claims description 5
- 238000004519 manufacturing process Methods 0.000 claims description 4
- 238000004590 computer program Methods 0.000 claims description 3
- 238000007726 management method Methods 0.000 description 8
- 238000013461 design Methods 0.000 description 3
- 238000010586 diagram Methods 0.000 description 3
- 238000005516 engineering process Methods 0.000 description 2
- 230000006870 function Effects 0.000 description 2
- 238000012986 modification Methods 0.000 description 2
- 230000004048 modification Effects 0.000 description 2
- 238000003032 molecular docking Methods 0.000 description 2
- 230000002093 peripheral effect Effects 0.000 description 2
- 238000012216 screening Methods 0.000 description 2
- 230000009286 beneficial effect Effects 0.000 description 1
- 230000005540 biological transmission Effects 0.000 description 1
- 230000000007 visual effect Effects 0.000 description 1
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
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/955—Retrieval from the web using information identifiers, e.g. uniform resource locators [URL]
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F16/00—Information retrieval; Database structures therefor; File system structures therefor
- G06F16/90—Details of database functions independent of the retrieved data types
- G06F16/95—Retrieval from the web
- G06F16/958—Organisation or management of web site content, e.g. publishing, maintaining pages or automatic linking
Abstract
The invention provides a front-end application componentization development method and device based on VUE, which belong to the field of front-end application development, wherein the front-end application componentization development method based on VUE makes page layout and makes a demand model by finishing according to a received URL request; routing is carried out according to the received request of the URL, and corresponding components are selected from a pre-established component library; and assembling according to the demand model and the selected components to complete development of the front-end application. The front-end application is split into the combination of a plurality of components, and the components in the pre-established component library are called for assembly, so that the development of the front-end application is completed, the development period is greatly shortened, and the development cost is reduced.
Description
Technical Field
The invention relates to the field of front-end application development, in particular to a front-end application modular development method and device based on VUE.
Background
The front-end technology is generally divided into front-end design, which can be generally understood as visual design of a website, and front-end development, which is implemented by a front-end code of the website.
In the prior art, when front-end development is performed for a new application, an existing open-source framework in the market is required to be utilized for developing and debugging one page by one, so that a developer is required to learn various open-source front-end technologies and also required to learn business knowledge in the respective fields to complete the development of the front-end application; when a large number of pages need to be developed, the required development period is relatively long, and the development cost is high.
The above problems are currently in need of solution.
Disclosure of Invention
The invention aims to provide a front-end application modular development method and device based on VUE.
The technical scheme adopted for solving the technical problems is as follows: provided is a front-end application componentization development method based on VUE, the method comprising:
receiving a request for at least one URL;
according to the received URL request, finishing and making page layout and making a demand model;
routing is carried out according to the received request of the URL, and corresponding components are selected from a pre-established component library;
and assembling according to the demand model and the selected components to complete development of the front-end application.
Further, the method for establishing the component library comprises the following steps:
respectively developing a basic component library, a tool class component library, a control level business component library and a page level component library;
the dependencies of the individual components are set.
Further, the basic component library, the tool class component library, the control level business component library and the page level component library are managed through NPM or Git Tag.
Further, the dependent categories of the respective components include:
dependency between components of each level;
the components are inter-dependent;
each component has a third party tool which depends on the component;
there is a common third party dependency among the components.
Further, the VUE-based front-end application componentization development method further includes:
managing dependencies and/or version changes in the component library through lerna;
the submitted package is screened by the hub.
Further, the method for managing the dependency and/or version change in the component library through lerna comprises the following steps:
processing the dependency relationship among the components;
version number and/or change log of the management component;
the processed component is published to npm or Git Tag.
Further, the VUE-based front-end application componentization development method further includes:
the method of managing dependencies and/or version changes in a component library by lerna is performed in bulk.
The invention also provides a front-end application componentization development device based on the VUE, which comprises:
a receiving module adapted to receive a request for at least one URL;
the model building module is suitable for finishing and formulating page layout according to the received request of the URL and manufacturing a demand model;
the component selection module is suitable for carrying out routing according to the received request of the URL and selecting a corresponding component from a pre-established component library;
and the assembly module is suitable for assembling according to the demand model and the selected components to complete the development of the front-end application.
The invention also provides a readable storage medium having stored thereon a computer program which when run by a computer performs the steps of the method as described above.
The invention also provides an electronic device, which comprises a memory and a processor; at least one program instruction is stored in the memory; the processor, by loading and executing the at least one program instruction, implements the steps of the method as described above.
The beneficial effects of the invention are as follows: the invention provides a front-end application componentization development method and a device based on VUE, wherein the front-end application componentization development method based on the VUE makes page layout by finishing according to a received URL request and makes a demand model; routing is carried out according to the received request of the URL, and corresponding components are selected from a pre-established component library; and assembling according to the demand model and the selected components to complete development of the front-end application. The front-end application is split into the combination of a plurality of components, and the components in the pre-established component library are called for assembly, so that the development of the front-end application is completed, the development period is greatly shortened, and the development cost is reduced.
Drawings
The invention is further described below with reference to the drawings and examples.
Fig. 1 is a flowchart of a VUE-based front-end application componentization development method provided by an embodiment of the present invention.
Fig. 2 is a schematic block diagram of a VUE-based front-end application component development apparatus according to an embodiment of the present invention.
Fig. 3 is a partial schematic block diagram of an electronic device provided by an embodiment of the present invention.
Detailed Description
The present invention will now be described in detail with reference to the accompanying drawings. The figure is a simplified schematic diagram illustrating the basic structure of the invention only by way of illustration, and therefore it shows only the constitution related to the invention.
Example 1
Referring to fig. 1, the present embodiment provides a method for developing front-end application components based on VUE, which splits the front-end application into a combination of multiple components, and invokes the multiple components in a pre-established component library to assemble, thereby completing development of the front-end application, greatly reducing development cycle and reducing development cost.
Specifically, the method comprises:
s110: a request for at least one URL is received.
In this embodiment, a request for a page address (URL) is received by the micro front end. The micro front end is a micro service-like architecture, and applies the calendar of the micro service to the browser end.
S120: and finishing and formulating the page layout according to the received request of the URL and manufacturing the page layout into a demand model.
In this embodiment, the interface layout is consolidated and customized according to the received URL request, and the interface is designed by performing logic planning and designing the docking interface, so as to manufacture the demand model.
S130: routing is carried out according to the received request of the URL, and corresponding components are selected from a pre-established component library.
In this embodiment, the method for establishing the component library includes:
s131: and respectively developing a basic component library, a tool class component library, a control level business component library and a page level component library.
Specifically, the basic component library, the tool class component library, the control level business component library and the page level component library are managed through NPM or Git Tag.
S132: the dependencies of the individual components are set.
Wherein the dependent categories of the respective components include:
dependency between components of each level;
the components are inter-dependent;
each component has a third party tool which depends on the component;
there is a common third party dependency among the components.
S140: and assembling according to the demand model and the selected components to complete development of the front-end application.
Specifically, after the front-end application completes the preliminary assembly, the front-end application needs to be released to a private warehouse, and the specific steps are as follows: checking which items should be published; adjust version number in lerna. Json; modifying all packages json to point to the correct version; updating all dependencies; creating new git commit and tag; publish (configurable—skip-npm skip issue to npm); the tag and the corresponding commit are sent to push.
In this embodiment, the VUE-based front end application componentization development method further includes:
s150: dependencies and/or version changes in the component library are managed by lerna.
Specifically, the method for managing dependency and/or version changes in a component library through lerna comprises the following steps:
s151: processing the dependency relationship among the components;
s152: version number and/or change log of the management component;
s153: the processed component is published to npm or Git Tag.
And the dependency is managed through the lerna, so that the dependency relationship between the packages is automatically maintained, and the version number is automatically managed when each modification is performed.
In this embodiment, step S150 may be performed in batch, that is, the method of managing dependencies and/or version changes in a component library through lerna is performed in batch.
S160: the submitted package is screened by the hub.
In this embodiment, the submitted component package is normalized in step S160, and qualified component packages are screened and placed in the component library, so that there is no need to worry about the developer not writing codes according to the line rule or writing submitted information at will.
Example 2
Referring to fig. 2, the present embodiment further provides a VUE-based front-end application component development apparatus, where the apparatus includes: the device comprises a receiving module, a model building module, a component selecting module and an assembling module.
In this embodiment, the receiving module is adapted to receive a request of at least one URL; in this embodiment, a request for a page address (URL) is received by the micro front end. The micro front end is a micro service-like architecture, and applies the calendar of the micro service to the browser end.
In this embodiment, the model building module is adapted to arrange and formulate a page layout according to a received request of a URL and make a demand model, specifically, arrange and customize an interface layout according to the received request of the URL, and simultaneously, trample a logic plan to design a docking interface, thereby making the demand model.
In this embodiment, the component selection module is adapted to route according to the received request of the URL, and select a corresponding component from the pre-established component library.
The method for establishing the component library comprises the following steps:
s131: and respectively developing a basic component library, a tool class component library, a control level business component library and a page level component library.
Specifically, the basic component library, the tool class component library, the control level business component library and the page level component library are managed through NPM or Git Tag.
S132: the dependencies of the individual components are set.
Wherein the dependent categories of the respective components include:
dependency between components of each level;
the components are inter-dependent;
each component has a third party tool which depends on the component;
there is a common third party dependency among the components.
In this embodiment, the assembling module is adapted to assemble according to the demand model and the selected components to complete the development of the front-end application. Specifically, after the front-end application completes the preliminary assembly, the front-end application needs to be released to a private warehouse, and the specific steps are as follows: checking which items should be published; adjust version number in lerna. Json; modifying all packages json to point to the correct version; updating all dependencies; creating new git commit and tag; publish (configurable—skip-npm skip issue to npm); the tag and the corresponding commit are sent to push.
In this embodiment, the VUE-based front-end application componentized development apparatus further includes:
the lerna management module is adapted to manage dependencies and/or version changes in the component library by lerna.
Specifically, the method for managing dependency and/or version changes in a component library through lerna comprises the following steps:
s151: processing the dependency relationship among the components;
s152: version number and/or change log of the management component;
s153: the processed component is published to npm or Git Tag.
And the dependency is managed through the lerna, so that the dependency relationship between the packages is automatically maintained, and the version number is automatically managed when each modification is performed.
In this embodiment, the lerna management module may execute in batch, that is, the lerna management module executes in batch the method of managing dependency and/or version changes in the component library through lerna.
In this embodiment, the VUE-based front-end application componentized development apparatus further includes:
and the screening module is suitable for screening the submitted component package through the hub. Specifically, the submitted component package is normalized in step S160, and qualified component packages are screened and placed into the component library, so that there is no need to worry about the fact that the developer writes codes or randomly writes submitted information according to the line rule.
Example 3
The present embodiment provides a readable storage medium having stored thereon a computer program which, when executed by a computer, performs the VUE-based front-end application componentization development method provided in embodiment 1.
The front-end application componentization development method based on the VUE is used for preparing a page layout by sorting according to the received request of the URL and preparing a demand model; routing is carried out according to the received request of the URL, and corresponding components are selected from a pre-established component library; and assembling according to the demand model and the selected components to complete development of the front-end application. The front-end application is split into the combination of a plurality of components, and the components in the pre-established component library are called for assembly, so that the development of the front-end application is completed, the development period is greatly shortened, and the development cost is reduced.
Example 4
Referring to fig. 3, an embodiment of the present invention further provides an electronic device, including: a memory 502 and a processor 501; at least one program instruction is stored in the memory 502; the processor 501 implements the VUE-based front end application componentized development method as provided in embodiment 1 by loading and executing the at least one program instruction.
The memory 502 and the processor 501 are connected by a bus, which may include any number of interconnected buses and bridges, which connect together the various circuits of the one or more processors 501 and the memory 502. The bus may also connect various other circuits such as peripherals, voltage regulators, and power management circuits, which are well known in the art, and therefore, will not be described any further herein. The bus interface provides an interface between the bus and the transceiver. The transceiver may be one element or may be a plurality of elements, such as a plurality of receivers and transmitters, providing a means for communicating with various other apparatus over a transmission medium. The data processed by the processor 501 is transmitted over a wireless medium via an antenna, which further receives the data and transmits the data to the processor 501.
The processor 501 is responsible for managing the bus and general processing and may also provide various functions including timing, peripheral interfaces, voltage regulation, power management, and other control functions. And memory 502 may be used to store data used by processor 501 in performing operations.
In summary, the invention provides a method and a device for developing front-end application components based on VUE, wherein the method for developing front-end application components based on VUE prepares a page layout by arranging according to a received request of URL and prepares a demand model; routing is carried out according to the received request of the URL, and corresponding components are selected from a pre-established component library; and assembling according to the demand model and the selected components to complete development of the front-end application. The front-end application is split into the combination of a plurality of components, and the components in the pre-established component library are called for assembly, so that the development of the front-end application is completed, the development period is greatly shortened, and the development cost is reduced.
While the foregoing is directed to the preferred embodiment of the present invention, other and further embodiments of the invention may be devised without departing from the basic scope thereof, and the scope thereof is determined by the claims that follow. The technical scope of the present invention is not limited to the description, but must be determined according to the scope of claims.
Claims (7)
1. A VUE-based front-end application componentization development method, the method comprising:
receiving a request for at least one URL;
according to the received URL request, finishing and making page layout and making a demand model;
routing is carried out according to the received request of the URL, and corresponding components are selected from a pre-established component library;
assembling according to the demand model and the selected components to complete development of front-end application;
the method for establishing the component library comprises the following steps:
respectively developing a basic component library, a tool class component library, a control level business component library and a page level component library;
setting the dependence of each component;
the basic component library, the tool class component library, the control level business component library and the page level component library are managed through NPM or Git Tag;
the dependent categories of the individual components include:
dependency between components of each level;
the components are inter-dependent;
each component has a third party tool which depends on the component;
there is a common third party dependency among the components.
2. The VUE-based front end application componentization development method of claim 1, further comprising:
managing dependencies and/or version changes in the component library through lerna;
the submitted package is screened by the hub.
3. The VUE-based front end application componentization development method of claim 2, wherein the method of managing dependency and/or version changes in component libraries by lerna comprises:
processing the dependency relationship among the components;
version number and/or change log of the management component;
the processed component is published to npm or Git Tag.
4. The VUE-based front end application componentization development method of claim 2, further comprising:
the method of managing dependencies and/or version changes in a component library by lerna is performed in bulk.
5. A VUE-based front-end application componentized development device, the device comprising:
a receiving module adapted to receive a request for at least one URL;
the model building module is suitable for finishing and formulating page layout according to the received request of the URL and manufacturing a demand model;
the component selection module is suitable for carrying out routing according to the received request of the URL and selecting a corresponding component from a pre-established component library; specifically, the method for establishing the component library comprises the following steps:
respectively developing a basic component library, a tool class component library, a control level business component library and a page level component library;
setting the dependence of each component;
the basic component library, the tool class component library, the control level business component library and the page level component library are managed through NPM or Git Tag;
the dependent categories of the individual components include:
dependency between components of each level;
the components are inter-dependent;
each component has a third party tool which depends on the component;
the components have common third-party dependence;
and the assembly module is suitable for assembling according to the demand model and the selected components to complete the development of the front-end application.
6. A readable storage medium, characterized in that it has stored thereon a computer program which, when executed by a computer, performs the steps of the method according to any of claims 1-4.
7. An electronic device comprising a memory and a processor; at least one program instruction is stored in the memory; the processor is configured to implement the steps of the method according to any one of claims 1-4 by loading and executing the at least one program instruction.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110317913.6A CN113110836B (en) | 2021-03-25 | 2021-03-25 | Front-end application componentization development method and device based on VUE |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202110317913.6A CN113110836B (en) | 2021-03-25 | 2021-03-25 | Front-end application componentization development method and device based on VUE |
Publications (2)
| Publication Number | Publication Date |
|---|---|
| CN113110836A CN113110836A (en) | 2021-07-13 |
| CN113110836B true CN113110836B (en) | 2024-04-02 |
Family
ID=76711010
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202110317913.6A Active CN113110836B (en) | 2021-03-25 | 2021-03-25 | Front-end application componentization development method and device based on VUE |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN113110836B (en) |
Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109325203A (en) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | The device of Web system visualization multiplexing is realized in a kind of automation |
| CN109783078A (en) * | 2018-12-14 | 2019-05-21 | 平安证券股份有限公司 | Stand-alone development method, apparatus, equipment and the storage medium of front end page |
| CN109901838A (en) * | 2019-01-17 | 2019-06-18 | 平安证券股份有限公司 | Front end development approach, device, equipment and storage medium based on modularization |
| CN110442336A (en) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | A kind of web development methods and device, storage medium and electronic equipment |
| CN111427552A (en) * | 2020-02-27 | 2020-07-17 | 深圳壹账通智能科技有限公司 | Front-end component development method and device, computer equipment and storage medium |
| CN111435300A (en) * | 2019-01-15 | 2020-07-21 | 北大方正信息产业集团有限公司 | Web system development method, device, equipment and storage medium |
| CN111562912A (en) * | 2020-04-08 | 2020-08-21 | 北京邮电大学 | Front-end component development method and system for data visualization |
| CN111897553A (en) * | 2020-08-28 | 2020-11-06 | 杭州安恒信息技术股份有限公司 | Project system building method, device, equipment and readable storage medium |
Family Cites Families (2)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN106815007A (en) * | 2015-12-02 | 2017-06-09 | 阿里巴巴集团控股有限公司 | The treating method and apparatus of application program |
| US20180052809A1 (en) * | 2016-08-16 | 2018-02-22 | Microsoft Technology Licensing, Llc | Inferring user interaction with an iframe |
-
2021
- 2021-03-25 CN CN202110317913.6A patent/CN113110836B/en active Active
Patent Citations (8)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN109325203A (en) * | 2018-09-10 | 2019-02-12 | 北京亚鸿世纪科技发展有限公司 | The device of Web system visualization multiplexing is realized in a kind of automation |
| CN109783078A (en) * | 2018-12-14 | 2019-05-21 | 平安证券股份有限公司 | Stand-alone development method, apparatus, equipment and the storage medium of front end page |
| CN111435300A (en) * | 2019-01-15 | 2020-07-21 | 北大方正信息产业集团有限公司 | Web system development method, device, equipment and storage medium |
| CN109901838A (en) * | 2019-01-17 | 2019-06-18 | 平安证券股份有限公司 | Front end development approach, device, equipment and storage medium based on modularization |
| CN110442336A (en) * | 2019-08-05 | 2019-11-12 | 上海钧正网络科技有限公司 | A kind of web development methods and device, storage medium and electronic equipment |
| CN111427552A (en) * | 2020-02-27 | 2020-07-17 | 深圳壹账通智能科技有限公司 | Front-end component development method and device, computer equipment and storage medium |
| CN111562912A (en) * | 2020-04-08 | 2020-08-21 | 北京邮电大学 | Front-end component development method and system for data visualization |
| CN111897553A (en) * | 2020-08-28 | 2020-11-06 | 杭州安恒信息技术股份有限公司 | Project system building method, device, equipment and readable storage medium |
Non-Patent Citations (3)
| Title |
|---|
| Fidelius: Protecting User Secrets from Compromised Browsers;Saba Eskandarian等;《 2019 IEEE Symposium on Security and Privacy (SP)》;20190916;1-17 * |
| Vue多组件仓库搭建;搜狐技术产品;《https://zhuanlan.zhihu.com/p/81236448?from_voters_page=true》;第1-16页 * |
| 基于微前端的旅行社业务支撑系统的设计与实现;杨彩芳;《中国优秀硕士学位论文全文数据库 信息科技辑》;20190915;I139-147 * |
Also Published As
| Publication number | Publication date |
|---|---|
| CN113110836A (en) | 2021-07-13 |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US5303170A (en) | System and method for process modelling and project planning | |
| US9058177B2 (en) | Real software components for achieving real component-based design | |
| US11922101B2 (en) | Integrated circuits as a service | |
| CN108845940B (en) | Enterprise-level information system automatic function testing method and system | |
| US11748536B2 (en) | Automated microprocessor design | |
| CN101286131A (en) | Service test method and service test system | |
| CN101887380A (en) | The distribution of the application that optimization is carried out in multiple platform system | |
| Zheng et al. | Design refresh planning models for managing obsolescence | |
| CN109032850B (en) | Field device debugging system and field device debugging method | |
| CN102799479A (en) | Mainboard with multifunctional basic input output system (BIOS) and test method thereof | |
| CN102455941B (en) | Multitask scheduling method and device based on normal form | |
| US9466037B2 (en) | Versioning and effectivity dates for orchestration business process design | |
| CN113434063B (en) | Information display method, device and equipment | |
| CN113110836B (en) | Front-end application componentization development method and device based on VUE | |
| CN110134598B (en) | Batch processing method, device and system | |
| US9811335B1 (en) | Assigning operational codes to lists of values of control signals selected from a processor design based on end-user software | |
| CN111580733A (en) | Task processing method and device, computing equipment and medium | |
| CN116226078A (en) | Data migration method, device, equipment and storage medium | |
| US20150079960A1 (en) | Systems and methods for dynamic mobile application processing | |
| CN115170062A (en) | Automatic process development method, device and equipment | |
| US9256718B2 (en) | Systems and methods for licensing of mobile applications | |
| US20090307026A1 (en) | Priority-based system for netting available coverage | |
| JP2003140895A (en) | Test system having recombinable software | |
| CN105138342A (en) | Service development method and device | |
| CN110175116B (en) | Test date switching method, device and system |
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 |