Monaco Editor安装及使用

最近在玩以vue为基础开发web代码编辑器，发现Monaco Editor（仿 Visual Studio Code）插件完美的解决了业务需求。故将重要的记录如下：

安装

1、monaco-editor和monaco-editor-webpack-plugin安装

npm install monaco-editor --save-dev

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

2、配置vue.config.js(vue-cli3.0需在根目录中新建)

const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')
module.exports = {
    configureWebpack: {
        plugins: [
            new MonacoWebpackPlugin()
        ]
    }
}

3、建立公共组件monaco.vue

4、父组件调用

5、opts可配置的属性很多，本例配置了常用的属性，查看更多属性