vue2使用codemirror

Vue 2 可以与 CodeMirror 结合使用来实现代码编辑器的功能。首先，你需要在项目中安装 CodeMirror 和 Vue CodeMirror 插件。

1. 安装 CodeMirror：

可以通过 npm 或者 yarn 进行安装：

npm install codemirror

或者

yarn add codemirror

2. 安装 Vue CodeMirror 插件：

npm install vue-codemirror

或者

yarn add vue-codemirror

3. 在 Vue 组件中使用 CodeMirror：

在需要使用 CodeMirror 的组件中，你可以像下面这样导入和使用 CodeMirror 组件：

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

<script>
import 'codemirror/lib/codemirror.css';
import VueCodeMirror from 'vue-codemirror';

export default {
  components: {
    codemirror: VueCodeMirror,
  },
  data() {
    return {
      code: '', // 用于绑定编辑器的内容
      editorOptions: {
        // CodeMirror 的配置选项
        mode: 'javascript',
        lineNumbers: true,
        // 其他配置选项...
      },
    };
  },
};
</script>

<style>
/* 编辑器的样式 */
.CodeMirror {
  height: 300px;
}
</style>

以上代码将在组件中创建一个具有代码高亮和行号的 CodeMirror 编辑器，你可以根据需要调整配置选项。

请确保在使用前正确引入 CodeMirror 的 CSS 文件，以便样式生效。

这就是使用 Vue 2 结合 CodeMirror 的基本步骤。你可以根据自己的需求进行更多的配置和定制化。希望对你有帮助！如有问题，请随时追问。