Vue cli2.0 项目中使用Monaco Editor编辑器

monaco-editor 是微软出的一条开源web在线编辑器
支持多种语言，代码高亮，代码提示等功能，与Visual Studio Code 功能几乎相同。

在项目中可能会用带代码编辑功能，或者展示代码。对于习惯使用vsCode的开发者来说使用monaco-editor是非常不错的选择。

安装依赖

cnpm install monaco-editor --save

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

修改webpack.base.conf.js配置文件,如图：

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

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

 

editor组件

　　

引用editor组件

效果图如下：

 

转载于:https://www.cnblogs.com/helloluckworld/p/9663308.html