安装Monaco-editor

npm install monaco-editor

安装Vite Plugin Monaco Editor

vdesjs/vite-plugin-monaco-editor - Vite 中文文档

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

vite.config.ts :

javascript">import { defineConfig } from 'vite';
import monacoEditorPlugin from 'vite-plugin-monaco-editor';export default defineConfig({plugins: [monacoEditorPlugin()],
});

<div id="code-editor" style="min-height: 100px;min-width: 100px;margin-top: 30px" ref="codeEditorRef">
</div>

 

javascript">import {monaco} from "../../../../../../customMonaco.ts";const codeEditorRef = ref()
const codeEditor = ref()
onMounted(() => {if (!codeEditorRef.value) {return;}monaco.editor.create(codeEditorRef.value, {value: 'public',language: 'java',});
})