Utilice el editor codemirror en vue

Use el editor codemirror en vue, uno de los métodos es el siguiente, es más fácil comenzar

Paso 1: Instale vue-codemirror

npm install vue-codemirror --save

Paso 2: Importar (este artículo utiliza una introducción local en el componente)
Paso 3: Declarar en el componente

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

<script>
import {
    
     codemirror } from 'vue-codemirror'
// 核心样式
import 'codemirror/lib/codemirror.css'
// 引入主题后还需要在 options 中指定主题才会生效
import 'codemirror/theme/rubyblue.css'
import 'codemirror/mode/python/python.js'

export default {
    
    
  data () {
    
    
    return {
    
    
       code: '', // 编辑器绑定的值
		// 默认配置
		 options: {
    
    
		   tabSize: 2, // 缩进格式
		   theme: 'rubyblue', // 主题，对应主题库 JS 需要提前引入
		   lineNumbers: true, // 显示行号
		   line: true,
		   styleActiveLine: true, // 高亮选中行
		   hintOptions: {
    
    
		     completeSingle: true // 当匹配只有一项的时候是否自动补全
		   }
		 }
	 }
  },
  components: {
    
    
    codemirror
  }
}
</script>

El diagrama de efectos es el siguiente