基于Vuetify的Vue动态表单编辑器及代码生成器

预览

1. 总览

2. ICON 和 COLOR 设置展现

3. RULE 设置展现

简介

在作工做流服务时，深感动态表单的重要性。因此，慢慢摸索和学习，结合本身的需求，搭建了本套动态表单系统。

• 本系统是基于 lerna 和 yarn workspaces 构建的， monorepo 方式管理代码的项目（很喜欢这种方式，和 Maven 的模块化工程同样，最主要是不用每一个项目一堆 node_modules）
• 基于 Vue 2.0 和 Vuetify 2.3.XX 构建。没有使用 Vue3，主要是 Vuetify 3 还在开发中。
• 共性组件采用 rollup 进行编译，而且作了已有认知范围内，可以作到的全部性能优化处理
• example 模块，基于 vue webpack 方式，对工程打包进行了深刻优化。
• 项目中会有不少组件，本来是想把以往工做中涉及的通用性的东西，逐步构建出一个组件库（这个动态表单系统自己也是一个组件）。研究过一下规范化的组件库，感受以本人如今水平作不到，所以才采用了 monorepo 方式。

本项目是后端老炮撸的前端，广度和深度确定不如纯前端，不喜勿喷，也请多多包涵以及多多交流，互相促进互相成长。

• 在线体验

[一]、开发环境配置（Windows）

参考个人文章：Vue开发环境npm和Yarn的环境变量配置

[二]、全局安装

若是要正确运行本系统，须要提早安装一些全局工具，以便一些命令能够正常运行。

请首先确保上面的环境变量配置正确。

// 请提早全局安装一下组件
npm install -g yarn
yarn global add lerna @vue/cli

[三]、工程中各个包用途说明

包名	当前版本	用途	说明
@hecate/core	1.0.0	通用工具代码、组件包	包含 localforage、lodash、moment、shortid、sweetalert2 以及通用工具代码
@hecate/example	1.0.0	组件示例及运行工程	能够在该工程中，运行和使用已有组件，也能够理解为组件的开发环境
@hecate/form-service	1.0.0	Nuxt 环境	动态表单的 SSR 验证环境
@hecate/h-button	1.0.0	自定义按钮组件	本身封装的有 Tooltip 的 button
@hecate/h-code-editor	1.0.0	代码编辑器组件	基于 codemirror 封装的代码编辑器，支持多种语言，经过界面菜单等进行控制。有代码提示以及各式化等功能。
@hecate/h-code-mirror	1.0.0	代码编辑器基础组件	基于 codemirror 封装的代码编辑器，支持多种语言，没有参数控制界面，须要手动传递参数
@hecate/h-form-generator	1.0.0	动态表单编辑组件	基于 Vuetify 的动态表单设计器
@hecate/h-form-renderer	1.0.0	动态表单组件绘制组件	动态表单渲染核心组件，参考koumoul-dev/vuetify-jsonschema-form 。目前，还没有重构完成，须要根据支持组件的不断添加，逐步重构完善
@hecate/h-form-runtime	1.0.0	动态表单预览组件	基于生成的 Schema 显示表单组件
@hecate/h-icon-list	1.0.0	Icon 选择组件	基于 material design icons 封装的图标查询和选择组件

[四]、经常使用命令

• 指定包，在某个包下执行 yarn 命令

yarn ws:**

// 例如：
// 添加包（从npm中添加）
yarn ws:example add lodash -D

// 删除包
yarn ws:example remove lodash

// 运行example
yarn ws:example serve

• 添加本工程中的组件做为依赖包（还没有上传至 npm）

// 将工程中的h-button 添加至example中
// 注意：不支持批量添加多个，要一个一个加
lerna add @hecate/h-button --scope @hecate/example

// 删除本工程中的组件，使用yarn命令便可
yarn ws:example remove @hecate/h-button

• 在根目录添加依赖包

// -W 意思是指工做区，想要操做工程级的包，这个参数不能缺
// -D 指定devDependencies的意思
// 添加组件
yarn add lodash -D -W

// 删除组件
yarn add lodash -W

• 升级依赖包

yarn upgrade-interactive --latest

// 升级全局依赖包
yarn global upgrade-interactive --latest

• 编译全部组件

lerna run lib

• 清空组件 dist

lerna run clean

• 清除组件中的 node_modules

lerna clean

• 让各个组件中从新关联依赖包

lerna bootstrap 或 yarn install

• 提交代码

yarn push

[五]、问题解决

问题一：升级依赖包时出错

使用yarn upgrade-interactive --latest命令升级依赖包的时候，特别是@hecate/form-service 中，有依赖包能够升级时（目测是因为使用了 Nuxt），常常会出现下面的错误。

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)

这个问题是 yarn 自己的 Bug，虽然 yarn 已经升级到了 1.22.10，可是一会好一会很差的。

（1）解决办法一

在工程中将 yarn 的版本，降到 1.19.XX。这种方法，只对本工程有效，这样其它工程仍旧可使用最新版的 yarn，避免了全局安装低版本 yarn 的问题

yarn policies set-version 1.19.XX

// .yarn 目录生成后，执行
yarn install

这个命令会在工程中生成一个.yarn 目录以及一个.yarnrc 文件，并在其中指定 yarn 版本。

（2）解决办法二

这种办法土一点，可是能够不用去理会 yarn 的无论问题。

// 一、先查询看看那些包能够升级
yarn upgrade-interactive --latest

// 二、到指定的包的package.json中，手工修改版本号

// 三、清除组件包的依赖
lerna clean

// 四、从新关联依赖
lerna bootstrap

或

yarn install

问题二：运行命令是出现禁止脚本运行的错误

解决方法：打开 PowerShell（在小娜里搜就行），输入：

set-executionpolicy remotesigned

以后选择 Y，问题就解决了。

[六]、依赖说明

如下依赖包暂时不要升级

依赖包	当前使用版本	最新版本	说明
compression-webpack-plugin	6.1.1	> 7.0.0	目前不要升级该包，会抛错误
remark-footnotes	2.0.0	= 3.0.0	目前不要升级该包，该包是为了解决 Nuxt 启动 Warning 问题
rollup-plugin-vue	5.1.9	> 6.0.0	目前不要升级该包，等工程变动为 Vue3 在进行升级
vee-validate	3.4.5	> 4.0.0	目前不要升级该包，等工程变动为 Vue3 在进行升级
webpack	4.44.2	> 5.9.0	目前不要升级该包，须要等到使用相关 Vue 版本升级后再考虑

源代码

Gitee地址
Github地址