vue中codemirror的使用方法

在 Vue 中使用 CodeMirror 可以通过安装 `vue-codemirror` 包来完成。

1. 安装 `vue-codemirror`

npm install vue-codemirror --save

2. 在 Vue 组件中引入 CodeMirror

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

<script>
import { codemirror } from 'vue-codemirror'

export default {
  components: {
    codemirror
  },
  data() {
    return {
      code: '',
      cmOptions: {
        mode: 'javascript',
        theme: 'default',
        lineNumbers: true
      }
    }
  }
}
</script>

以上代码展示了一个简单的 Vue 组件，其中使用了 `vue-codemirror` 中的 `codemirror` 组件来展示 CodeMirror 编辑器。

`v-model="code"` 绑定了组件的 `code` 数据和 CodeMirror 编辑器中的内容，`cmOptions` 配置了编辑器的一些选项，如语言模式、主题、是否显示行号等。

3. 引入 CSS 文件

由于 `vue-codemirror` 并不自带样式，所以我们需要在组件中引入 CodeMirror 的样式文件。

<style>
@import "codemirror/lib/codemirror.css";
</style>

以上代码中引入了 CodeMirror 编辑器的样式文件，可以根据需要自定义样式。

以上就是使用 `vue-codemirror` 在 Vue 中使用 CodeMirror 编辑器的方法。