Vue 3 使用 CodeMirror 显示 JSON 数据

要在 Vue 3 中使用 CodeMirror 来显示 JSON 数据，您需要按照以下步骤进行操作：

1. 安装 CodeMirror 库：在终端中运行以下命令来安装 CodeMirror 库。

npm install codemirror

2. 导入和使用 CodeMirror 组件：在您的 Vue 组件中，导入 CodeMirror 组件。

import { createApp, ref, onMounted } from 'vue';
import 'codemirror/lib/codemirror.css';
import { codemirror } from 'vue-codemirror-lite';

export default {
  components: {
    codemirror
  },
  setup() {
    const jsonData = ref({}); // 假设您有一个 JSON 数据
    const editorOptions = ref({
      mode: 'application/json', // 设置编辑器的模式为 JSON
      lineNumbers: true, // 显示行号
      readOnly: true // 只读模式
    });

    onMounted(() => {
      // 通过 ref 获取 CodeMirror 实例
      const cm = codemirror.value;
      // 设置要显示的 JSON 数据
      cm.setValue(JSON.stringify(jsonData.value, null, 2));
    });

    return {
      jsonData,
      editorOptions
    };
  }
};

3. 在模板中使用 CodeMirror 组件：在您的 Vue 组件的模板中，使用 CodeMirror 组件来显示 JSON 数据。

<template>
  <div>
    <codemirror v-model='jsonData' :options='editorOptions'></codemirror>
  </div>
</template>

通过上述步骤，您应该能够在 Vue 3 中使用 CodeMirror 来显示 JSON 数据。记得根据您的需求调整 CodeMirror 的选项和 JSON 数据。