很多人都知道 monaco-editor 这个项目，可以在浏览器页面上显示类似 VSCode 的界面。 monaco-editor 是微软官方开源的项目，很多在线编辑器都是基于这个项目

微软之前有个项目叫做 Monaco Workbench，后来这个项目变成了VSCode，而 Monaco Editor 就是从这个项目中成长出来的一个web编辑器，他们很大一部分的代码（monaco-editor-core）都是共用的，所以monaco和VSCode在编辑代码，…

在开发中具体运用场景如上图显示，在线编辑代码。 官方文档地址：https://microsoft.github.io/monaco-editor/ 安装 vue3具体使用 封装解析代码方法

1. 首先在composables中创建useMonaco.ts 2. 在components中创建MonacoEditor.vue 3. 在需要用到MonacoEditor的文件中直接引入即可

monaco-editor常用功能收集，此文档内容都是实践中总结的，初始化编辑器，销毁编辑器，获取编辑器值，设置编辑器值....

vue3+vite简单搞了搞Monaco-Editor编辑器，记录一下开发时遇到的坑以及沉淀一下组件封装，希望能帮到大家