Use codemirror editor in vue

Use codemirror editor in vue, one of the methods is as follows, it is easier to get started

Step 1: Install vue-codemirror

npm install vue-codemirror --save

Step 2: Import (this article uses local introduction in the component)
Step 3: Declare in the component

<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>

The effect diagram is as follows