Github | Gitee | Online Demo
## Interface preview #### 1. Overview  #### 2. Icon and color settings display  #### 3. Rule setting display  ## Brief introduction When working as a workflow service, feel the importance of dynamic forms. Therefore, slowly explore and learn, combined with their own needs, set up this set of dynamic form system. - This system is built on lerna and yarn workspaces, managing code projects in a monorepo manner (like this approach, as with Maven's modular engineering, most not using a bunch of node_modules perproject). - Built on Vue 2.0 and Vuetify 2.3.XX. Vue3 is not used,mainly Vuetify 3 is still under development. - Common components are compiled using rollup and do all the performance optimizations that can be done within the existing cognitive scope - The example module, based on the vue webpack approach, is deeply optimized for engineering packaging. - There will be a lot of components in the project, which is to gradually extract the generality involved in previous work and build a component library (the dynamic form system itself is also a component). - Form validation is designed based on VeeValidate and can be dynamically configured through the property panel. - Form designer, highly componentized design, scale by modifying configurations and adding components. - Local browser storage uses localForage,whichsupports indexedDB,WebSQL, and localStorage storage modes (automatically loading the best drivers for you); This project is the front end of the back-end old gun, breadth and depth is certainly not as good as the pure front end, do not like not spray, but also please more inclusive and more exchanges, mutual promotion of mutual growth. ## 1. Development environment configuration(Windows) The configuration of the development environment and the configuration of the related component environment variables are more general. If necessary, see the documentation： [https://blog.csdn.net/Pointer_v/article/details/105432529](https://blog.csdn.net/Pointer_v/article/details/105432529) ## 2. The global installation If you want to run the system correctly, you need to install some global tools in advance so that some orders can function properly. > First make sure that the environment variables above are configured correctly. ``` // Install the component npm install -g yarn yarn global add lerna @vue/cli ``` ## 3. Run to start ``` // 1. Installation yarn install Or lerna bootstrap // 2. Start service yarn ws:example serve or yarn ws:example dev // 3. Access address http://localhost:3000 ``` > Other instructions, see：5. Commands ## 4. Description of the use of each package in the project | The name of the package | Use. | Description | | ------------------------ | ---------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | @hecate/core | Common tool code, component packs | Contains localforage,lodash,moment,shortid,sweetalert2, and generic tool code | | @hecate/example | Component examples and running works | Existing components can be run and used in the project, or they can be understood as component development environments 境 | | @hecate/form-service | Nuxt environment | The SSR validation environment for dynamic forms | | @hecate/h-button | Custom button components | The button with Tooltip encapsulated by itself | | @hecate/h-code-editor | The code editor component | Code editor based on codemirror encapsulation, multilingual support, control through interface menus, etc. There are code tips and various functions. | | @hecate/h-code-mirror | The underlying component of the code editor | Code editor based on codemirror encapsulation, multilingual support, no parameter control interface, need to manually pass parameters | | @hecate/h-form-generator | Dynamic form editing component | Vuetify-based Dynamic Form Designer | | @hecate/h-form-renderer | The dynamic form component draws the component | Dynamic form rendering core components, refer to [koumoul-dev/vuetify-jsonschema-form](https://github.com/koumoul-dev/vuetify-jsonschema-form) 。At present, the refactoring has not been completed, and it needs to be gradually refactored and perfected according to the continuous addition of support components | | @hecate/h-form-runtime | Dynamic form preview component | Displays form components based on the generated Schema | | @hecate/h-icon-list | Icon selects the component | Icon queries and selection components based on the material design icons encapsulation 件 | ## 5. Commands - Specify the package to execute the yarn command under a package ``` yarn ws:** // For example： // Add package(added from npm) yarn ws:example add lodash -D // Delete package yarn ws:example remove lodash // Run example yarn ws:example serve ``` - Add components in this project as dependent packages (not yet uploaded to npm) ``` // Add h-button in the project to example // Note: Bulk addition is not supported, one by one with lerna add @hecate/h-button --scope @hecate/example // Remove components from the project, using the yarn yarn ws:example remove @hecate/h-button ``` - Add a dependency package to the root ``` // -W means workspace, want to operate engineering-grade packages, this parameter can not be missing // -D specifies the meaning of devDependencies // Add dependency yarn add lodash -D -W // Remove dependency yarn add lodash -W ``` - Upgrade dependent packages ``` yarn upgrade-interactive --latest // Upgrade global dependency package yarn global upgrade-interactive --latest ``` - Compile all components ``` lerna run lib ``` - Empty the dist ``` lerna run clean ``` - Clears the node_modules ``` lerna clean ``` - Have dependency packages re-associated across components ``` lerna bootstrap or yarn install ``` - Submit the code to the git ``` yarn push ``` ## 6. Solve the problem ### Case One：There was an error upgrading the dependency package When you upgrade a dependent package using the **yarn upgrade-interactive--latest** command, especially in @hecate/form-service, there are dependency packages that can be upgraded (visually due to the use of Nuxt),and the followingerrors often occur. ``` Invariant Violation: expected workspace package to exist for "autoprefixer" at invariant (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:2314:15) at _loop2 (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:94537:9) at PackageHoister.init (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:94596:19) at PackageLinker.getFlatHoistedTree (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:48744:20) at PackageLinker.