vue-codemirror实现代码编辑器

要在Vue中使用vue-codemirror实现代码编辑器，首先需要安装vue-codemirror和codemirror：

npm install vue-codemirror codemirror

然后在Vue组件中引入并使用vue-codemirror：

<template>
  <codemirror ref="myCodeMirror" v-model="code" :options="cmOptions" />
</template>
 
<script>
// 引入vue-codemirror
import { codemirror } from 'vue-codemirror'
// 引入codemirror的样式文件
import 'codemirror/lib/codemirror.css'
// 引入你需要的语言模式和主题文件
import 'codemirror/mode/javascript/javascript'
import 'codemirror/theme/base16-dark.css'
 
export default {
  components: { codemirror },
  data() {
    return {
      code: 'console.log("Hello, World!");', // 初始代码
      cmOptions: {
        mode: 'text/javascript', // 语言模式
        theme: 'base16-dark', // 代码主题
        lineNumbers: true, // 显示行号
        lineWrapping: true, // 自动折行
        tabSize: 2, // Tab大小
        indentUnit: 2, // 缩进单位
        autofocus: true // 自动聚焦
      }
    }
  }
}
</script>

这段代码创建了一个基本的代码编辑器，并设置了JavaScript的语言模式和一个暗色主题。你可以根据需要调整cmOptions中的配置。