效果图如下

1.安装

npm install monaco-editor --save-dev
npm install monaco-editor-webpack-plugin --save-dev

2.配置

配置vue.config.js(vue-cli3.0需在根目录中新建)

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin()
        ]
    }
}

3.创建一个公共组件

<template>
    <div ref="container" class="monaco-editor" :style="'height: ' + height + 'px'"></div>
</template>

<script>
import * as monaco from 'monaco-editor/esm/vs/editor/editor.api'
export default {
    name: 'AcMonaco',
    props: {
        language: {
            type: String,
            default: 'json',
        },
        oldValue: String,
        value: String,
        height: {
            type: Number,
            default: 400,
        },
    },
    data() {
        return {
            monacoDiffInstance: '',
            // 主要配置
            defaultOpts: {
                value: '', 
                theme: 'vs-dark', // 编辑器主题：vs, hc-black, or vs-dark，更多选择详见官网
                roundedSelection: false, // 右侧不显示编辑器预览框
                autoIndent: true, // 自动缩进
                readOnly: false, // 是否只读
            },
            originalModel: '',
            modifiedModel: '',
        }
    },
    mounted() {
        this.init()
    },
    // 监听父组件传值的变化，实时更新到编辑器中
    watch: {
        oldValue: {
            handler: function(val, oldVal) {
                this.originalModel = monaco.editor.createModel(val, this.language)
                this.monacoDiffInstance.setModel({
                    original: this.originalModel,
                    modified: this.modifiedModel,
                })
            },
        },
        value: {
            handler: function(val, oldVal) {
                this.modifiedModel = monaco.editor.createModel(val, this.language)
                this.monacoDiffInstance.setModel({
                    original: this.originalModel,
                    modified: this.modifiedModel,
                })
                this.$emit('change', this.modifiedModel.getValue())
            },
        },
    },
    methods: {
        init() {
            // 初始化编辑器实例
            this.monacoDiffInstance =                 
            monaco.editor.createDiffEditor(this.$refs['container'], this.defaultOpts)
            this.originalModel = monaco.editor.createModel(this.oldValue, this.language)
            this.modifiedModel = monaco.editor.createModel(this.value, this.language)
            this.monacoDiffInstance.setModel({
                original: this.originalModel,
                modified: this.modifiedModel,
            })
        },
        // 此方法获取到编辑的最新值，传给父组件
        getValue() {
            this.$emit('change', this.modifiedModel.getValue())
        },
     
    },
}
</script>

<style lang="less">
.the-code-diff-editor-container {
    width: 100%;
    height: 100%;
    overflow: auto;
    .monaco-editor .scroll-decoration {
        box-shadow: none;
    }
}
</style>

4.使用组件

<monaco ref="monaco" :oldValue="oldValue" :value="value" @change="changeValue"></monaco>

// 父组件可通过refs调用子组件的方法，获取到编辑的最新值
this.$refs.monaco.getValue()

5.更多使用方法

opts可配置的属性参考 更多属性