vue 使用vue-json-viewer 展示 JSON 格式数据

为什么需要Vue-json-viewer

在前端开发中，我们经常需要处理JSON数据。然而，JSON数据一般是以字符串的形式来传递，难以直观地查看、理解和调试，这阻碍了我们开发工作的进程。Vue-json-viewer组件正是为了解决这个问题而生。

安装 vue-json-viewer插件

npm install vue-json-viewer --save

引入插件并注册

官网地址： https://www.npmjs.com/package/vue-json-viewer

2.1 全局注册组件

在全局 main.js 中引入，在 main.js 文件中添加：

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

2.2 单个页面局部引入

import JsonViewer from 'vue-json-viewer'
export default {
   components:{ JsonViewer }
}

Vue-json-viewer的使用方法

Vue-json-viewer组件非常易用，只需要在Vue项目中安装该组件并在需要的地方引用即可。下面是一个简单的例子：

  <template>
    <div>
      <vue-json-viewer :data="jsonData" :theme="theme" />
    </div>
  </template>

  <script>
    import VueJsonViewer from 'vue-json-viewer'

    export default {
      components: {
        VueJsonViewer
      },
      data () {
        return {
          jsonData: {
            'name': 'vue-json-viewer',
            'version': '1.0.0',
            'author': 'John'
          },
          theme: 'dark'
        }
      }
    }
  </script>

如上所示，使用该组件非常简单，只需要将需要展示的JSON数据传递给组件的data属性，即可自动展示为可读性很高的格式。

更细节的使用，后面再说