在vue3中使用codemirror

在 Vue 3 中使用 CodeMirror，首先你需要做的是安装必要的库。确保已经安装了 `vue` 和 `@codemirror/standalone`：

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

接下来，可以在 Vue 组件中使用 CodeMirror。这里有一个基本的例子：

<template>
  <div id="editor-container">
    <codemirror :value="codeValue" :options="editorOptions" @change="handleCodeChange"></codemirror>
  </div>
</template>

<script>
import { Component, ref } from 'vue';
import { CodeMirror } from '@codemirror/standalone';

export default {
  components: {
    CodeMirror,
  },
  setup() {
    const codeValue = ref('');
    const editorOptions = {
      lineNumbers: true,
      mode: 'javascript', // 根据需求选择合适的语言模式
      theme: 'default', // 设置主题，如'default', 'neo', 等
    };

    const handleCodeChange = (newValue) => {
      codeValue.value = newValue;
      // 在此处添加其他处理逻辑
    };

    return {
      codeValue,
      editorOptions,
      handleCodeChange,
    };
  },
};
</script>

在这个例子中，`:value` 属性用于设置初始代码值，`:options` 子属性用于配置 CodeMirror 的各种选项。`@change` 事件监听器会在代码发生变化时触发，并更新内部的 `codeValue` 变量。

注意，如果你要在 Vue 3 Composition API 下工作，上述示例中的 `setup()` 函数代替传统的 `created`, `mounted` 等生命周期钩子。