Vue项目中 JSON 编辑器的使用

一、背景描述二、vue-json-edit2.1 依赖安装2.2 示例代码2.3 效果图

三、vue-json-pretty3.1 依赖安装3.2 示例代码3.3 效果图

四、bin-code-editor4.1 依赖安装4.2 示例代码4.3 效果图

五、vue-json-views5.1 依赖安装5.2 示例代码5.3 效果图5.4 相关属性

六、CodeMirror6.1 依赖安装6.2 示例代码6.3 效果图

一、背景描述

现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。以下是列举了几种，可以根据风格或者喜好随意选择其中的一种即可。如果有兴趣的话，每一种都可以试着写下哦。

二、vue-json-edit

2.1 依赖安装

npm install vue-json-editor --save

2.2 示例代码

2.3 效果图

三、vue-json-pretty

3.1 依赖安装

以下是vue2版本的依赖，如果需要vue3请自行查询对应的版本然后安装对应的依赖

npm install vue-json-pretty@1.7.1 --save

3.2 示例代码

3.3 效果图

四、bin-code-editor

官网：https://wangbin3162.gitee.io/bin-code-editor/#/jsonEditor

4.1 依赖安装

npm install bin-code-editor -d

4.2 示例代码

4.3 效果图

五、vue-json-views

5.1 依赖安装

npm i -S vue-json-views

5.2 示例代码

5.3 效果图

5.4 相关属性

六、CodeMirror

官网地址：https://codemirror.net/docs/guide/支持快速搜索支持自动补全提示支持自动匹配括号支持代码高亮 62种主题颜色，例如monokai等等 支持json, sql, javascript，css，xml, html，yaml, markdown, python编辑模式，默认为 json

6.1 依赖安装

下载时注意指定版本，且这里下载vue-codemirror，不是codemirror，两者现有版本不同，可在npm社区查看具体版本，默认下载是最新版本只支持Vue3。

这里下载的是vue-codemirror4.0.6 支持 Vue2：

npm install vue-codemirror@4.0.6

npm install jshint

npm install jsonlint

npm install script-loader

6.2 示例代码

6.3 效果图

这个效果没有那么好。

本文完结！

参考链接

评论可见，请评论后查看内容，谢谢！！！评论后请刷新页面。