CN116088801A

CN116088801A - Universal frame based on Vite

Info

Publication number: CN116088801A
Application number: CN202211646326.2A
Authority: CN
Inventors: 林萍萍; 章云鹏; 陈德圳
Original assignee: Shandong Future Network Research Institute Industrial Internet Innovation Application Base Of Zijinshan Laboratory
Current assignee: Shandong Future Network Research Institute Industrial Internet Innovation Application Base Of Zijinshan Laboratory
Priority date: 2022-12-21
Filing date: 2022-12-21
Publication date: 2023-05-09
Anticipated expiration: 2042-12-21
Also published as: CN116088801B

Abstract

The invention discloses a universal framework based on Vite, which comprises a framework bottom layer, a public component library, a global resource library, global variables, a framework core framework, a public instruction set, a service module, a global state management library, a public style library and a public function set. By using the front end frame Vue and the Ant Design Vue of an open source, the front end page can be built by faster help projects, each component is independent and not coupled, only needs to be introduced for use, after the front end frame Vue and the Ant Design Vue are used, developers do not need to be annoyed by the Design and layout of the page, and the front end page is very convenient. The invention has the advantages of modularized development, clear catalogue and service decoupling; vue and peripheral ecological construction, is quick to put on hand, simple and easy to use; the combined API is developed, and the code coupling degree is low; the modification or expansion is simple, and the expandability is high; the atomized style class library improves the page development efficiency.

Description

Universal frame based on Vite

Technical Field

The invention relates to the technical field of computer software, in particular to a universal framework based on Vite.

Background

With the development of the era, the software industry is rapidly updated, application apps and web apps of various industries are appeared, and each app is also in rapid iteration. The current state of the art has made higher demands on the efficiency of development, and how to increase the efficiency and the capacity has been a topic of increasing the productivity.

In web app development, developers have used development of various projects based on weback tools, as time progresses, more modules in the projects become more and more complex in codes, the whole project will occupy more time to run, and development efficiency is not high for a long time, even though weback integrates a hot compiling mode of HMR.

How to improve the development efficiency, increase the productivity, and use the device to be simple, and in addition, as time goes up, the modules are increased, and the frame needs to maintain excellent and rapid running performance. There is currently no effective solution to the above problems.

Disclosure of Invention

The present invention provides a universal frame based on Vite, which can overcome the above-mentioned shortcomings of the prior art.

In order to achieve the technical purpose, the technical scheme of the invention is realized as follows:

a universal framework based on Vite comprises a framework bottom layer, a public component library, a global resource library, global variables, a framework core framework, a public instruction set, a service module, a global state management library, a public style library and a public function set;

the framework bottom layer comprises a basic framework, tool class configuration, environment variables, an entry file and routing configuration; the basic framework is used for constructing a progressive framework of the user interface by adopting vue, and splitting a logically complex component into a plurality of logical attention points and storing the logical attention points into different combined functions so as to realize maximized logical splitting and code multiplexing; in the tool class configuration, a URL route jump tool provided by Vue-router for Vue application programs is adopted, pinia is adopted to carry out a cross-component/page sharing state on data, windi CSS is adopted to rapidly construct a UI library of a front end interface by scanning HTML and CSS and generating a utility program according to requirements, and Ant Design Vue is adopted; the routing configuration is used for scanning sub-routing data under each folder, sorting, summarizing and creating a routing module to be mounted in a frame, and a routing guard mechanism is also included in the routing module to intercept and check each routing node being accessed;

the business module is used for splitting the project into modules according to business logic, reducing the code coupling degree between different modules, separating UI from business data processing, separating business data processing from interfaces, and optimizing the project structure by utilizing the characteristics of mvvm architecture;

further, in the framework bottom layer, the environment variables are used for distinguishing different use environments; the entry file is used for storing protocols, headers and bodies of website items.

Further, the common component library is a sub-component for placing two or more pages; the global resource library is used for storing resource files; the global variable is a common variable used to hold two or more pages.

Further, the common instruction set is an instruction for placing page use; a global state management repository for mounting pinia into items based on the pinia's data store.

Further, a common style gallery for storing a specific CSS code and a theme color configuration of Ant Design Vue; a common function set for holding a closure of common functions used in the project.

Further, the method also comprises login authentication, request interception and data encryption storage.

Furthermore, the login authentication is based on the guard of the routing module, interception is performed before the page jumps, whether the current page can be accessed or not is verified through meta information configuration in the sub-routing, if no login program exists, the login operation is automatically identified and reminded, and the program can automatically store and set effective time after the login.

Further, the request interception adopts a general library of axios, automatically screens a browser/server side and adopts different request modes.

Further, the data encryption storage is a browser-based local cache localStore mechanism, and data to be stored in the program are combined and encrypted for storage.

The invention has the beneficial effects that: according to the invention, the front end frame Vue and the Ant Design Vue with open sources are used, so that the front end page can be built by help projects faster, each component is independent and uncoupled, only needs to be introduced for use, after the front end frame Vue and the Ant Design Vue are used, developers do not need to worry about the Design and layout of the page, and the front end page is very convenient. The invention has the advantages of modularized development, clear catalogue and service decoupling; vue and peripheral ecological construction, is quick to put on hand, simple and easy to use; the combined API is developed, and the code coupling degree is low; the modification or expansion is simple, and the expandability is high; the atomized style class library improves the page development efficiency.

Detailed Description

The following description of the embodiments of the present invention will be made clearly and completely, and it is apparent that the described embodiments are only some embodiments of the present invention, but not all embodiments. All other embodiments, which are derived by a person skilled in the art based on the embodiments of the invention, fall within the scope of protection of the invention.

The Vite-based generic framework according to embodiments of the present invention, abbreviations and key terms are defined as follows:

vite: the French meaning is 'quick', is a novel front-end construction tool, and can remarkably improve front-end development experience;

vue.js: is a JavaScript framework for building a user interface;

vue-router: is an official route of vue. It is deeply integrated with the vue.js core, making it easy to build single page applications with vue.js.

The invention breaks away from the conventional weback tool, and instead uses vite, has plug-in and language support which are not input into the weback, and can even deactivate and package items more quickly than the weback. In the front-end framework selection, the application uses the front-end frameworks Vue and Ant Design Vue of open source.

Vue is an open source JavaScript framework for creating user interfaces, and is also a Web application framework for creating single page applications, aimed at better organizing and simplifying Web development. The core of interest for Vue is the view layer in MVC mode, which can also conveniently obtain data updates and realize view-to-model interaction through specific methods inside the component. In popular terms, vue is an already built empty house, and compared with a library simply using jQuery, code multiplexing can be better realized, and workload is reduced. Compared with the frame of the furniture such as Angular, which is a perfect one, the furniture electric appliance can not be selected by one piece, the user does not like to throw away one piece, even the required user has to use and consumes space ≡! In short, vue does something that is necessary and does not go beyond responsibility.

The Ant Design Vue is a well-known front-end UI component library, can build a front-end page by faster help projects, after the front-end UI component library is used, a developer does not need to Design or even layout of a headache page, and has dozens of components, each component is independent and not coupled, and only needs to be introduced for use, so that the front-end UI component library is very convenient. Even though each component may have a wide variety of configurations, customized theme styles are supported.

The application provides a general-purpose front-end architecture of a set of web apps developed based on vite, and a framework comprises the following steps: framework bottom layer (basic framework, tool class configuration, environment variable, entry file, route configuration), common component library, global resource library, global variable, framework core architecture, common instruction set, business module, global state management library, common style library, common function set. The following is a structural representation of the frame:

├── public

'Favicon' website thumbnail

'static' global resource library

│ ├── images

│ ├── scripts

│ └── ...

├── src

I-components-common assembly

' comprising-const-global variables

Core-core framework

I-directives-common instruction set

'I-modules' business module

-router-routing module

'p-Pinia' -global state manager

'style' global style library

' computer-units-public function set

'root. Vue' UI interface entry

I-root. Js-vue frame portal

Env-development environment variables

Prod-formal environmental variables

Is to test environmental variables

Html-frame entry file

Is a tool configuration of vite. Config. Js-vite

(ii) -wicki. Config. Js-wickss configuration

Base frame of frame bottom layer: version vue version 3.X was used. First, vue is itself a set of progressive frameworks that build user interfaces, with designs developed in bottom-up increments. Not only is easy to be put into hand, but also is convenient to be integrated with a third party library or existing projects. Meanwhile, vue has the characteristics of small volume, good performance, strong flexibility and the like compared with other main flow frames. In the vue. X version, a new Composition API appears, and a logically complex component can be split into multiple logical points of interest and stored in different combined functions to achieve maximized logical splitting and code multiplexing.

Tool class of framework bottom layer: selected is the class library supported by the ecosystem of vue:

vue-router is a URL routing jump tool library provided specifically for vue applications, with which jumps can be conveniently made between components, which is very convenient for developing vue.

Pinia is a repository for vue, and data may be cross-component/page shared state at vue.

Windi CSS is a more used CSS framework that provides faster loading time and faster HMR in development by scanning HTML and CSS and generating utilities on demand, and does not need to be purged in production.

The Ant Design Vue is used for quickly constructing a UI library of the front-end interface, and web projects can be developed easily and quickly by using the UI library.

Environment variables of the framework bottom layer: there may be a plurality of files, each for distinguishing between different usage environments.

Portal files at the bottom of the framework: is a root directory of the web apps, stores the protocol, header, body and other parts of the website project, and is a file on which each web app depends.

Routing configuration of the framework bottom layer: the method is supported by vue-router, sub-route data under each folder are scanned, sorted and summarized, a route module is created and mounted in a frame, a route guard mechanism is contained in the route module, and each route node being accessed is intercepted and checked.

Public component library: placing two or more pages requires the use of sub-assemblies.

Global resource library: and storing the resource files such as pictures, styles, scripts and the like.

Global variable: common variables that need to be used for two or more pages are stored.

Framework core architecture: the structural layout of the website is specified and designed, and the trunk of the website is formed.

Common instruction set: placing pages requires the use of instructions.

Global state management library: a pinia-based data store for mounting pinia into items.

Public style gallery: storing special CSS codes also contains the theme color configuration of Ant Design Vue.

Public function set: the enclosure of the public function that needs to be used in the storage item.

And a service module: according to business logic, the project is split into modules, the code coupling degree between different modules is reduced, the UI is separated from business data processing, the business data processing is separated from an interface, the characteristics of the mvvm architecture are fully utilized, and the project structure is optimized. A typical module directory structure is as follows:

[moduleName]

is a component of private business

Is a private-state manager for a-pinia-service

Is a view business page

Private sub-routing of program. Js-traffic

-other files/folders

A route.js file exists under the service module, so that the automatic introduction and registration of the framework bottom layer to the whole routing module are facilitated.

Besides, the project also comprises basic login authentication, request interception and data encryption storage.

The login authentication is based on the guard of the routing module, interception is carried out before the page jumps, and whether the current page can be accessed or not is verified through meta information configuration in the sub-routing, and if no login program exists, the login operation is automatically identified and reminded. The program will automatically store and set the effective time after logging in.

The request interception adopts a general library of axios, automatically screens a browser/server side and adopts different request modes. The framework adopts XMLHttpRequest, automatically intercepts after the request is initiated, identifies repeated requests and recovers a request pool, converts the request and response data, and automatically converts JSON data.

The data encryption storage is based on a local cache localStore mechanism of a browser, and data to be stored in a program are combined and encrypted for storage, so that information leakage is prevented. Meanwhile, an inspection mechanism is provided, so that the information is effectively prevented from being tampered.

In order to facilitate understanding of the above technical solutions of the present invention, the following describes the above technical solutions of the present invention in detail by a specific usage manner.

In specific use, the Vite-based universal framework according to the present invention is used in comparison by two schemes.

Scheme 1: the scheme can test the comparison of the running speeds of weback and vite on running and hot compiling, and the test template is vue. X.

Step 1: project initialization time comparison, development template code of vue. X was downloaded in the host using weback and vite, respectively. In initial project creation, the vite only needs to input npm create vite@last my-vue-app- - -template vue in the command line, so that the base template of the framework can be created in a few seconds, plus the installation of the dependent package amounts to less than one minute, while using weback requires a minimum of a few minutes.

Step 2: compared with the framework installation package information, the vue framework is introduced into two templates, the vite refers to vue version 3.2.41 version, the weback refers to 3.2.13 version, the large version is basically consistent, the weback template introduces more dependence and comprises eslin and vue scaffold related expansion plug-ins, the configuration is more comprehensive, and the vite only comprises vite basic plug-ins and vue expansion compatible plug-ins, so that the foundation is ensured and the introduction is simplified.

Step 3: the starting time of the test item is 1543ms in the first time, 289ms in the second time, 300ms in the third time, 302ms in the fourth time and 312ms in the fifth time, and the total running time is below 2000 ms; the first running time of weback is 4927ms, the second running time is 2400ms, the third running time is 2215ms, the fourth running time is 2605ms, the fifth running time is 2306ms, and the total running time is more than 2000 ms.

Step 4, testing the time of the project hot compiling mode, wherein a section of the same word description is added in a template grammar in each test, the first hot compiling time of weback is 760ms, the second hot compiling time is 325ms, the third hot compiling time is 267ms, the fourth hot compiling time is 260ms, the fifth hot compiling time is 235ms, and the compiling time required for removing the five sections of word description of the test is 285ms; looking back at the view, the first time of hot-compile is not detailed (instant update after save-down), the second time of hot-compile is not detailed (instant update after save-down), the third time of hot-compile is not detailed (instant update after save-down), the fourth time of hot-compile is not detailed (instant update after save-down), the fifth time of hot-compile is not detailed (instant update after save-down), and the compile time required to remove the tested five-segment word description is not detailed (instant update after save-down). In contrast, the hot compilation of vite is visually insignificant, and the view update of the page is performed immediately after the code is saved, while the weback has a reload process, and the view is refreshed after the reload is completed.

Step 5: the packing time of the test item is 9885ms for the first time, 4893ms for the second time, 4473ms for the third time, 4576ms for the fourth time and 4516ms for the fifth time; the vite calculates the packing time by means of a tool, wherein the first packing time is 1100+ms, the second packing time is 900+ms, the third packing time is 900+ms, the fourth packing time is 900+ms, the fifth packing time is 900+ms, and the floating value is not more than 100ms.

Scheme 2: the present solution will be described in detail with respect to the use of the framework.

Step one: downloading code of the frame, opening a command line tool based on the position of the frame root directory, and inputting the npn install dependency, and when the install index file is dependent, inputting package json in the frame.

Step two: after the installation is finished, the npn run dev operation start item is input, the site program is operated by the vite tool according to the entry file and the route information, and the initial interface is opened in the browser by default.

Step three: CDN script link or style library introduction can be added into index.html of the frame root directory, and the initialization loading style of the website can be modified in the body.

Step four: the framework defaults to globally introducing an Design Vue where the size, internationalization, etc. configuration of the components can be modified.

Step five: the root.vue file of the UI interface entry contains a global picture preview plug-in, can directly call a function in state management to open the function, and is also provided with functions of global loading, skip interception and the like.

Step six: the project is provided with route interception, and the configuration, such as a login authentication function of a route, can be directly modified in a route configuration center.

Step seven: the development of the service module is required to follow the following protocol, a service catalog is created according to the requirement, the service catalog comprises sub pages, sub routes and a local state manager, and because the service catalog adopts an atomization style library, repeated writing style files are not required any more, and the drawing of the page can be completed only by constructing a skeleton of the page in html and filling an atomic class style class. Interactions may be placed at the state manager and introduced when used, without fear of performance issues.

In summary, by means of the above technical solution of the present invention, by using the front end frames Vue and Ant Design Vue of the open source, the front end page can be built by the help item faster, each component is independent and uncoupled, only needs to be used, and after using it, the developer does not need to worry about the Design and layout of the page, and is very convenient. The invention has the advantages of modularized development, clear catalogue and service decoupling; vue and peripheral ecological construction, is quick to put on hand, simple and easy to use; the combined API is developed, and the code coupling degree is low; the modification or expansion is simple, and the expandability is high; the atomized style class library improves the page development efficiency.

The foregoing description of the preferred embodiments of the invention is not intended to be limiting, but rather is intended to cover all modifications, equivalents, alternatives, and improvements that fall within the spirit and scope of the invention.

Claims

1. The universal framework based on Vite is characterized by comprising a framework bottom layer, a public component library, a global resource library, global variables, a framework core framework, a public instruction set, a service module, a global state management library, a public style library and a public function set;

the business module is used for splitting the project into modules according to business logic, reducing the code coupling degree between different modules, separating UI from business data processing, separating business data processing from interfaces, and optimizing the project structure by utilizing the characteristics of mvvm architecture.

2. The Vite-based universal framework of claim 1, wherein in the framework floor, the environment variables are used to distinguish between different usage environments; the entry file is used for storing protocols, headers and bodies of website items.

3. The Vite-based universal framework of claim 1, wherein the common component library is a sub-component for placing two or more pages; the global resource library is used for storing resource files; the global variable is a common variable used to hold two or more pages.

4. The Vite-based universal framework of claim 1, wherein the common instruction set is an instruction for placing page usage; a global state management repository for mounting pinia into items based on the pinia's data store.

5. The Vite-based universal framework of claim 1, wherein a common style gallery is used to store a specific CSS code and a theme color configuration of Ant Design Vue; a common function set for holding a closure of common functions used in the project.

6. The Vite-based universal framework of claim 1, further comprising login authentication, request interception, data encryption storage.

7. The Vite-based universal framework of claim 6, wherein the login authentication is based on a guard of the routing module, interception is performed before the page jumps, and the meta information configuration in the sub-route is used for verifying whether the current page can be accessed only by logging in, if no logging program exists, the logging operation is automatically identified and reminded, and the logging program is automatically stored and set with valid time.

8. The Vite-based universal framework of claim 6, wherein the request interception uses a universal library of axios to automatically screen the browser/server and adopts different request modes.

9. The Vite-based universal framework of claim 6, wherein the data encryption storage is a browser-based local cache local store mechanism, and the data to be stored in the program is combined and encrypted for storage.