vue3使用monaco编辑器(VSCode网页版)

vue3使用monaco编辑器(VSCode网页版)

    • 文章说明
    • 参考文章
    • 核心代码
    • 效果展示
    • 实践说明
    • 源码下载

文章说明

一直在找网页版的编辑器,网页版的VSCode功能很强大,这个monaco就是VSCode样式的编辑器,功能很强大,可以直接使用;它的版本有变更,导致可能vue3使用会报一些小错误,我这里书写一个示例,来简单使用该组件,主要解决 babel.cosfig.js 和 vue.config.js 内缺少配置导致的报错

参考文章

Vue3 集成Monaco Editor编辑器
使用的demo代码是从这里复制过来的,不同的是,这里稍微补充了一下vue3相关的配置,不然会运行报错

Vue3中使用Monaco Editor代码编辑器
这篇文章中提到了 vue.config.js 的配置

vue报错之“ Static class blocks are not enabled. Please add `@babel/plugin-transform-class-static-block”
最后一个 babel.config.js 中需要添加的配置,在这篇文章中找到了

核心代码

依赖安装

  "dependencies": {"core-js": "^3.8.3","monaco-editor": "^0.52.0","monaco-editor-webpack-plugin": "^7.1.0","vue": "^3.2.13"},

vue.config.js

const {defineConfig} = require('@vue/cli-service')
const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin')module.exports = defineConfig({transpileDependencies: true,lintOnSave: false,publicPath: './',configureWebpack: {plugins: [new MonacoWebpackPlugin()]}
})

babel.config.js

module.exports = {presets: ['@vue/cli-plugin-babel/preset'],plugins: ["@babel/plugin-transform-private-methods", "@babel/plugin-transform-class-static-block"],
}

组件源码

<script setup>
import * as monaco from 'monaco-editor';
import {onMounted, onUnmounted, ref} from 'vue'const editorContainer = ref();
const editor = ref();onMounted(() => {if (editorContainer.value) {editor.value = monaco.editor.create(editorContainer.value, {value: "",language: 'javascript',theme: 'vs-dark',codeLens: true,folding: true,snippetSuggestions: 'inline',tabCompletion: 'on',foldingStrategy: 'auto',smoothScrolling: true,});editor.value.onDidChangeModelContent(() => {console.log('编辑器内容变更')})}
});onUnmounted(() => {if (editor.value) {editor.value.dispose();}
});
</script><template><div ref="editorContainer" class="container"></div>
</template><style scoped>
.container {width: 100%;height: 100%;
}
</style>

App.vue

<script setup>
import Editor from "@/Editor.vue";
</script><template><div style="width: 100vw; height: 100vh"><Editor/></div>
</template><style>
* {margin: 0;padding: 0;box-sizing: border-box;
}
</style>

效果展示

编辑JavaScript代码
在这里插入图片描述

实践说明

在运行过程中会提示这个文件大小超过500KB,不过不影响运行
在这里插入图片描述

源码下载

monaco使用demo

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/62602.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Vue.js 组件开发进阶:构建可扩展的组件库

在构建大型应用或企业级前端项目时&#xff0c;往往需要将多个组件模块化、封装成可复用的组件库。这种组件库不仅能够大幅提升开发效率&#xff0c;还能确保一致的用户体验和易于维护的代码结构。Vue.js 作为一个渐进式的前端框架&#xff0c;其灵活的组件化设计使得开发高质量…

UWB数字钥匙安全测距和场景应用

1. CCC数字钥匙 2021年7月CCC将UWB定义为第三代数字钥匙的核心技术&#xff0c;并发布CCC R3&#xff08;第三代数字钥匙&#xff09;规范。 CCC R3是基于NFC/BLE/UWB作为基础的无线电技术的使用&#xff0c;该系统采用非对称密码技术对车辆和设备进行相互签名认证&#xff0…

SpringBoot小知识(2):日志

日志是开发项目中非常重要的一个环节&#xff0c;它是程序员在检查程序运行的手段之一。 1.日志的基础操作 1.1 日志的作用 编程期调试代码运营期记录信息&#xff1a; * 记录日常运营重要信息(峰值流量、平均响应时长……) * 记录应用报错信息(错误堆栈) * 记录运维过程数据(…

SAP Native SQL 的简单说明

Open SQL访问数据字典中声明的数据库表&#xff0c;不区分数据库类型&#xff0c;执行时会自动转换为对应的语句&#xff0c;且可以使用本地缓存。Native SQL使用特定于数据库的SQL语句,但是可以访问比Open SQL 更多的表&#xff0c;更多的操作&#xff0c;缺点也很明显&#x…

2024前端面试经验分享

一、简历 1、整理步骤 把自己过去做过的有亮点的事情整理一遍。项目经历&#xff0c;通过 star 法则来做&#xff0c;不赘述&#xff0c;网上很多人讲。需要突出的亮点见下面。 2、前端开发常见突出亮点&#xff1a; 性能优化代码优化组件封装框架原理项目推进、协调能力技…

IEEE 802.11s wifi mesh网络

IEEE 802.11s 是对 IEEE 802.11 标准的扩展&#xff0c;允许多个无线节点相互连接&#xff0c;而无需在它们之间有接入点&#xff08;AP&#xff09;。例如&#xff0c;如果您家里有一个 AP&#xff0c;您想将文件复制到另一台连接到相同 AP 的笔记本电脑 B&#xff08;与您的笔…

Git中HEAD、工作树和索引的区别

在Git版本控制系统中&#xff0c;HEAD、工作树&#xff08;Working Tree&#xff09;和索引&#xff08;Index&#xff09;是三个非常重要的概念&#xff0c;它们分别代表了不同的状态或区域&#xff0c;下面我将对这三个概念进行详细的解释。 HEAD 定义&#xff1a;HEAD是一…

ARP欺骗-监控网络

kali: 使用arp-scan -l 查看同个局域网 windows arp -a 查看地址的物理地址 192.168.21.2 对应的是00-50-56-f5-d5-f0 攻击利用: 我们要让目标ip的流量经过我的网卡,从网关出去 使用的开启 echo 1 > /proc/sys/net/ipv4/ip_forward 当为0时&#xff0c;我们不转发&…

HTML 画布:网页上的创意绘图板

HTML 画布:网页上的创意绘图板 HTML5的画布(Canvas)元素为网页开发者提供了一种在网页上绘制图形和动画的强大工具。它是HTML5标准的一部分,被设计为允许脚本语言(通常是JavaScript)动态渲染图形、图像和动画。在这篇文章中,我们将深入探讨HTML画布的各个方面,包括其基…

pycharm链接neo4j(导入文件)

1.新建csv文件 2.写入文件 3.运行代码 import csv from py2neo import Graph, Node# 连接到Neo4j数据库&#xff0c;使用Bolt协议 graph Graph("bolt://localhost:7687", auth("neo4j", "password"))# 读取CSV文件 with open(D:\\Users\\ran…

Lodash的debounce方法:优化你的函数调用

在JavaScript开发中&#xff0c;我们经常会遇到需要在特定事件触发后执行某些操作的情况&#xff0c;比如窗口调整大小、滚动、按键输入等。然而&#xff0c;如果这些事件被频繁触发&#xff0c;相应的函数也会被频繁调用&#xff0c;这可能导致性能问题。这时&#xff0c;Loda…

YOLO系列论文综述(从YOLOv1到YOLOv11)【第15篇(完结):讨论和未来展望】

总结 0 前言1 YOLO与人工通用智能&#xff08;AGI&#xff09;2 YOLO作为“能够行动的神经网络”3 具身人工智能&#xff08;EAI&#xff09;4 边缘设备上的YOLO5 评估统计指标的挑战6 YOLO与环境影响 YOLO系列博文&#xff1a; 【第1篇&#xff1a;概述物体检测算法发展史、YO…

数据结构4——栈和队列

目录 1.栈 1.1.栈的概念及结构 1.2栈的实现 2.队列 2.1队列的概念及结构 2.2队列的实现 1.栈 1.1.栈的概念及结构 栈&#xff1a;一种特殊的线性表&#xff0c;其只允许在固定的一端进行插入和删除元素操作。进行数据插入和删除操作的一段称为栈顶&#xff0c;另一端称为…

SSM搭建(1)——配置MyBatis

目录 一、框架概述 1.什么是JDBC&#xff1f; 2.JDBC基本流程 3.JDBC的缺点 二、MyBatis的入门程序 1. 创建数据库和表结构 2. MyBatis入门流程总结 3. MyBatis的入门步骤 &#xff08;1&#xff09; 创建maven的项目&#xff0c;创建Java工程即可。 &…

Stream API进行分组并收集某个属性到List

在Java中&#xff0c;使用Stream API进行分组并收集某个属性到List中是一种常见的操作。这可以通过Collectors.groupingBy和Collectors.mapping结合使用来实现。下面是一个具体的示例&#xff1a; 假设我们有一个Person类&#xff0c;其中包含name和age属性&#xff0c;我们想…

Zero to JupyterHub with Kubernetes上篇 - Kubernetes 离线二进制部署

前言&#xff1a; 纯个人记录使用。 搭建 Zero to JupyterHub with Kubernetes 上篇 - Kubernetes 离线二进制部署。搭建 Zero to JupyterHub with Kubernetes 中篇 - Kubernetes 常规使用记录。搭建 Zero to JupyterHub with Kubernetes 下篇 - Jupyterhub on k8s。 k8s二进…

阻塞式队列

目录 一、阻塞队列 阻塞队列的概念 生产者消费者模型 二、自定义实现阻塞队列 一、阻塞队列 阻塞队列的概念 队列我们并不默认&#xff0c;一提起队列&#xff0c;我们立马就能想到 "先进先出"的特性。 今天我们就来学习一下特殊的队列: 阻塞队列&#xff0c;它…

开发一套ERP 第八弹 RUst 插入数据

更全面的报错,方便检查错误在哪里,现代高级语言越来越智能 还是得看下原文档怎么操作的 src 目录为crate 的根目录 想在crate 中模块相互引入需要在 main 中声明,各个模块,然后才能在各个模块中相互引入和使用 原始工程引入,避免直接使用 lib.rs 回合cargo 中的一些 工程管理出…

剖析 SpringBoot 于夕阳红公寓管理系统架构搭建的核心作用

3 系统分析 本文作者在确定了研究的课题之后&#xff0c;从各大数字图书馆下载文献来阅读&#xff0c;并了解同类型的网站具备的大致功能&#xff0c;然后与本系统用户的实际需求结合进行分析&#xff0c;得出本系统要研究的具体功能与性能。虽然分析系统这一阶段性工作主要是确…

Oracle 插入数据的存储过程

Oracle 插入数据的存储过程 这是用来&#xff0c;把实时表里面的数据插入到某个表A获取到的字段neid&#xff0c;然后拼接成xxx_xxx_neid历史表&#xff0c;接着往里面插入数据 CREATE OR REPLACE PROCEDURE XXX自定义名 IS-- 定义变量v_ne_id_table_name VARCHAR2(100); …