Vue2使用codemirror插件 做代码编辑器

Vue2中使用Codemirror插件做代码编辑器，可以让用户在网页上体验丰富的文本编辑功能，特别是在处理JavaScript、HTML或CSS等前端代码方面。以下是基本步骤：

1. **安装**：首先，在项目中安装`@codemirror/mini`和`vue-codemirror`库，可以使用npm或yarn进行安装：

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

2. **引入并配置**：在`main.js`或Vue组件中导入并配置Codemirror：

   import CodeMirror from 'vue-codemirror'
   import 'codemirror/mode/javascript/javascript'
   
   Vue.use(CodeMirror, {
     options: {
       mode: 'text/x-java-script', // 根据需要选择模式，如'htmlmixed' for HTML+JS
       theme: 'monokai', // 选择主题
       lineNumbers: true,
       matchBrackets: true,
       indentUnit: 2, // 代码缩进单位
       ... // 可自定义其他选项，如lineWrapping, keyMap等
     }
   })

3. **在模板中使用**：在需要展示代码输入框的地方，使用`<codemirror>`标签：

   <template>
     <div>
       <codemirror v-model="code" :options="editorOptions"></codemirror>
     </div>
   </template>

   <script>
   export default {
     data() {
       return {
         code: '',
         editorOptions: { /* 使用前面配置的对象 */ }
       };
     },
     // 其他生命周期钩子和事件处理
   }
   </script>

4. **监听变化**：你可以监听`v-model`绑定的数据变化，处理用户的实时输入。