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

[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

The source code

Gitee Address Github address