1.下载
npm下载：
// Vue2 npm install vue-json-viewer@2 --save // Vue3 npm install vue-json-viewer@3 --save
yarn下载：
// Vue2 yarn add vue-json-viewer@2 // Vue3 yarn add vue-json-viewer@3
2.引入并全局注册
在main.js（入口文件里面）
1. import JsonViewer from 'vue-json-viewer' 2. Vue.use(JsonViewer)
3.组件内使用
jsonData就是你想要渲染的数据
<json-viewer :value="jsonData"></json-viewer>
假数据供测试效果：
data(){ return { jsonData:{ name:"小明", age:18, items：{ like:"pingpang", skip:0 } } } }
效果图：
4.一点使用技巧、心得
在使用类似插件的时候，先写假数据，如果能正常渲染，那就将后端的数据处理成假数据一样的格式。
另外，前端处理JSON数据一般使用JSON.parse()、eval()或者JSON.stringify()方法，要注意的是他们对格式的要求极其严格，如果你的数据格式不对，就会报错。相对来说我个人比较保险的做法是：先JSON.parse(JSON.stringify())然后再JSON.parse()。
ps:JSON.stringify()序列化为JSON字符串;
JSON.parse()j解析为javascript对象
2022年8.15日更新以下内容：设置编辑器的样式使其风格适用于项目
5.修改编辑的样式，使其符合项目需求
第一步，在组件加一个属性
theme="my-awesome-json-theme"
<json-viewer v-for="(ite, idx) in finallyJsonList" :key="idx" style="width: 100%; min-width: 3.125rem" :value="ite" :expand-depth="5" copyable boxed theme="my-awesome-json-theme" sort ></json-viewer>
第二步，在这个类名里面写样式了
需要注意的是，这个编辑器完全可以使用浏览器F12查看元素的类名去改，和我们平时开发没啥区别，还是挺方便的。
.my-awesome-json-theme { overflow-x: hidden; background: #0c2b52; white-space: nowrap; color: #01fef4; font-size: 14px; font-family: Consolas, Menlo, Courier, monospace; .jv-ellipsis { color: rgb(237, 13, 13); background-color: rgb(241, 11, 11); display: inline-block; line-height: 0.9; font-size: 0.9em; padding: 0px 4px 2px 4px; border-radius: 3px; vertical-align: 2px; cursor: pointer; user-select: none; } .jv-button { color: #49b3ff; } ::v-deep .jv-key { color: #01fef4 !important; } ::v-deep .jv-push { color: #fff; } .jv-item { &.jv-array { color: #111111; } &.jv-boolean { color: #fc1e70; } &.jv-function { color: #067bca; } &.jv-number { color: #fc1e70; } &.jv-number-float { color: #fc1e70; } &.jv-number-integer { color: #fc1e70; } &.jv-object { color: #111111; } &.jv-undefined { color: #e08331; } &.jv-string { color: #42b983; word-break: break-word; white-space: normal; } } .jv-code { ::v-deep .jv-toggle { color: #067bca !important; &:before { padding: 0px 2px; border-radius: 2px; } &:hover { &:before { background: rgb(242, 5, 5); } } } } }
