Vue 中 JSON 编辑器使用

文章目录

• Vue 中 JSON 编辑器使用
• • 背景描述
  • vue-json-edit
  • • 安装依赖
    • 测试页面
    • 效果图
  • bin-code-editor
  • • 安装依赖
    • 测试页面
    • 效果图
  • CodeMirror
  • • 安装依赖
    • 测试页面
    • 效果图
  • vue-json-views
  • • 安装依赖
    • 属性说明
    • 测试页面
    • 效果图
  • vue-json-pretty
  • • 安装依赖
    • 属性说明
    • 测试页面
    • 效果图
  • 码云地址

背景描述

• 现有一个vue项目，需要一个json编辑器，能够格式化json数据，同时也支持编辑功能。

vue-json-edit

安装依赖

npm install vue-json-editor --save

测试页面

效果图

bin-code-editor

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

安装依赖

npm install bin-code-editor -d

测试页面

效果图

CodeMirror

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

安装依赖

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

• vue 2 使用

npm install vue-codemirror@4.0.6npm install jshint
npm install jsonlint
npm install script-loader

测试页面

效果图

vue-json-views

安装依赖

npm i -S vue-json-views 

属性说明

测试页面

效果图

vue-json-pretty

安装依赖

• vue2

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

属性说明

测试页面

效果图

码云地址

• 地址：https://gitee.com/Marlon_Brando/qianduanxuexi/tree/develop/vue-demo/src/components/json-editor