code mirror vue3

CodeMirror 是一个为浏览器提供源代码编辑器的 JavaScript 库，支持语法高亮、代码折叠等多种功能。Vue 3 是一个流行的前端框架，其组件化特性和响应式系统使得开发者可以更高效地构建用户界面。

在 Vue 3 中集成 CodeMirror，通常可以通过以下步骤进行：

1. 引入 CodeMirror：可以通过 CDN 或者 npm 包管理器来引入 CodeMirror。如果是通过 CDN，可以在 HTML 文件中直接通过 `<script>` 标签引入；如果是通过 npm，可以使用 npm 或 yarn 来安装 CodeMirror，然后在 Vue 3 组件中使用 `import` 语句来引入。

2. 创建 CodeMirror 实例：在 Vue 3 组件的生命周期钩子中创建 CodeMirror 实例。通常在 `mounted` 钩子中初始化编辑器，使用 Vue 的 `ref` 来引用 DOM 元素，然后将这个元素作为容器传递给 CodeMirror。

3. 配置 CodeMirror：在创建实例时，可以传入各种配置项来自定义编辑器的行为和外观，例如语言模式、主题、键绑定等。

4. 绑定事件和数据：CodeMirror 实例创建后，可以通过 Vue 的响应式系统来绑定数据和事件。这样，编辑器中的内容变化可以实时反映到 Vue 组件的数据中，反之亦然。

下面是一个简单的示例代码：

<template>
  <div ref="editorContainer" class="editor"></div>
</template>

<script>
import CodeMirror from 'codemirror';

export default {
  name: 'CodeMirrorComponent',
  setup() {
    let editor;

    onMounted(() => {
      const container = ref.value;
      editor = CodeMirror(container, {
        lineNumbers: true,
        mode: "javascript",
      });
    });

    watch(() => {
      // 你可以在这里监听 Vue 数据的变化，并反映到编辑器中
    });

    return {
      editor,
    };
  }
};
</script>

<style>
.editor {
  height: 500px;
}
</style>

在上面的代码中，我们创建了一个 Vue 3 组件，使用了 `setup` 函数，并在 `mounted` 生命周期钩子中初始化了 CodeMirror 编辑器。我们还定义了一个名为 `editor` 的响应式引用，用于在组件的其他部分与 CodeMirror 实例交互。