JakHuang / monaco-vue-demo

演示在vue-cli4新建的项目如何以webpack的方式集成monaco编辑器

monaco-vue-demo

此项目在monaco-editor官方文档的基础上，演示在vue-cli4新建的项目如何以webpack的方式集成monaco编辑器。

项目运行

npm install

npm run dev

原理

monaco-editor官方webpack集成指引1已经给出了webpack集成monaco-editor的方法了。然后结合vue-cli配置webpack的方法，vue集成monaco-editor的方法就出来了。

在vue.config.js添加monaco-editor-webpack-plugin

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

module.exports = {
  configureWebpack: {
    plugins: [
      new MonacoWebpackPlugin()
    ]
  }
}

然后在需要的地方使用就行了，比如App.vue中

import * as monaco from "monaco-editor";

monaco.editor.create(document.getElementById("app"), {
      value: [
        "function x() {",
        '\tconsole.log("Hello world!");',
        "}"].join(
        "\n"
      ),
      language: "javascript",
      theme: 'vs-dark',
      automaticLayout: true
    });

注意要给monaco编辑器所在的标签设置样式，指定宽高。