记录 vue create 《项目名》 + yarn 创建 vue 3 项目 使用 Monaco-editor 中的坑

1.bable 编译问题
  Please add `@babel/plugin-transform-class-static-block` to your configuration.
  解决方案
  yarn add @babel/plugin-transform-class-static-block
  在 babel.config.js 文件中
  module.exports = {
  presets: ['@vue/cli-plugin-babel/preset'],
  plugins: ['@babel/plugin-transform-class-static-block']
}

2. worker 问题
   editorSimpleWorker.js?f794:501 Uncaught (in promise) Error: Unexpected usage
   at EditorSimpleWorker.loadForeignModule (editorSimpleWorker.js?f794:501:1)
   at eval (webWorker.js?96c9:38:1)
   at async eval (tsMode.js?8483:84:1)
   解决方案
   yarn add monaco-editor-webpack-plugin
   在 vue.config.js 中
    const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
	module.exports = {
	  configureWebpack: {
	    plugins: [
	      new MonacoWebpackPlugin({
	        languages: ['json', 'css', 'html', 'typescript', 'javascript']
	      })
	    ]
	  }
	}

<template>
  <div class="editor-container" ref="editorContainer"></div>
</template>

<script setup>
import * as monaco from 'monaco-editor'
import { onMounted, ref } from 'vue'

const editorContainer = ref(null)

onMounted(() => {
  const editor = monaco.editor.create(editorContainer.value, {
    value: 'console.log("Hello, Monaco!");',
    language: 'javascript'
  })
})
</script>

<style>
.editor-container {
  height: 100%;
  width: 100%;
}
</style>