monaco editor + vue的配置

简介: monaco editor是vscode的御用编辑器。 功能非常强大,使用方便轻巧,对js\ts等等语言支持都良好,能方便的扩展以支持其他语言或者自定义的特性。 夸了这么多,这里只说它一个问题:   这货和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。

 

目录
相关文章
|
1月前
|
JavaScript
在Vue中使用Avue、配置过程以及实际应用
这篇文章介绍了作者在Vue项目中使用Avue组件库的体验,包括安装配置过程和实际应用示例,展示了如何通过Avue实现动态增加输入框和输入验证的功能。
在Vue中使用Avue、配置过程以及实际应用
|
1月前
|
JavaScript
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
这篇文章介绍了如何在Vue 2或Vue 3项目中实现一个自定义的全局指令`v-dragSwitch`,用于创建可以任意方向拖拽并悬浮的元素,同时包含边界处理的逻辑。
154 2
基于Vue2或Vue3实现任意上下左右拖拽悬浮的元素,且配置为自定义的全局指令
|
1月前
|
JavaScript
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
这篇文章介绍了如何在Vue 2.X和Vue 3.X项目中封装和使用Monaco Editor在线代码编辑器,包括安装所需依赖、创建封装组件、在父组件中调用以及处理Vue 3中可能遇到的问题。
237 1
基于Vue2.X/Vue3.X对Monaco Editor在线代码编辑器进行封装与使用
|
1月前
|
存储 JavaScript 前端开发
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
文章展示了在Vue项目中通过集成Quill富文本编辑器实现公告功能的完整开发过程,包括前端的公告发布、修改、删除操作以及后端的数据存储和处理逻辑。
Vue中通过集成Quill富文本编辑器实现公告的发布。Vue项目中vue-quill-editor的安装与使用【实战开发应用】
|
1月前
|
JavaScript
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
文章详细介绍了在Vue项目中安装和使用`vue-quill-editor`的步骤,包括如何通过npm安装、局部挂载、在Vue页面中引入和配置使用。同时,还提供了如何实现图片的缩放和拖拽功能的进阶教程,涉及到安装额外的插件`quill-image-drop-module`和`quill-image-resize-module`,以及对Webpack配置的调整。最后,文章还提供了实际效果展示和一些后续可能的拓展功能,如上传视频和将图片上传到服务器等。
在Vue项目中vue-quill-editor的安装与使用【详细图解+过程+包含图片的缩放拖拽】
|
1月前
|
JavaScript 开发工具 git
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
这篇文章分析了Vue脚手架的结构,并详细讲解了`ref`属性和`Props`配置的基础知识、代码实现和测试效果,展示了如何在Vue组件中使用`ref`获取DOM元素或组件实例,以及如何通过`Props`传递和接收外部数据。
Vue学习之--------脚手架的分析、Ref属性、Props配置(2022/7/28)
|
1月前
|
存储 JavaScript 安全
Vue 3 环境变量配置
Vue 3 环境变量配置
|
1月前
|
JavaScript
|
1月前
如何在 Vue3 项目配置全局方法
本文介绍了在Vue3项目中配置全局方法的几种方式,包括如何将Moment.js日期处理类库和字符串颜色值生成方法设置为全局可访问的属性。
34 0
|
1月前
|
Rust JavaScript
Zed——Eslint配置支持Vue
Zed——Eslint配置支持Vue
34 0