vue3中使用json-editor实现jsonscheme

1,741 阅读1分钟

[jdorn/json-ediorgithub地址 json-editor 中文文档

一.初始化:

npm install @json-editor/json-editor

二、在项目main.ts中引入

image.png

三、所在页面使用editor

image.png 四、这时候发现页面没战士,并且控制台window打印出来没有JSONEditor,别问我为啥 你即使在当前页面这样引入:import JSONEditor '@json-editor/json-editor';打印出来的window还是没有JSONEditor(经过采坑发现)

image.png

image.png 这时候去git找到jsoneditor.j文件放到自己的项目中,位置自己定就好

image.png 把copy的文件引入

image.png window对象终于有了JSONEditor,但是样式却没有添加成功。

image.png 我配置的 样式如下没有生效,后来发现需要手动引入样式文件。根据实际情况放在自己的项目中,我放在了assets下面

theme: 'foundation5',
iconlib: 'fontawesome4',

image.png

进行到这里基本出来了,这时候发现控制台有个错误,并且字体文件没有出来

image.png

排查发现font-awesome.min.css里面有个路径不存在

image.png 这时候你可以把她引入的文件也放到你本地项目,或者直接替换成cdn地址,我的项目不能访问外网,所以我直接把资源放到了本地(注意要引入对应版本好的资源,我这里引入的版本是4.0.3) 如果是cdn引入可以引入下面的路径 image.png 如果是本地引入,把这四个文件copy到本地

image.png (因为不想改路径,所以放在了同级的fonts下面) image.png

进行到这一步,页面完成了,剩下的方法就可以参考官网了

image.png