如何在 Vue 中使用 Monaco Editor

出处声明

此解决方案出自《如何在 Vue 项目中使用 Monaco Editor》，本文仅做记录总结。

1. 安装 webpack 插件

npm i monaco-editor-webpack-plugin --save-dev

2. 修改 vue.config.js

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')

module.exports = {
  // other configurations
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin({
        languages: ['javascript', 'css', 'html', 'typescript', 'json'] // available options are documented at https://github.com/Microsoft/monaco-editor-webpack-plugin#options
      })
    ]
  }
}

3. 使用 Monaco Editor

import * as monaco from 'monaco-editor'
import 'monaco-editor/esm/vs/editor/contrib/find/findController.js'

editor = monaco.editor.create(DOM, {/* 配置 */})