Monaco Editor 的基本使用及 Vue 组件封装

<template>
  <div class="monaco-editor-container">
    <monaco-editor
      ref="monacoEditor"
      :code="code"
      :options="editorOptions"
      @mounted="handleEditorMounted"
      @codeChange="handleCodeChange"
    />
  </div>
</template>
 
<script>
import MonacoEditor from 'vue-monaco';
 
export default {
  components: {
    MonacoEditor,
  },
  data() {
    return {
      code: 'console.log("Hello, Monaco Editor!");',
      editorOptions: {
        language: 'javascript',
        minimap: {
          enabled: false,
        },
      },
    };
  },
  methods: {
    handleEditorMounted(editor) {
      console.log('Editor mounted', editor);
    },
    handleCodeChange(newCode) {
      console.log('Code changed:', newCode);
    },
  },
};
</script>
 
<style scoped>
.monaco-editor-container {
  width: 100%;
  height: 500px;
}
</style>

这个代码实例展示了如何在Vue应用中嵌入Monaco Editor组件，并处理编辑器挂载和代码变化事件。在data函数中定义了初始代码和编辑器选项，在methods中定义了编辑器挂载和代码变化时的处理函数。这个例子简洁明了，并且清晰地展示了如何在Vue中使用Monaco Editor。