preview

1. The overview

2. Display ICON and COLOR Settings

3. Display RULE Settings

Introduction to the

When doing workflow services, I felt the importance of dynamic forms. Therefore, slowly explore and learn, combined with their own needs, built this set of dynamic form system.

  • This system is built based on LERna and YARN workspaces. Monorepo manages code projects (like this approach, like Maven’s modular projects, the most important thing is not to use a bunch of node_modules per project).
  • Built on Vue 2.0 and Vuetify 2.3.xx. Vue3 is not being used, mainly because Vuetify 3 is still under development.
  • Common components are compiled with rollup and do all the performance optimizations that are known to be possible
  • Example module, based on vue Webpack, the project packaging has been optimized.
  • There will be many components in the project, and the original intention was to build a component library (the dynamic form system is itself a component) from the generality of the previous work. I studied the standardized component library and felt that I could not do it at my current level, so I used monorepo.

This project is the front end of the old gun, breadth and depth is certainly not as good as the pure front end, do not like to spray, please forgive and more communication, promote mutual growth.

[I] Development Environment Configuration (Windows)

See my article: Environment variable configuration for THE Vue development environment NPM and Yarn

[two], global installation

If you want to run this system correctly, you need to install some global tools in advance so that some commands can run properly.

Make sure the above environment variables are configured correctly first.

NPM install -g yarn yarn global add lerna@vue /cliCopy the code

[III] Description of the purpose of each package in the project

The package name The current version use instructions
@hecate/core 1.0.0 Common tool code, component package Contains localforage, Lodash, Moment, Shortid, sweetalert2, and generic tool code
@hecate/example 1.0.0 Component sample and running project You can run and use existing components in this project, or you can think of it as a development environment for components
@hecate/form-service 1.0.0 Nuxt environment SSR validation environment for dynamic forms
@hecate/h-button 1.0.0 Custom button components Self-encapsulated button with a Tooltip
@hecate/h-code-editor 1.0.0 Code editor component Code editor based on Codemirror encapsulation, support multiple languages, through the interface menu control. There are code hints and various functions.
@hecate/h-code-mirror 1.0.0 Code editor base components Code editor based on Codemirror encapsulation, support multiple languages, no parameter control interface, need to manually pass parameters
@hecate/h-form-generator 1.0.0 Dynamic form editing component Vuetify – based dynamic form designer
@hecate/h-form-renderer 1.0.0 Dynamic form component Draws component Dynamic form rendering core component, referkoumoul-dev/vuetify-jsonschema-form. At present, the reconstruction has not been completed, and it needs to be improved step by step according to the continuous addition of supporting components
@hecate/h-form-runtime 1.0.0 Dynamic form preview component Display form components based on the generated Schema
@hecate/h-icon-list 1.0.0 Icon selection component An icon query and selection component encapsulated based on Material Design ICONS

[4] common commands

  • Specify a package under which to run the yarn command
Yarn ws:** // Example: Yarn ws:example add lodash -d // Delete package YARN ws:example remove lodash // Run example yarn ws:example serveCopy the code
  • Add components from this project as dependencies (not yet uploaded to NPM)
// Add h-button from project to example Add @hecate/h-button --scope @hecate/example // Use the yarn command to yarn ws:example remov@hecate /h-buttonCopy the code
  • Add dependency packages to the root directory
-d specifies devDependencies. // Add component yarn add lodash -d -w // Delete component yarn add lodash -wCopy the code
  • Upgrading dependency packages
Yarn upgrade-interactive --latest // Upgrade the global dependency package YARN Global upgrade-interactive --latestCopy the code
  • Compiling all components
lerna run lib
Copy the code
  • Empty component DIST
lerna run clean
Copy the code
  • Clear node_modules in the component
lerna clean
Copy the code
  • Reassociate dependency packages in various components
Lerna Bootstrap or YARN installCopy the code
  • Submit code
yarn push
Copy the code

[V] Problem solving

Fault 1: An error occurs when upgrading a dependency package

The following error occurs when you run the yarn upgrade-interactive –latest command to upgrade a dependency package, especially in @hecate/form-service, where the dependency package can be upgraded because Nuxt is used.

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.<anonymous> (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:48755:27)
    at Generator.next (<anonymous>)
    at step (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:310:30)
    at D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:328:14
    at new Promise (<anonymous>)
    at new F (D:\LocalCaches\yarn\global\node_modules\yarn\lib\cli.js:5301:28)
Copy the code

This problem is a yarn Bug, although yarn has been upgraded to 1.22.10, but it is not good for a while.

(1) Solution 1

Reduce the YARN version to 1.19.xx in the project. This method is valid only for this project. In this way, other projects can still use the latest version of YARN, avoiding the problem of installing yarn of an earlier version globally

Yarn policies set-version 1.19.xx //. After the yarn directory is generated, run yarn installCopy the code

This command generates a. Yarn directory and a. Yarnrc file in the project where the yarn version is specified.

(2) Solution two

This method is a bit primitive, but can ignore yarn regardless of the problem.

Update yarn upgrade-interactive --latest // update yarn upgrade-interactive --latest Manually change the version number // 3. Clear the dependency of the component package lerna clean // 4. Associate the dependency with lerna Bootstrap or YARN Install againCopy the code

Fault 2: The script is forbidden when running the command

Solution: Open PowerShell (just search in Cortana) and type:

set-executionpolicy remotesigned
Copy the code

And then you choose Y, and you’re done.

[VI] Dependency description

Do not upgrade the following dependency packages for now

Depend on the package Current Version The latest version instructions
compression-webpack-plugin 6.1.1 > 7.0.0 Do not upgrade the package at this time; errors will be thrown
remark-footnotes 2.0.0 = 3.0.0 Do not upgrade this package at this time, it is intended to fix the Nuxt start Warning issue
rollup-plugin-vue 5.1.9 > 6.0.0 Do not upgrade this package at present. We will upgrade it as Vue3
vee-validate 3.4.5 > 4.0.0 Do not upgrade this package at present. We will upgrade it as Vue3
webpack 4.44.2 > 5.9.0 Do not upgrade this package at this time, wait until you upgrade with the relevant Vue version

The source code

Gitee Address Github address