vue常用依赖（一）vue-json-viewer展示JSON格式数据

项目需求：将后台返回的字符串展示为Json格式且美化

1.下载

// Vue2
npm install vue-json-viewer@2 --save
// Vue3
npm install vue-json-viewer@3 --save

2.引入并全局注册

main.js文件中

import JsonViewer from 'vue-json-viewer'
Vue.use(JsonViewer)

3.使用

<json-viewer :value="jsonData" :expand-depth="5" copyable boxed sort></json-viewer>

jsonData是需要格式化渲染的数据，如果后台返回的格式为字符串，需要先通过JSON.parse将字符串转化为对象 属性说明：

效果展示：

4.自定义样式

给组件添加theme属性 <json-viewer :value="jsonData" theme="my-theme"></json-viewer> 在类名里写样式，按F12查看元素的类名去改

.my-theme {
	.jv-ellipsis { ... }
	.jv-button { ... }
}