vue3+vite使用monaco-editor编辑器

在Vue 3 + Vite项目中使用Monaco Editor，首先需要安装monaco-editor：

npm install monaco-editor

然后，在Vue组件中引入并使用Monaco Editor：

<template>
  <div id="editor" style="height: 400px;"></div>
</template>
 
<script setup>
import { onMounted, ref } from 'vue';
import * as monaco from 'monaco-editor';
 
const editor = ref(null);
 
onMounted(() => {
  editor.value = monaco.editor.create(document.getElementById('editor'), {
    value: 'console.log("Hello, Monaco Editor!");',
    language: 'javascript',
    theme: 'vs-dark'
  });
});
</script>
 
<style>
/* 可以添加自定义样式 */
</style>

这段代码创建了一个简单的Vue组件，该组件在被挂载到DOM后，会初始化一个Monaco Editor实例，并显示在指定的div元素中。在编辑器中默认展示一条简单的JavaScript代码。