中文 | English
由于升级了 Husky 版本,如在 yarn push 或者 git push 操作中遇到 error Command "husky-run" not found 报错无法提交的情况,请删除工程目录中 .git/hooks 目录,再次 push 即可解决问题
已升级lerna 至 4.0.0, 使用前记得全局升级lerna。
yarn global upgrade-interactive --latest
提醒:暂时不要升级sass 1.32.10,这个版本会导致编译出错。
在做工作流服务时,深感动态表单的重要性。所以,慢慢摸索和学习,结合自己的需求,搭建了本套动态表单系统。
本项目是后端老炮撸的前端,广度和深度肯定不如纯前端,不喜勿喷,也请多多包涵以及多多交流,互相促进互相成长。
开发环境的配置以及相关组件环境变量的配置,比较常规。如果有需要,参见文档:
https://blog.csdn.net/Pointer_v/article/details/105432529
如果要正确运行本系统,需要提前安装一些全局工具,以便一些命令可以正常运行。
请首先确保上面的环境变量配置正确。
// 请提前全局安装一下组件
npm install -g yarn
yarn global add lerna @vue/cli
// 1、安装依赖
yarn install
或者
lerna bootstrap
// 2、启动服务
yarn ws:example serve
或者
yarn ws:example dev
// 3、访问地址
http://localhost:3000
其它指令,参见:[五]、常用命令
包名 | 用途 | 说明 |
---|---|---|
@hecate/core | 通用工具代码、组件包 | 包含 localforage、lodash、moment、shortid、sweetalert2 以及通用工具代码 |
@hecate/example | 组件示例及运行工程 | 可以在该工程中,运行和使用已有组件,也可以理解为组件的开发环境 |
@hecate/form-service | Nuxt 环境 | 动态表单的 SSR 验证环境 |
@hecate/h-button | 自定义按钮组件 | 自己封装的有 Tooltip 的 button |
@hecate/h-code-editor | 代码编辑器组件 | 基于 codemirror 封装的代码编辑器,支持多种语言,通过界面菜单等进行控制。有代码提示以及各式化等功能。 |
@hecate/h-code-mirror | 代码编辑器基础组件 | 基于 codemirror 封装的代码编辑器,支持多种语言,没有参数控制界面,需要手动传递参数 |
@hecate/h-form-generator | 动态表单编辑组件 | 基于 Vuetify 的动态表单设计器 |
@hecate/h-form-renderer | 动态表单组件绘制组件 | 动态表单渲染核心组件,参考koumoul-dev/vuetify-jsonschema-form 。目前,尚未重构完成,需要根据支持组件的不断添加,逐步重构完善 |
@hecate/h-form-runtime | 动态表单预览组件 | 基于生成的 Schema 显示表单组件 |
@hecate/h-icon-list | Icon 选择组件 | 基于 material design icons 封装的图标查询和选择组件 |
yarn ws:**
// 例如:
// 添加包(从npm中添加)
yarn ws:example add lodash -D
// 删除包
yarn ws:example remove lodash
// 运行example
yarn ws:example serve
// 将工程中的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
lerna run clean
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,但是一会好一会不好的。
在工程中将 yarn 的版本,降到 1.19.XX。这种方法,只对本工程有效,这样其它工程仍旧可以使用最新版的 yarn,避免了全局安装低版本 yarn 的问题
yarn policies set-version 1.19.XX
// .yarn 目录生成后,执行
yarn install
这个命令会在工程中生成一个.yarn 目录以及一个.yarnrc 文件,并在其中指定 yarn 版本。
这种办法土一点,但是可以不用去理会 yarn 的不管问题。
// 1、先查询看看那些包可以升级
yarn upgrade-interactive --latest
// 2、到指定的包的package.json中,手工修改版本号
// 3、清除组件包的依赖
lerna clean
// 4、重新关联依赖
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 在进行升级 |
sass | 4.44.2 | > 5.9.0 | 目前不要升级该包,会出现很多样式除法过期的提示,需要等到Vuetify大版本升级后再考虑 |
sass-loader | 10.1.1 | = 12.1.0 | 目前不要升级该包,最新版本很多包还有没有适配 |
webpack | 4.46.0 | > 5.40.0 | 目前不要升级该包,compression-webpack-plugin会抛错误 |
开源不易,请尊重作者的劳动成果,如果本项目能对你有所帮助,烦请点个 Star 以资鼓励,喝杯咖啡也是爱。你的支持,才是本项目前进的最大动力。
欢迎提 Issue,我会尽所能尽量完善。
此处可能存在不合适展示的内容,页面不予展示。您可通过相关编辑功能自查并修改。
如您确认内容无涉及 不当用语 / 纯广告导流 / 暴力 / 低俗色情 / 侵权 / 盗版 / 虚假 / 无价值内容或违法国家有关法律法规的内容,可点击提交进行申诉,我们将尽快为您处理。