codemirror在vue3里面使用

在 Vue 3 中使用 CodeMirror 需要进行以下步骤:

1. 安装 CodeMirror：

   npm install codemirror

2. 在 Vue 组件中引入 CodeMirror：

   // 引入 CodeMirror 样式
   import 'codemirror/lib/codemirror.css';
   
   // 引入 CodeMirror 主题样式（可选）
   import 'codemirror/theme/monokai.css';
   
   // 引入 CodeMirror 相关模块
   import CodeMirror from 'codemirror';
   import 'codemirror/mode/javascript/javascript'; // 根据你需要的语言引入相应的模块

3. 在 Vue 组件的 `mounted` 钩子函数中初始化 CodeMirror 实例：

   mounted() {
     // 获取 DOM 元素
     const textarea = this.$refs.textarea;
     
     // 初始化 CodeMirror 实例
     this.editor = CodeMirror.fromTextArea(textarea, {
       mode: 'javascript', // 设置语言模式
       theme: 'monokai', // 设置主题样式（可选）
     });
     
     // 监听内容变化事件
     this.editor.on('change', () => {
       this.$emit('input', this.editor.getValue());
     });
   }

4. 在 Vue 模板中使用 CodeMirror：

   <template>
     <div>
       <textarea ref="textarea" v-model="code"></textarea>
     </div>
   </template>

这样就可以在 Vue 3 中使用 CodeMirror 了。注意，以上代码只是一个简单的示例，你可以根据自己的需求进行进一步的定制和扩展。