找了很多教程，都没有完成整合。后查找到相关vue2的文章，完成整合，记录下来。

1.首先安装依赖

npm i vue-codemirror@4.x --save
npm i codemirror@5.x --save 

2.整合js与样式的引入,在renderer目录新建一个code-setting.js

// cm-setting.js
// 组件样式
import "codemirror/lib/codemirror.css";
// 主题
import "codemirror/theme/3024-day.css"; // 引入主题样式，根据设置的theme的主题引入
import "codemirror/theme/ayu-mirage.css";
import "codemirror/theme/monokai.css";
	mport 'codemirror/theme/rubyblue.css'
// html代码高亮
import "codemirror/mode/htmlmixed/htmlmixed.js"; 
// 语言模式
import 'codemirror/mode/javascript/javascript.js'

3.在main.js中引入

// 引入
import { codemirror } from "vue-codemirror";
// 引入配置对应的文件（样式、主题、代码格式等）
import "@/utils/code-setting.js";
// 注册使用
Vue.component("codemirror", codemirror);

4.使用

!-- 组件 -->
<template>
    <codemirror v-model="code" :options="options" :key="targetPreview.id" ref="codeMirrorRef">
    </codemirror>
</template>
	
<script>
// 文件内引入
import { codemirror } from "vue-codemirror";
// 引入样式、主题、代码风格等配置或样式文件
import "@/utils/code-setting.js";
import 'codemirror/addon/display/autorefresh'
export default {
    // 注册使用
    components: {
        codemirror,
    },
    props: {
        // 排序字段
        preview: {
            type: Object,
            default: "",
        },
    },
    data() {
        return {
            code: "",
            options: {
                line: true,
                theme: "eclipse", // 主题
                tabSize: 4, // 制表符的宽度
                indentUnit: 2, // 一个块应该缩进多少个空格（无论这在编辑语言中意味着什么）。默认值为 2。
                firstLineNumber: 1, // 从哪个数字开始计算行数。默认值为 1。
                readOnly: false, // 只读
                autoRefresh: true,
                smartIndent: true, // 上下文缩进
                lineNumbers: true, // 是否显示行号
                styleActiveLine: true, // 高亮选中行
                viewportMargin: Infinity, //处理高度自适应时搭配使用
                showCursorWhenSelecting: true, // 当选择处于活动状态时是否应绘制游标
                mode: 'text/x-java',
            },
        };
    },
    mounted() {
        this.targetPreview = this.preview;
    }
};
</script>