当前位置: 首页 > news >正文

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。

 

相关文章:

  • Centos7配置ubuntu本地仓库
  • jQuery 选择器
  • IP unnumbered interface,某个接口不编号,某个接口不分配IP地址
  • struts2中怎样处理404?
  • 一张图让你学会LVM
  • WiFi替代者LiFi首次实测结果出炉:1Gbps
  • 解读:四点让云计算引发全球变革
  • 数据蒋堂 | 开放的计算能力为数据库瘦身
  • 数据分析流程这么长,产品经理如何一人搞定?
  • 马斯克的OpenAI,究竟是如何在dota2中击败顶级人类选手的?
  • 《程序员度量:改善软件团队的分析学》一连接活动与目标
  • 解密:智能美妆和动效自拍背后的技术
  • Linux I2C(一)之常用的几种实例化(i2c_client ) 【转】
  • 全是数据的物联网怎么把黑客挡在门外?
  • 无线充电两大标准合并 但你还得头疼选哪家
  • 4. 路由到控制器 - Laravel从零开始教程
  • Consul Config 使用Git做版本控制的实现
  • CoolViewPager:即刻刷新,自定义边缘效果颜色,双向自动循环,内置垂直切换效果,想要的都在这里...
  • Date型的使用
  • Git的一些常用操作
  • Idea+maven+scala构建包并在spark on yarn 运行
  • javascript数组去重/查找/插入/删除
  • JavaScript异步流程控制的前世今生
  • Java反射-动态类加载和重新加载
  • spring-boot List转Page
  • windows下使用nginx调试简介
  • 第十八天-企业应用架构模式-基本模式
  • 湖南卫视:中国白领因网络偷菜成当代最寂寞的人?
  • 基于组件的设计工作流与界面抽象
  • 判断客户端类型,Android,iOS,PC
  • 问:在指定的JSON数据中(最外层是数组)根据指定条件拿到匹配到的结果
  • 正则与JS中的正则
  • 智能合约开发环境搭建及Hello World合约
  • MiKTeX could not find the script engine ‘perl.exe‘ which is required to execute ‘latexmk‘.
  • $con= MySQL有关填空题_2015年计算机二级考试《MySQL》提高练习题(10)
  • (C++20) consteval立即函数
  • (Java)【深基9.例1】选举学生会
  • (MonoGame从入门到放弃-1) MonoGame环境搭建
  • (poj1.2.1)1970(筛选法模拟)
  • (ZT)一个美国文科博士的YardLife
  • (仿QQ聊天消息列表加载)wp7 listbox 列表项逐一加载的一种实现方式,以及加入渐显动画...
  • (附源码)springboot掌上博客系统 毕业设计063131
  • (附源码)ssm基于jsp的在线点餐系统 毕业设计 111016
  • (附源码)ssm考试题库管理系统 毕业设计 069043
  • (含react-draggable库以及相关BUG如何解决)固定在左上方某盒子内(如按钮)添加可拖动功能,使用react hook语法实现
  • (强烈推荐)移动端音视频从零到上手(上)
  • (五)c52学习之旅-静态数码管
  • (一)pytest自动化测试框架之生成测试报告(mac系统)
  • (转)ABI是什么
  • (转)IIS6 ASP 0251超过响应缓冲区限制错误的解决方法
  • (转)setTimeout 和 setInterval 的区别
  • ./和../以及/和~之间的区别
  • .NET 应用架构指导 V2 学习笔记(一) 软件架构的关键原则
  • .net连接oracle数据库
  • .net与java建立WebService再互相调用