帮我写一份使用vue实现codemirror的代码

在Vue.js中使用`codemirror`库可以让你创建一个富文本编辑器，下面是一个简单的例子，展示如何在组件中集成CodeMirror：

首先，你需要安装`codemirror`和它的Vue绑定插件`vue-codemirror`。可以使用npm或yarn来安装：

npm install vue-codemirror codemirror @codemirror/monaco
# 或者
yarn add vue-codemirror codemirror @codemirror/monaco

然后，在你的Vue组件里引入并使用它：

<template>
  <div id="code-editor">
    <codemirror :value="code" :options="editorOptions"></codemirror>
  </div>
</template>

<script>
import { CodeMirror } from 'vue-codemirror';

export default {
  components: {
    CodeMirror,
  },
  data() {
    return {
      code: '',
      editorOptions: {
        mode: 'text/javascript', // 根据需要选择语言模式
        theme: 'default', // 主题，如'monokai'
        lineNumbers: true, // 显示行号
        indentUnit: 2, // 缩进单位
        lineWrapping: true, // 自动换行
      },
    };
  },
};
</script>

在这个示例中，`code`数据属性用于存储当前的编辑内容，`editorOptions`对象则配置了CodeMirror的初始设置。

如果你想要实时监听编辑事件，可以在组件内添加事件处理器：

export default {
  ...
  methods: {
    handleCodeChange(editor) {
      this.code = editor.getValue();
    },
  },
  watch: {
    code(newCode) {
      // 如果代码有变化，这里可以处理更新后的代码
    },
  },
  mounted() {
    const editor = this.$refs.codemirror;
    if (editor) {
      editor.on('change', this.handleCodeChange);
    }
  },
  beforeDestroy() {
    if (this.$refs.codemirror) {
      this.$refs.codemirror.off('change', this.handleCodeChange);
    }
  },
};