Demo : PuzzleDemo
English | 中文
Puzzle is a project structure based on Vue and Webpack5. Business modules can be combined with structure modules like puzzles, and become a different system. All of this is hot pluggable in the production environment. This means you can add new functional modules to your system at any time，even revising the entire system without having to replace the entire project。
In addition, when multiple projects are developed using this structure, even if the modules are packaged by different projects, they can be quickly combined in a production environment. Modules can be reused very simply.
-
Core: Support production environment module hot swap
-
Support flexible combination of business modules
-
The frame of the system as a frame module and also supports multiple coexistences (which means you can easily perform grayscale tests)
- Package the frame/business module as
umdmodule withwebpack - Mounting these modules via LoadJS will append the module object to the
windowobject. - Load the object into the schema by dynamic routing
Installation dependence
npm installBuilding third-party dependencies
npm run dllRun
npm startInstallation dependence
npm installBuilding third-party dependencies
npm run dllBuild, in this step you can choose the frame module and business module that need to be packaged for flexible combination
npm run buildThe front-end project loads the module according to the back-end menu request. For example, the back-end request return format in this project is (data from Alibaba Cloud):
[
{
id: "elastic",
name: "弹性计算",
leaf: false,
children: [
{
id: "ecs",
name: "云服务器 ECS",
leaf: true,
page: "/ecs",
puzzle: "elastic"
},
// ...
],
icon: "aperture",
puzzle: "elastic"
},
{
id: "database",
name: "数据库",
leaf: false,
children: [
// ...
],
icon: "aperture",
puzzle: "database"
},
// ...
]Let us stipulate that the first level directory is the module directory (this can be modified by looking at your own needs here).
So the module ID is elastic, database, etc. The system will request the entry files of all subsystems(modules) in the production environment, try to load the module, and generate routes.
Therefore, by returning the results of different user service modules of different users, it is possible to load different modules, thereby performing authority control.
Similarly, through different user's different frame module return results, you can load different frame to perform grayscale testing and other operations (currently the base used in the system is written in public/config.js, The article is for reference only, the project itself can be freely used).
npm run core
npm run frame --name="xxx"npm run puzzle --name="xxx"The module packaged by the above operation can be directly added to the production environment or replace the corresponding module of the production environment.
This folder contains all packaged configuration files for webpack
config.js：Project configuration for production environment configuration
index.html：HTML template
Schema code
Base module code, multiple base modules placed side by side
Business module code, multiple business modules placed side by side
Mainly used to place static resources, will be directly copied to the production environment static folder
Third-party libraries and public code generated by npm run dll
The production environment code is placed according to a certain structure, and the corresponding module can be freely upgraded.
Schema code generated by npm run core
Base module code generated by npm run frame
Business module code generated by npm run puzzle
Static resources, including package generated third-party libraries and public code, etc.
This structure is only a summary of daily work, specific business scenarios can be modified, the base module can be freely played; the information returned by the business module can also be increased according to requirements; as long as each module follows certain standards and is in the core Uniform processing can achieve pluggable effects.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent