codemirror插件 在vue2中如何使用

要在 Vue 2 中使用 CodeMirror 插件，您可以照以下步骤进行操作：

1. 安装 CodeMirror：您可以通过 npm 或者 yarn 安装 CodeMirror。

npm install codemirror

2. 在 Vue 组件中引入 CodeMirror：

<template>
  <div>
    <textarea ref="myEditor"></textarea>
  </div>
</template>

<script>
import CodeMirror from 'codemirror';

export default {
  mounted() {
    // 在组件挂载后初始化 CodeMirror 实例
    this.editor = CodeMirror.fromTextArea(this.$refs.myEditor, {
      lineNumbers: true,
      mode: 'javascript',
    });
  },
};
</script>

<style>
/* 引入 CodeMirror 的 CSS 文件 */
@import 'codemirror/lib/codemirror.css';
</style>

3. 在组件中使用 CodeMirror：在模板中使用 `<textarea>` 元素，并通过 `ref` 引用它。然后在 `mounted` 钩子函数中，使用 `CodeMirror.fromTextArea` 方法将 `<textarea>` 元素转换为 CodeMirror 编辑器实例。

请注意，在 Vue 组件中引入的 CodeMirror 是一个简化版本，没有包含所有模块，如果需要使用特定的模块，您可以单独引入所需的模块文件。

这样，您就可以在 Vue 2 中使用 CodeMirror 插件了。希望对您有所帮助！