vue2 导入使用vue-codemirror详解

在Vue 2项目中使用vue-codemirror组件，首先需要安装codemirror和vue-codemirror：

npm install codemirror vue-codemirror

然后在你的Vue组件中导入并注册vue-codemirror：

<template>
  <codemirror ref="myCodeMirror" v-model="code" :options="cmOptions" />
</template>
 
<script>
// 导入Codemirror样式
import 'codemirror/lib/codemirror.css'
// 导入JavaScript语言模式以外的其他模式（如果需要）
import 'codemirror/mode/javascript/javascript.js'
 
// 导入vue-codemirror组件
import { codemirror } from 'vue-codemirror'
 
export default {
  components: {
    codemirror
  },
  data() {
    return {
      code: 'console.log("Hello, Codemirror!")',
      cmOptions: {
        mode: 'text/javascript', // 设置编辑器语言模式，这里是JavaScript
        theme: 'base16-dark', // 设置编辑器主题
        lineNumbers: true, // 显示行号
        lineWrapping: true // 开启自动换行
      }
    }
  }
}
</script>

在这个例子中，我们导入了CodeMirror的CSS文件和JavaScript模式，并注册了vue-codemirror组件。通过v-model绑定，codemirror组件的内容（代码）与组件的code数据属性保持同步。cmOptions定义了CodeMirror的初始化选项，例如编程语言和主题。