中文 | English
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 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.
The configuration of the development environment and the configuration of the related component environment variables are more general. If necessary, see the documentation：
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
// 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
|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 。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 件|
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 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
// -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
yarn upgrade-interactive --latest // Upgrade global dependency package yarn global upgrade-interactive --latest
lerna run lib
lerna run clean
lerna bootstrap or yarn install
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.<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)
The problem is the bug of yarn itself, and although yarn has been upgraded to 1.22.10,it's going to be a while。
In the project, the version of yarn is reduced to 1.19.XX. This approach works only for this project, so that other projects can still use the latest version of yarn,avoiding the problem of installing low versions of yarn globally
yarn policies set-version 1.19.XX // After the .yarn directory is generated, yarn install is executed yarn install
This command generates a .yarn directory and a .yarnrc file in the project, where the yarn version is specified.
This approach is a bit earthy, but you can ignore yarn's problems.
// 1. first query to see whichpackages can be upgraded yarn upgrade-interactive --latest // 2. specified package.json, manually modify version number // 3. clear the component package dependent lerna clean // 4. reassociate dependent lerna bootstrap or yarn install
Workaround: Open PowerShell(just search in Cortana), enter:
Then select Y andthe problem is solved.
|Depending on the package||The version is currently in use||The latest version||Description|
|compression-webpack-plugin||6.1.1||> 7.0.0||Don't upgrade the package at this time, you'll throw an error|
|remark-footnotes||2.0.0||= 3.0.0||Do not upgrade the package at this time to resolve the Nuxt Start Warning issue|
|rollup-plugin-vue||5.1.9||> 6.0.0||Do not upgrade the package at this time, wait for the project to change to Vue3 in the upgrade 级|
|vee-validate||3.4.5||> 4.0.0||Do not upgrade the package at this time, wait for the project to change to Vue3 in the upgrade 级|
|webpack||4.44.2||> 5.9.0||Don't upgrade the package at this time, you need to wait until you upgrade with the relevant Vue version 虑|
Open source is not easy, please respect the author's labor results, if this project can help you, please order a Star to encourage, a cup of coffee is also love. Your support is the biggest driving force for this project.
Welcome to Issue，and I'll try my best to perfect it.
：Code submit frequency
：React/respond to issue & PR etc.
：Well-balanced team members and collaboration
：Recent popularity of project
：Star counts, download counts etc.