json-schema 的编辑器

最近在找一个 json-schema 的编辑器,在网上找了找,以下两个项目用的比较多

一、两款json-schema-editor

1、vue-json-schema-editor-visual

一个高效易用的基于 Vue + Element UI 的 json-schema 编辑器。

git地址:https://github.com/giscafer/vue-json-schema-editor-visual

demo地址:http://blog.giscafer.com/sinokit/#/./components/jsonschema-editor

demo截图:

2、json-schema-editor-vue

相似项目,支持vue2 和vue 3

git地址:https://github.com/zyqwst/json-schema-editor-vue

demo地址:http://json-schema.sviip.com/

demo截图:

二、运行 json-schema-editor

1、vue-json-schema-editor-visual从git上下载代码

  1. 解压后进入 examples 目录

  2. 执行 npm install 安装依赖库

  3. 执行 npm run serve

  4. 浏览器访问 http://localhost:8081/

2、json-schema-editor-vue

  1. 从git上下载代码
  2. 解压后进入 examples 目录
  3. 执行 npm install 安装依赖库
  4. 执行 npm run serve
  5. 浏览器访问 http://localhost:8081

三、修改 vue-json-schema-editor-visual 源码重新编译

我想要的 json-schema 编辑器,需要有默认值,所以选用了 vue-json-schema-editor-visual 但这个组件又多了一个编辑按钮,没办法只能修改源码把它去掉了。

1、在源码中找到所有 class="el-icon-edit" 按钮,并将其注释。

2、从 examples 目录中退出来,运行 npm run build 重新编译。由于我是mac m1芯片电脑编译报错,如下图

3、没办法只能把代码复制到linux服务器上重新编译。编译成功后你就会在 dist 目录中得到一个 json-schema-editor.min.js 文件。

4、把这个文件复制到你自己的项目中,将原来的

复制代码
import` `JsonSchemaEditor from ``'vue-json-schema-editor-visual'

改为本地文件

复制代码
import` `JsonSchemaEditor from ``'./directive/vue-json-schema-editor-visual/json-schema-editor.min.js'

5、这样就可以了,但有一个问题由于引用了一个 js ,运行项目时会抛一堆警告

参考

https://blog.csdn.net/jiangjunsss/article/details/134120182

相关推荐
百锦再10 小时前
.Net配置文件appsetting.json的几种读取方法
chrome·json·.net·依赖注入·appsetting·web.config
yanjiee13 小时前
需要scl来指定编译器的clangd+cmake在vscode/cursor开发环境下的配置
ide·vscode·编辑器
hero_heart1 天前
vscode中c_cpp_properities.cpp文件生成和作用
ide·vscode·编辑器
FrostedLotus·霜莲1 天前
C++主流编辑器特点比较
开发语言·c++·编辑器
DO ITNOW1 天前
Cursor/VScode ,点击运行按钮,就打开新的终端,如何设置为在当前终端运行文件而不是重新打开终端----一招搞定篇
ide·vscode·编辑器
小妖6661 天前
若 VSCode 添加到文件夹内右键菜单中显示
ide·vscode·编辑器
freshman_y1 天前
VSCode遇到的一些小毛病(自动保存、运行后光标不再处于编辑区)
ide·vscode·编辑器
死也不注释2 天前
【Unity 编辑器工具开发:GUILayout 与 EditorGUILayout 对比分析】
unity·编辑器·游戏引擎
葬歌倾城2 天前
JSON的缩进格式方式和紧凑格式方式
c#·json
许白掰3 天前
Linux入门篇学习——Linux 帮助手册
linux·运维·服务器·嵌入式硬件·学习·编辑器·vim