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。

monaco editor + vue的配置的更多相关文章

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

    monaco-editor 是微软出的一条开源web在线编辑器支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同. 在项目中可能会用带代码编辑功能,或者展示代 ...

  2. 手把手教你实现在Monaco Editor中使用VSCode主题

    背景 笔者开源了一个小项目code-run,类似codepen的一个工具,其中代码编辑器使用的是微软的Monaco Editor,这个库是直接从VSCode的源码中生成的,只不过是做了一点修改让它支持 ...

  3. Monaco Editor 使用入门

    以前项目是用ace编辑器的,但是总有些不敬人意的地方.前端事件看见的VS Code编辑器Monaco Editor准备更换下,下面介绍一些使用中遇到的一点问题.代码提示 1.项目引用 import * ...

  4. monaco editor 实现自定义提示(sql为例)

    monaco editor :https://www.cnblogs.com/XHappyness/p/9414177.html 这里实现自己定义的提示: .vue <template> ...

  5. 【软工】[技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE

    [技术博客] 用Monaco Editor打造接近vscode体验的浏览器IDE 官方文档与重要参考资料 官方demo 官方API调用样例 Playground 官方API Doc,但其搜索框不支持模 ...

  6. Asp.Net Core 使用Monaco Editor 实现代码编辑器

    在项目中经常有代码在线编辑的需求,比如修改基于Xml的配置文件,编辑Json格式的测试数据等.我们可以使用微软开源的在线代码编辑器Monaco Editor实现这些功能.Monaco Editor是著 ...

  7. vue全局配置----小白基础篇

    今天学习vue全局配置.希望帮助我们去了解vue的全局配置,快速开发. Vue.config是vue的全局配置对象.包含Vue的所有全局属性: silent:boolean(默认值:false)--- ...

  8. vue环境配置 vue-cli脚手架

    vue 环境配置步骤: 第一步: 在官网下载node,Node  下载地址 http://nodejs.cn/ 并安装node.检测node是否安装成功, 按 “windows+r”  进入cmd命令 ...

  9. 如何在你的Vue项目配置vux

    做移动端项目的话vue现在是首要的选择,足够轻便,文档足够全,当然用的人多,项目中遇到的坑别人可能也遇到过,解决起来也比较方便,至于在开发中做需要的移动端组件库,个人比较推崇vux. 其实项目里组件库 ...

随机推荐

  1. python基础--numpy.random

    # *_*coding:utf-8 *_* # athor:auto import numpy.random #rand(d0, d1, ..., dn)n维随机值 data0 = numpy.ran ...

  2. Python3学习十四

    1.  JS基本概念 网景和sun联合开发javascript javascript 三个部分:ECMAScript 语法    DOM(document object model)    BOM(b ...

  3. js 去掉数组对象中的重复对象

    export function deteleObject(obj) { var uniques = []; var stringify = {}; for (var i = 0; i < obj ...

  4. git clone pytorch或caffe2速度慢的解决办法

    caffe2官方代码,现在已经放在pytorch项目中了. 因此,源码编译pytorch或caffe2,都需要 https://github.com/pytorch/pytorch 下载代码. 由于p ...

  5. Android Q 变更和新特性

    安全和隐私变更 隐私保护是Android Q重要的主题之一,Android Q带来了一系列增强用户隐私保护的变更. 1 应用文件存储空间限制 应用访问限制是Android Q影响最大变更之一.在And ...

  6. [转]CDH QuickStart VM基本使用

    https://blog.csdn.net/wiborgite/article/details/78731944 https://www.cnblogs.com/harrychinese/p/big_ ...

  7. 实例分析ASP.NET在MVC5中使用MiniProfiler监控MVC性能的方法 

    这篇文章主要为大家详细介绍了ASP.NET MVC5使用MiniProfiler监控MVC性能,具有一定的参考价值,感兴趣的小伙伴们可以参考一下 MiniProfiler ,一个简单而有效的迷你剖析器 ...

  8. 使用云服务器实现Google搜索

    >>>>>>>>>>>>>>>>>>>>>>>>> ...

  9. docker-compose yaml mysql和wordpress 一行命令搞定~~~

    version: '3.1' services: db: container_name: db image: mysql/mysql-server restart: always networks: ...

  10. kafka 客户端 consumer 配置参数

    1.Consumer Group 与 topic 订阅 每个Consumer 进程都会划归到一个逻辑的Consumer Group中,逻辑的订阅者是Consumer Group.所以一条message ...