使用静态 JSON 数据在 vue3-json-viewer 展示

Vue3-JsonViewer是一个用于在Vue3应用中展示JSON数据的轻量级组件。当你想要在前端动态或静态地显示JSON数据时，可以使用它来可视化复杂的数据结构。要使用静态JSON数据展示，首先你需要在你的项目中引入这个库，并在HTML模板里使用它。

步骤如下：

1. 安装组件：如果你还没有安装，可以在项目中通过npm或yarn安装`vue3-json-viewer`：

   npm install vue3-json-viewer
   # 或者
   yarn add vue3-json-viewer

2. 在你的`.vue`文件中导入并使用组件：

   <template>
     <div>
       <json-viewer :value="yourStaticJsonData"></json-viewer>
     </div>
   </template>

   <script>
   import { JsonViewer } from 'vue3-json-viewer';

   export default {
     components: {
       JsonViewer,
     },
     data() {
       return {
         yourStaticJsonData: {
           // 这里替换为你的静态JSON对象，例如：
           "name": "John Doe",
           "age": 30,
           "items": ["item1", "item2"]
         }
       };
     },
   };
   </script>

在这个例子中，`:value`属性绑定的是你在JavaScript对象里的静态JSON数据。当页面加载时，JSON Viewer会自动解析并渲染这个对象。