// 指定安裝4.x版本
// 目前最新版本6.x，僅支持Vue3.0
npm i vue-codemirror@4.x --save

// codemirror 需要與 vue-codemirror 同時安裝
npm i codemirror@5.x --save 

// cm-setting.js
// 組件樣式
import "codemirror/lib/codemirror.css";
// 主題
import "codemirror/theme/3024-day.css"; // 引入主題樣式，根據(jù)設(shè)置的theme的主題引入
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/monokai.css";
import 'codemirror/theme/rubyblue.css';

	
// html代碼高亮
import "codemirror/mode/htmlmixed/htmlmixed.js"; 

// 語言模式
import 'codemirror/mode/javascript/javascript.js'

// main.js
import Vue from "vue";
import App from "./App";

// 引入
import { codemirror } from "vue-codemirror";
	
// 引入配置對應(yīng)的文件（樣式、主題、代碼格式等）
import "@/utils/cm-setting.js";
	
// 注冊使用
Vue.component("codemirror", codemirror);
	
.....

<template>
	 <div class="content">
	   <codemirror v-model="code" :options="options"></codemirror>
	 </div>
</template>
	
<script>
// 文件內(nèi)引入
import { codemirror } from "vue-codemirror";
// 引入樣式、主題、代碼風(fēng)格等配置或樣式文件
import "@/utils/cm-setting.js";
export default {
  // 注冊使用
  components: {
    codemirror,
  },
  data() {
    return {
      code: "",
      options: {
        line: true,
        theme: "rubyblue", // 主題
        tabSize: 4, // 制表符的寬度
        indentUnit: 2, // 一個塊應(yīng)該縮進多少個空格（無論這在編輯語言中意味著什么）。默認值為 2。
        firstLineNumber: 1, // 從哪個數(shù)字開始計算行數(shù)。默認值為 1。
        readOnly: false, // 只讀
        autorefresh: true,
        smartIndent: true, // 上下文縮進
        lineNumbers: true, // 是否顯示行號
        styleActiveLine: true, // 高亮選中行
        viewportMargin: Infinity, //處理高度自適應(yīng)時搭配使用
        showCursorWhenSelecting: true, // 當(dāng)選擇處于活動狀態(tài)時是否應(yīng)繪制游標(biāo)
        mode: "javascript",
      },
    };
  },
};
</script>

<template>  
  <div>  
    <codemirror   
      v-model="code"   
      @resize="onResize"  
      :options="cmOptions"  
    ></codemirror>  
  </div>  
</template>  
  
<script>  
import { codemirror } from 'vue-codemirror'  
import 'codemirror/lib/codemirror.css'  
import 'codemirror/mode/javascript/javascript.js' // 引入你需要的模式  
  
export default {  
  components: { codemirror },  
  data() {  
    return {  
      code: '',  
      cmOptions: {  
        tabSize: 4,  
        lineNumbers: true,  
        mode: 'javascript', // 或者其他模式，例如 'python'、'markdown' 等  
        theme: 'default', // 或者其他主題，例如 'monokai'、'solarized' 等  
        line: true, // 顯示行號  
        styleActiveLine: true, // 高亮顯示當(dāng)前行  
        matchBrackets: true, // 括號匹配高亮  
        extraKeys: { 'Ctrl': 'autocomplete' }, // 自定義按鍵映射  
      }  
    }  
  },  
  methods: {  
    onResize() {  
      // 重新計算高度，這里只是一個示例，你可以根據(jù)實際需求進行調(diào)整  
      this.$refs.cm.setSize(null, this.$refs.cm.defaultView.wrapper.clientHeight)  
    }  
  },  
  mounted() {  
    // 獲取 CodeMirror 組件的引用，以便后續(xù)操作  
    this.$refs.cm = this.$refs.codemirror.$refs.cmEditor.$refs.editor;  
  }  
}  
</script>

// cm-setting.js
import 'codemirror/theme/rubyblue.css'

options: {
    theme: "rubyblue", // 主題
}