monaco editor + vue的配置

monaco editor是vscode的御用編輯器。

功能很是強大，使用方便輕巧，對js\ts等等語言支持都良好，能方便的擴展以支持其餘語言或者自定義的特性。

誇了這麼多，這裏只說它一個問題:

 

這貨和vue不兼容。

 

解決這個問題很簡單，使用vue-monaco-editor便可，能夠經過npm安裝。

npm install vue-monaco-editor --save-dev

如今問題又來了

 

這貨文檔有問題的，以下：

 

這裏寫了默認的srcPath是""，也就是本地的意思

並無。

srcPath默認是null，因此請本身在標籤上加上  srcPath=""

而後呢，須要讓本地的monaco能被訪問到，webpack加入下面的配置：

const CopyWebpackPlugin = require('copy-webpack-plugin');
module.exports = {
  plugins: [
    new CopyWebpackPlugin([
      {
        from: 'node_modules/monaco-editor/min/vs',
        to: 'vs',
      }
    ])
  ]
};

 

vue-monaco-editor解決monaco引用的思路是:

若是window.monaco已經註冊，則不作任何事

若是沒有，就以<script>形式引用monaco editor。