vite-vue3使用ace代码编辑器

import {defineComponent, h, onMounted} from "vue";
import ace from "ace-builds";
import workerJavascriptUrl from "ace-builds/src-noconflict/worker-javascript?url";
import "ace-builds/src-noconflict/mode-javascript";
import "ace-builds/src-noconflict/ext-searchbox";
import "ace-builds/src-noconflict/ext-language_tools";
import "ace-builds/src-noconflict/snippets/javascript"

export default defineComponent({
    render() {
        return h('div', {
            id: "editor",
            style: {
                width: "500px",
                height: "400px"
            }
        })  
    },
    setup() {
        onMounted(init)

        function init() {
            // https://github.com/ajaxorg/ace/wiki/Configuring-Ace
            ace.config.setModuleUrl('ace/mode/javascript_worker', workerJavascriptUrl);
            const editor = ace.edit("editor", {
                mode: 'ace/mode/javascript'
            })
            editor.setOptions({
                enableBasicAutocompletion: true,
                enableSnippets: true,
                enableLiveAutocompletion: true
            })
        }
    }
})