CN117435192A - Project architecture management method based on Vue framework - Google Patents
Project architecture management method based on Vue framework Download PDFInfo
- Publication number
- CN117435192A CN117435192A CN202311765775.3A CN202311765775A CN117435192A CN 117435192 A CN117435192 A CN 117435192A CN 202311765775 A CN202311765775 A CN 202311765775A CN 117435192 A CN117435192 A CN 117435192A
- Authority
- CN
- China
- Prior art keywords
- plug
- components
- path
- component
- project
- 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
- 238000007726 management method Methods 0.000 title abstract description 13
- 238000011161 development Methods 0.000 claims abstract description 12
- 238000004806 packaging method and process Methods 0.000 claims abstract description 4
- 238000000034 method Methods 0.000 claims description 12
- 238000012545 processing Methods 0.000 claims description 9
- 230000003068 static effect Effects 0.000 claims description 5
- 230000006835 compression Effects 0.000 claims description 4
- 238000007906 compression Methods 0.000 claims description 4
- 230000008571 general function Effects 0.000 claims description 3
- 238000012856 packing Methods 0.000 description 4
- 238000005516 engineering process Methods 0.000 description 3
- 238000012423 maintenance Methods 0.000 description 3
- 230000001419 dependent effect Effects 0.000 description 2
- 241000282414 Homo sapiens Species 0.000 description 1
- 238000004140 cleaning Methods 0.000 description 1
- 238000010276 construction Methods 0.000 description 1
- 238000013461 design Methods 0.000 description 1
- 238000010586 diagram Methods 0.000 description 1
- 230000006870 function Effects 0.000 description 1
- 238000009434 installation Methods 0.000 description 1
- 230000000750 progressive effect Effects 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/30—Creation or generation of source code
- G06F8/36—Software reuse
-
- 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
- G06F8/71—Version control; Configuration management
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/445—Program loading or initiating
- G06F9/44521—Dynamic linking or loading; Link editing at or after load time, e.g. Java class loading
- G06F9/44526—Plug-ins; Add-ons
-
- G—PHYSICS
- G06—COMPUTING; CALCULATING OR COUNTING
- G06F—ELECTRIC DIGITAL DATA PROCESSING
- G06F9/00—Arrangements for program control, e.g. control units
- G06F9/06—Arrangements for program control, e.g. control units using stored programs, i.e. using an internal store of processing equipment to receive or retain programs
- G06F9/44—Arrangements for executing specific programs
- G06F9/455—Emulation; Interpretation; Software simulation, e.g. virtualisation or emulation of application or operating system execution engines
- G06F9/45504—Abstract machines for programme code execution, e.g. Java virtual machine [JVM], interpreters, emulators
- G06F9/45529—Embedded in an application, e.g. JavaScript in a Web browser
Landscapes
- Engineering & Computer Science (AREA)
- Software Systems (AREA)
- Theoretical Computer Science (AREA)
- General Engineering & Computer Science (AREA)
- Physics & Mathematics (AREA)
- General Physics & Mathematics (AREA)
- Human Computer Interaction (AREA)
- Computer Security & Cryptography (AREA)
- Information Retrieval, Db Structures And Fs Structures Therefor (AREA)
Abstract
The invention discloses a project architecture management method based on a Vue frame, which comprises the steps of obtaining a scaffold Vite based on the Vue frame, and configuring a basic path as a path where a current catalogue is located; obtaining plug-in components and storing the plug-in components in corresponding catalogues according to classification; generating a corresponding entry file according to the Vue frame; and starting the terminal and entering the catalog of the project, acquiring an execution command, executing a development task or a packaging task according to the execution command, and calling the plug-in component. The invention realizes a project architecture management method which can flexibly create new projects and simultaneously run a plurality of projects and is used when the projects are unpacked.
Description
Technical Field
The invention relates to the technical field of software development, in particular to a project architecture management method based on a Vue framework.
Background
Vue.js is a set of progressive frameworks that build user interfaces, with the design of bottom-up incremental development, the core library only focuses on the view layer. On the other hand, vue is fully capable of driving complex single page applications that employ single file components and Vue ecosystem supported library development. In practical application, a new Vue frame is needed for each new project, a project foundation package and a package on which the project depends are needed to be installed once for each project, similar projects cannot be placed in the same project, the project cannot be reused and relied on, the same work is required to be repeatedly installed, the working efficiency is low, a large amount of computer disk space is required to be occupied, the technology upgrade or the project framework management method which is convenient to manage in a unified mode cannot be uniformly upgraded when the technology upgrade or the rely on package upgrade is required to be manually upgraded one by one, time and labor are wasted and management is not facilitated, and therefore the project framework management method which can be reused without repeated installation is required to be designed, occupied space is reduced, and convenience is brought.
Disclosure of Invention
The invention aims to provide a project architecture management method based on a Vue framework.
In order to achieve the above purpose, the present invention adopts the following technical scheme:
a method of project architecture management based on a Vue framework, comprising:
obtaining a scaffold Vite based on a Vue frame, and configuring a basic path as a path where a current catalog is located;
acquiring an execution command, acquiring plug-in components and storing the plug-in components in corresponding catalogues according to classification, wherein the acquired plug-in components comprise general components, js general function components, general pictures and style processing components, classifying the corresponding plug-in components according to development requirements, putting the corresponding plug-in components in the corresponding catalogues, traversing all the plug-in components according to the execution command, initializing the corresponding plug-in components after finishing the operation, and selecting whether to clean old files according to the requirements of the execution command;
generating a corresponding entry file according to the Vue frame;
and starting the terminal and entering a catalog of the project, executing a development task or a packaging task according to the execution command, reporting errors when the entry file is not found, ending the execution task, and calling a corresponding plug-in component to execute the corresponding task when the entry file is found.
Further, the acquiring and configuring the basic path as the path where the current directory is located specifically includes:
defining a config catalog according to the vite.config.ts of the scaffold Vite, and configuring a basic route as a route where the current catalog is located;
and configuring a path as an output path of a generated result after executing the command, and configuring a path as a storage path for generating the static resource.
Further, the plug-in components are provided with configuration files after being acquired, wherein the configuration files comprise a starting command, definable IP and port numbers, and each plug-in component is provided with a corresponding dependency library and plug-in code.
Further, after the entry file is found, processing the index html of the entry file, identifying whether CDN introduction dependence is needed, if so, calling a corresponding plug-in component and introducing the needed CDN data into the head label, and calling the plug-in component to compress the picture after the CDN data is introduced, and if not, calling the plug-in component to compress the picture;
judging whether secondary compression is needed or not according to an execution command, if yes, compressing all picture data, then calling a plug-in component to process js files, otherwise, directly calling the plug-in component to process js files, then processing css files, after configuring a path of a resource referenced in the files, storing the picture data, js file data and css file data in a designated directory, and finally generating a read.md file of the project.
After the technical scheme is adopted, compared with the background technology, the invention has the following advantages:
the invention puts the public components and the resource data into the appointed catalogue as the public resources on the basis of the scaffold vite of the Vue framework, and a user can introduce the public components and the resource data in any position in the same way, so that the manual copying is avoided, the later maintenance cost is improved, all the configuration and dependent packages in all projects are put into the appointed catalogue for unified management, the scaffold and the plug-in components are not required to be installed again after the projects are newly built, one execution command can be started, and the time and the space are reduced.
Drawings
FIG. 1 is a process step diagram of the present invention.
Detailed Description
The present invention will be described in further detail with reference to the drawings and examples, in order to make the objects, technical solutions and advantages of the present invention more apparent. It should be understood that the specific embodiments described herein are for purposes of illustration only and are not intended to limit the scope of the invention.
It should be noted that, in the present invention, terms "upper", "lower", "left", "right", "vertical", "horizontal", "inner", "outer", etc. are all based on the orientation or positional relationship shown in the drawings, and are merely for convenience of describing the present invention and simplifying the description, and do not indicate or imply that the apparatus or element of the present invention must have a specific orientation, and thus should not be construed as limiting the present invention.
Referring to fig. 1, the invention discloses a project architecture management method based on a Vue framework, which comprises the following steps:
and acquiring a scaffold Vite based on the Vue framework, and configuring a basic path as a path where the current directory is located.
The base path (baseURL) refers to a base path when an application is built in the Vue framework, and a resource reference path of a subsequent application is to be based on the base path; specifically, for the Vue item, configuration is generally performed in a vue.config.js file; version after Vue CLI 3.3 discards the baseURL and changes to publicPath configuration item. The current directory refers to a current working directory in which a Vue building command is located when running in a command line; in this embodiment, the base path is configured as the path where the current directory is located, that is, the content of the publicPath configuration item in the vue.
The acquisition mode is an API for inquiring the official scaffold Vite document, and custom configuration is carried out on the defined scaffold Vite.
And acquiring an execution command, acquiring plug-in components and storing the plug-in components in a corresponding catalog according to classification, wherein the plug-in components are plug-in components required to be used for project development. The obtained plug-in component comprises a general component, a js general function component and a general picture and style processing component, and is used for preparing subsequent multi-project and unified maintenance. And classifying the corresponding plug-in components according to development requirements, putting the plug-in components into corresponding catalogues, traversing all the plug-in components according to the execution commands, initializing the corresponding plug-in components after finishing the operation, and selecting whether to clean old files according to the requirements of the execution commands.
And generating a corresponding entry file according to the Vue framework.
And starting the terminal and entering a catalog of the project, executing a development task or a packaging task according to the execution command, reporting errors when the entry file is not found, ending the execution task, and calling a corresponding plug-in component to execute the corresponding task when the entry file is found.
In this embodiment, a typical directory structure tree for the Vue item is as follows:
vue_basic
output directory after construction of item
├── node_modules
-dependency of type i/v
├── public
An index html// project main entry file
-other public resources,// and others
├── src
Level-levels// static resources
│└── logo.png
-components// common components
│└── HelloWorld.vue
I-plug ins// plug-in resources
│└── axios.js
' A router// routing configuration
…
The catalog of the item is a configured basic path;
specifically, in the configuration of the embodiment, the base path is configured as the path where the current directory is located, so that the base path, the current directory and the directory where the item is located point to the same path "vue _basic"; the plug-in stored directory refers to the "vue _basic/src/plug/" directory, and the component stored directory refers to the "vue _basic/src/components" directory.
The obtaining and configuring the basic path as the path of the current catalog specifically comprises:
and defining a config catalog according to the vite.config.ts of the scaffold Vite, and configuring a basic route as a route where the current catalog is located.
And configuring a path as an output path of a generated result after executing the command, and configuring a path as a storage path for generating the static resource.
The present embodiment also provides configuration content for the plug-in component, such as: automatic introduction of CDN resources, automatic picture compression, automatic creation of a snowplow map, automatic addition of css browser compatible prefixes, automatic confusion of compressed codes, automatic creation of readme description files and the like.
The plug-in component of this embodiment further includes a obfuscator for obfuscating the compressed code and provided with a corresponding configuration file.
The plug-in components are provided with configuration files after being acquired, the configuration files comprise a starting command, definable IP and port numbers, and each plug-in component is provided with a corresponding dependency library and plug-in code.
When executing the development imperative, when after finding the portal file, the local web service is started, the port number starts from 8080, and if a plurality of projects are developed simultaneously, +1 in turn, e.g., 8081.
When the packing command is executed, after the entry file is found, processing the index html of the entry file, identifying whether CDN introduction dependence is needed, calling a corresponding plug-in component and introducing needed CDN data into the head label if the CDN introduction dependence is needed, and calling the plug-in component to compress the picture after the CDN data is introduced, wherein the plug-in component is called to compress the picture if CDN is not needed.
Judging whether secondary compression is needed or not according to an execution command, if yes, compressing all picture data, then calling a plug-in component to process js files, otherwise, directly calling the plug-in component to process js files, then processing css files, after configuring a path of a resource referenced in the files, storing the picture data, js file data and css file data in a designated directory, and finally generating a read.md file of the project.
After executing the corresponding instruction command, the generated result is put into the designated directory through the designated output path or the storage path of the static resource.
The packing configuration has the main functions of merging, compressing and confusing source codes after the development is completed, packing the source codes into codes which can be identified and operated by a machine but are difficult to read by human beings, automatically creating a release catalog corresponding to the project after the packing is completed, and storing the products in the folder so as to be convenient for management and release.
When the package product is too large, the terminal prompts a warning.
Prompting whether the old file is clear, if so, cleaning, otherwise, reserving.
When the entry file is not found, reporting errors through the terminal, and prompting that the entry file is not found.
The entry file is index.
According to the embodiment, on the basis of the scaffold vite of the Vue framework, the public components and the resource data are placed in the appointed catalogue to serve as the public resources, a user can introduce the public components and the resource data in any position in the same mode, manual copying is avoided, the later maintenance cost is improved, all configuration and dependent packages in all projects are placed in the appointed catalogue to be uniformly managed, the scaffold and plug-in components are not required to be installed again after the projects are newly built, one execution command can be started, and time and space are reduced.
The present invention is not limited to the above-mentioned embodiments, and any changes or substitutions that can be easily understood by those skilled in the art within the technical scope of the present invention are intended to be included in the scope of the present invention. Therefore, the protection scope of the present invention should be subject to the protection scope of the claims.
Claims (4)
1. A method for project architecture management based on a Vue framework, comprising:
obtaining a scaffold Vite based on a Vue frame, and configuring a basic path as a path where a current catalog is located;
acquiring an execution command, acquiring plug-in components and storing the plug-in components in corresponding catalogues according to classification, wherein the acquired plug-in components comprise general components, js general function components, general pictures and style processing components, classifying the corresponding plug-in components according to development requirements, putting the corresponding plug-in components in the corresponding catalogues, traversing all the plug-in components according to the execution command, initializing the corresponding plug-in components after finishing the operation, and selecting whether to clean old files according to the requirements of the execution command;
generating a corresponding entry file according to the Vue frame;
and starting the terminal and entering a catalog of the project, executing a development task or a packaging task according to the execution command, reporting errors when the entry file is not found, ending the execution task, and calling a corresponding plug-in component to execute the corresponding task when the entry file is found.
2. The method for managing project architecture based on the Vue framework according to claim 1, wherein: the obtaining and configuring the basic path as the path of the current catalog specifically comprises:
defining a config catalog according to the vite.config.ts of the scaffold Vite, and configuring a basic route as a route where the current catalog is located;
and configuring a path as an output path of a generated result after executing the command, and configuring a path as a storage path for generating the static resource.
3. The method for managing project architecture based on the Vue framework according to claim 1, wherein: the plug-in components are provided with configuration files after being acquired, the configuration files comprise a starting command, definable IP and port numbers, and each plug-in component is provided with a corresponding dependency library and plug-in code.
4. A method of managing a project architecture based on a Vue framework as claimed in claim 3, wherein: after the entrance file is found, processing index html of the entrance file, identifying whether CDN is needed to be used for introducing dependence, if so, calling a corresponding plug-in component and introducing needed CDN data into a head label, and calling the plug-in component to compress the picture after the CDN data is introduced, and if not, calling the plug-in component to compress the picture;
judging whether secondary compression is needed or not according to an execution command, if yes, compressing all picture data, then calling a plug-in component to process js files, otherwise, directly calling the plug-in component to process js files, then processing css files, after configuring a path of a resource referenced in the files, storing the picture data, js file data and css file data in a designated directory, and finally generating a read.md file of the project.
Priority Applications (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311765775.3A CN117435192A (en) | 2023-12-21 | 2023-12-21 | Project architecture management method based on Vue framework |
Applications Claiming Priority (1)
| Application Number | Priority Date | Filing Date | Title |
|---|---|---|---|
| CN202311765775.3A CN117435192A (en) | 2023-12-21 | 2023-12-21 | Project architecture management method based on Vue framework |
Publications (1)
| Publication Number | Publication Date |
|---|---|
| CN117435192A true CN117435192A (en) | 2024-01-23 |
Family
ID=89555730
Family Applications (1)
| Application Number | Title | Priority Date | Filing Date |
|---|---|---|---|
| CN202311765775.3A Pending CN117435192A (en) | 2023-12-21 | 2023-12-21 | Project architecture management method based on Vue framework |
Country Status (1)
| Country | Link |
|---|---|
| CN (1) | CN117435192A (en) |
Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113296746A (en) * | 2021-05-31 | 2021-08-24 | 成都安恒信息技术有限公司 | System and method for building configurable Vue project scaffold by command line |
| CN116088801A (en) * | 2022-12-21 | 2023-05-09 | 山东未来网络研究院(紫金山实验室工业互联网创新应用基地) | Universal frame based on Vite |
| WO2023092580A1 (en) * | 2021-11-29 | 2023-06-01 | 京东方科技集团股份有限公司 | Page display method and apparatus, storage medium, and electronic device |
-
2023
- 2023-12-21 CN CN202311765775.3A patent/CN117435192A/en active Pending
Patent Citations (3)
| Publication number | Priority date | Publication date | Assignee | Title |
|---|---|---|---|---|
| CN113296746A (en) * | 2021-05-31 | 2021-08-24 | 成都安恒信息技术有限公司 | System and method for building configurable Vue project scaffold by command line |
| WO2023092580A1 (en) * | 2021-11-29 | 2023-06-01 | 京东方科技集团股份有限公司 | Page display method and apparatus, storage medium, and electronic device |
| CN116088801A (en) * | 2022-12-21 | 2023-05-09 | 山东未来网络研究院(紫金山实验室工业互联网创新应用基地) | Universal frame based on Vite |
Non-Patent Citations (4)
| Title |
|---|
| LQ782655835: ""standard-vue-project"", pages 1 - 5, Retrieved from the Internet <URL:《https://github.com/lq782655835/standard-vue-project》> * |
| 唐策: ""vue3.2+vite+elementPlus，build引入CDN依赖包，提升打包速率，vite-plugin-cdn-import"", pages 2 - 7, Retrieved from the Internet <URL:《https://blog.csdn.net/qq_29132907/article/details/131455244》> * |
| 小胖霞: ""vite打包性能优化"", pages 1 - 9, Retrieved from the Internet <URL:《https://juejin.cn/post/7262236524661833784》> * |
| 让梦想众横: ""vue3 + vite 多项目多模块打包"", pages 1 - 7, Retrieved from the Internet <URL:《https://www.cnblogs.com/vmto/p/17276186.html》> * |
Similar Documents
| Publication | Publication Date | Title |
|---|---|---|
| US7334223B2 (en) | Apparatus and method for automatically migrating client server applications to other architectures and platforms | |
| CN108388445B (en) | Continuous integration method based on 'platform + application' mode | |
| CN112835560A (en) | WEB multi-terminal low-code intelligent software development platform | |
| CN105069033A (en) | Method and device for creating database table model | |
| CN103838573A (en) | Application program generation method and device | |
| CN1968154A (en) | System and method for service expansion using plug | |
| CN114064213B (en) | Quick arranging service method and system based on Kubernets container environment | |
| CN106569880B (en) | Method and system for dynamically sharing resources between Android applications | |
| CN106776266B (en) | Configuration method of test tool and terminal equipment | |
| CN111857810A (en) | Front-end development file creating method and device and electronic equipment | |
| CN112000320A (en) | Automatic code generation method, device, equipment and storage medium | |
| CN112947992A (en) | Method and device for managing code version | |
| CN102521008A (en) | Program compiling device and method for compiling program | |
| CN113568604B (en) | Method and device for updating wind control strategy and computer readable storage medium | |
| CN111367802A (en) | Web automatic testing method and device and computer readable storage medium | |
| KR101117165B1 (en) | Web platform unit for mobile terminal connectioned web-application program in heterogeneous operating system | |
| CN114153473A (en) | Module integration method, device, storage medium and electronic equipment | |
| CN114003269A (en) | Component processing method and device, electronic equipment and storage medium | |
| CN117435192A (en) | Project architecture management method based on Vue framework | |
| CN112965694A (en) | Data processing method, device, equipment and storage medium | |
| CN112581617A (en) | Three-dimensional scene equipment model of transformer substation and electrical data connection method | |
| KR20180098584A (en) | Method and apparatus for executing APP program | |
| CN108595160B (en) | Method and storage medium for calling native object by JS | |
| CN106778270B (en) | Malicious application detection method and system | |
| CN116107543A (en) | Project changing method and device based on VUE engineering code project |
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 | ||
| TA01 | Transfer of patent application right |
Effective date of registration: 20240428 Address after: Room 902, No. 33 Xishanwei Road, Software Park Phase III, Xiamen City, Fujian Province, 361024 Applicant after: Xiamen Shequ Information Technology Co.,Ltd. Country or region after: China Address before: Room 902, No. 33 Xishanwei Road, Software Park Phase III, Xiamen City, Fujian Province, 361024 Applicant before: Xiamen Shequ Information Technology Co.,Ltd. Country or region before: China Applicant before: Xiamen Huanqu Information Technology Co.,Ltd. Applicant before: Xiamen Seal Cloud Information Technology Co.,Ltd. |
|
| TA01 | Transfer of patent application right |