Vue3 集成Monaco Editor编辑器

Monaco Editor （官方链接 https://microsoft.github.io/monaco-editor/）是一个由微软开发的功能强大的在线代码编辑器，被广泛应用于各种 Web 开发场景中。以下是对 Monaco Editor 的详细介绍：
强大的功能特性
多语言支持：
Monaco Editor 支持众多编程语言，包括但不限于 JavaScript、TypeScript、Python、Java、C++、C# 以及常见SQL、HTML、YML、XML、格式等等几十种。它提供了针对不同语言的语法高亮、代码补全、错误提示和智能感知等功能，大大提高了开发效率。
对于每种语言，都有专门的语法解析器和语言服务，确保代码的准确性和可读性。

主题定制：
提供了丰富的内置主题，如默认的 “vs”（Visual Studio 风格）、“vs-dark” 等，同时也支持用户自定义主题。
用户可以根据自己的喜好调整编辑器的颜色、字体大小、对比度等，以适应不同的工作环境和个人需求。

1. 安装依赖

npm 安装

npm install monaco-editor

package.json

{
   
  "name": "vue-monaco-demo",
  "private": true,
  "version": "0.0.0",
  "type": "module",
  "scripts": {
   
    "dev": "vite",
    "build": "vite build",
    "preview": "vite preview"
  },
  "dependencies": {
   
    "monaco-editor": "^0.52.0",
    "vue": "^3.5.10"
  },
  "devDependencies": {
   
    "@vitejs/plugin-vue": "^5.1.4",
    "vite": "^5.4.8"
  }
}

2. 使用

App.vue
演示使用我就直接在 里写了

<script setup>
  // 导入monaco编辑器
  import * as monaco from 'monaco-editor';
  import {
   ref, onMounted, onUnmounted} from 'vue'

  // 编辑器容器div
  const editorContainer = ref(null);