vue-codemirror使用文档

vue-codemirror 是一个基于vue框架的代码编辑工具，需要先在你的vue项目中安装和引用vue-codemirror库。然后可以在相应的vue组件中使用该工具。

首先，需要在package.json中安装vue-codemirror依赖：

npm install codemirror vue-codemirror --save

然后，在你的vue组件中引用并注册该工具：

import codemirror from 'codemirror'
import 'codemirror/lib/codemirror.css'
import 'codemirror/theme/base16-light.css'
import 'codemirror/mode/javascript/javascript.js' // 根据需要导入所需文件

import VueCodemirror from 'vue-codemirror'

Vue.use(VueCodemirror, {
  options: {
    tabSize: 4, // 缩进空格数
    mode: 'text/javascript', // 代码类型
    theme: 'base16-light', // 主题
    lineNumbers: true // 是否显示行号
  },
  events: ['scroll', 'focus', 'blur'] // 可选事件
})

之后在组件中就可以使用 codemirror 组件了：

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

<script>
export default {
  data () {
    return {
      code: '' // 编辑的代码
    }
  },
  methods: {
    getValue() {
      console.log(this.$refs.cm.codemirror.getValue()) // 获取编辑器文本
    }
  }
}
</script>

需要注意的是，vue-codemirror的options属性支持传入codemirror的配置项，例如：

- tabSize：缩进空格数
- mode：代码类型
- theme：主题
- lineNumbers：是否显示行号

除了基本使用外，vue-codemirror还支持多种事件的监听，例如scroll、focus、blur等，可以根据自己的需求来添加。同时，还需要关注codemirror自身的使用文档，以便更好地使用该代码编辑工具。