vue 引入monaco-editor

安裝

yarn add monaco-editor  monaco-editor-webpack-plugin
或
npm install monaco-editor monaco-editor-webpack-plugin

修改webpack 配置

// vue.config.js
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
  chainWebpack: config => {
    config.plugin('MonacoWebpackPlugin').use(MonacoWebpackPlugin)
  },
  //...
}

使用

<template>
  <div
    ref="code-container"
    style="width:800px;height:600px;border:1px solid #ccc"
    class="code-container"
  ></div>
</template>
<script>
import * as monaco from 'monaco-editor'

export default {
  name: 'codeEdit',
  mounted() {
    monaco.editor.create(this.$refs['code-container'], {
      value: ['function x() {', '\tconsole.log("Hello world!");', '}'].join('\n'),
      language: 'javascript',
      automaticLayout: false
    })
  },
  methods: {}
}
</script>

效果