electron-vite vue3离线使用monaco-editor

news2024/11/23 11:14:56

目录

1.搭建一个 electron-vite 项目

2.安装monaco-editor和vite-plugin-monaco-editor

3.electron.vite.config.mjs配置

4.创建 worker.js并在main.js 引入

5.创建组件 MonacoVite.vue 组件

6. App.vue中引入组件

7.运行测试


1.搭建一个 electron-vite 项目

pnpm create @quick-start/electron

参考链接:

1.Getting Started | electron-vite

2. Electron⚡️Vite | Electron⚡️Vite

2.Electron⚡️Vite

然后按照提示操作即可!

✔ Project name: … <electron-app>
✔ Select a framework: › vue
✔ Add TypeScript? … No / Yes
✔ Add Electron updater plugin? … No / Yes
✔ Enable Electron download mirror proxy? … No / Yes

Scaffolding project in ./<electron-app>...
Done.

2.安装monaco-editor和vite-plugin-monaco-editor

pnpm install monaco-editor
pnpm i vite-plugin-monaco-editor

3.electron.vite.config.mjs配置

import monacoEditorPlugin from 'vite-plugin-monaco-editor';
plugins: [vue(),monacoEditorPlugin ]

electron.vite.config.mjs

import { resolve } from 'path'
import { defineConfig, externalizeDepsPlugin } from 'electron-vite'
import vue from '@vitejs/plugin-vue'
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
export default defineConfig({
  main: {
    plugins: [externalizeDepsPlugin()]
  },
  preload: {
    plugins: [externalizeDepsPlugin()]
  },
  renderer: {
    resolve: {
      alias: {
        '@renderer': resolve('src/renderer/src')
      }
    },
    plugins: [vue(),monacoEditorPlugin ]
  }
})

4.创建 worker.js并在main.js 引入

worker.js

import * as monaco from 'monaco-editor';
import EditorWorker from 'monaco-editor/esm/vs/editor/editor.worker?worker';
import JsonWorker from 'monaco-editor/esm/vs/language/json/json.worker?worker';
import CssWorker from 'monaco-editor/esm/vs/language/css/css.worker?worker';
import HtmlWorker from 'monaco-editor/esm/vs/language/html/html.worker?worker';
import TsWorker from 'monaco-editor/esm/vs/language/typescript/ts.worker?worker';

self.MonacoEnvironment = {
    getWorker(_, label) {
        if (label === 'json') {
            return new JsonWorker();
        }
        if (label === 'css' || label === 'scss' || label === 'less') {
            return new CssWorker();
        }
        if (label === 'html' || label === 'handlebars' || label === 'razor') {
            return new HtmlWorker();
        }
        if (label === 'typescript' || label === 'javascript') {
            return new TsWorker();
        }
        return new EditorWorker();
    }
};

monaco.languages.typescript.typescriptDefaults.setEagerModelSync(true);

main.js  

import './worker.js'
import './assets/main.css'

import { createApp } from 'vue'
import App from './App.vue'
//引入worker.js
import './worker.js'
createApp(App).mount('#app')

5.创建组件 MonacoVite.vue 组件

<template>
    <div :style="{
         height: height+'px',
    width: width+'px'
    }" ref="editorRef"></div>
  </template>
  
  <script setup>
  import {defineEmits, defineProps, onMounted, ref, toRaw, watch} from 'vue';
  import * as monaco from 'monaco-editor/esm/vs/editor/editor.api';
  
  const emits = defineEmits(['update:modelValue']);
  
  const props = defineProps({
    height: {
      type: Number,
      default: 500,
    },
    width: {
      type: Number,
      default: 500,
    },
    modelValue: {
      type: String,
      default: '',
    },
    language: {
      type: String,
      default: 'json',
    },
    theme: {
      type: String,
      default: 'vs-dark',
    }
  });
  
  const editorRef = ref(null);
  const editorInstance = ref(null);
  onMounted(() => {
    if (editorRef.value && !editorInstance.value) {
      editorInstance.value = monaco.editor.create(editorRef.value, {
        value: props.modelValue,
        language: props.language,
        theme: props.theme,
        scrollBeyondLastLine: false,
      });
      editorInstance.value.onDidChangeModelContent((event) => {
        emits('update:modelValue', toRaw(editorInstance.value).getValue());
      });
    }
  });
  
  
  // 监听外部code变化,更新内部状态
  watch(() => props.modelValue, (newVal, oldVal) => {
    let currValue = toRaw(editorInstance.value).getValue();
    if (newVal!==currValue){
      toRaw(editorInstance.value).setValue(newVal)
    }
  }, {deep: true});
  
  </script>

6. App.vue中引入组件

import MonacoVite from './components/MonacoVite.vue'
 <monaco-vite :width="500" :height="500" v-model:="codedata" language="json"></monaco-vite>

App.vue

<script setup>
import {ref} from 'vue'
import Versions from './components/Versions.vue'
const ipcHandle = () => window.electron.ipcRenderer.send('ping')

import MonacoVite from './components/MonacoVite.vue'
const codedata=ref("123")

</script>

<template>
  
  <monaco-vite :width="800" :height="800" v-model:="codedata" language="json"></monaco-vite>
 
  <div class="actions">
    <div class="action">
      <a href="https://electron-vite.org/" target="_blank" rel="noreferrer">Documentation</a>
    </div>
    <div class="action">
      <a target="_blank" rel="noreferrer" @click="ipcHandle">Send IPC</a>
    </div>
  </div>
  <Versions />
</template>

7.运行测试

参考链接:

1.GitHub - microsoft/monaco-editor: A browser based code editor

2.https://www.npmjs.com/package/vite-plugin-monaco-editor

3.Vue3 Vite Monaco Editor - boommanpro

4.在 vite-vue3.x 中的使用 vscode monaco-editor 方法 | NoteZ_技术博客

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

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

相关文章

如何在算家云搭建TripoSR(三维重建)

一、模型介绍 TripoSR是由Tripo AI和Stability AI合作开发的先进开源模型&#xff0c;能在短时间内从单张图片生成高质量 3D 模型。 利用大型重建模型&#xff08;LRM&#xff09;的原理&#xff0c;TripoSR带来了关键的进步&#xff0c;大大提高了3D重建的速度和质量。模型的…

秒验HarmonyOS NEXT集成指南

开发工具&#xff1a;DevEco Studio 集成方式&#xff1a;在线集成 HarmonyOS API支持&#xff1a;> 12 集成前准备 注册账号 使用MobSDK之前&#xff0c;需要先在MobTech官网注册开发者账号&#xff0c;并获取MobTech提供的AppKey和AppSecret&#xff0c;详情可以点击查看…

基于SpringBoot+Vue的校内跑腿业务管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI、Python、小程序等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的…

使用 QEMU 模拟器运行 FreeRTOS 实时操作系统

文章目录 QEMU 官网QEMU 文档QEMU 简介QEMU 安装QEMU 命令启动虚拟机串口控制台监控命令行 FreeRTOS安装编译工具FreeRTOS 源码RISC-V-Qemu-virt_GCC 示例编译 RISC-V-Qemu-virt_GCC启动虚拟机运行 FreeRTOS QEMU 官网 https://www.qemu.org/ QEMU 文档 https://www.qemu.or…

爆品只是日百商家的表面“风光”

前不久&#xff0c;#大学生买爆台州商家的移动收纳筐#的话题上了热搜。现在的大学生相比以前讲究多了&#xff0c;虽然生活费没涨多少&#xff0c;但生活一定要精致。比如&#xff0c;在有限的预算内买各种收纳神器&#xff0c;把宿舍整理地井井有条。 爆品&#xff0c;往往成…

2024.9.14(RC和RS)

一、replicationcontroller &#xff08;RC&#xff09; 1、更改镜像站 [rootk8s-master ~]# vim /etc/docker/daemon.json {"registry-mirrors": ["https://do.nark.eu.org","https://dc.j8.work","https://docker.m.daocloud.io",&…

windows远程桌面连接ubuntu

通过 Windows 远程连接到 Ubuntu 的桌面环境&#xff0c;可以使用 远程桌面协议&#xff08;RDP&#xff09; 来实现远程登录。 准备工作 一台安装了 Ubuntu 的服务器或计算机。一台 Windows 电脑&#xff08;安装远程桌面客户端&#xff09;。两台机器必须在同一网络中&…

M3U8是什么,如何解析下载

M3U8是什么&#xff1f;如何解析下载 M3U8是苹果公司推出的视频播放标准&#xff0c;准确来说是一种索引文件&#xff0c;使用M3U8文件实际上是通过它来解析对应的放在服务器上的视频网络地址&#xff0c;从而实现在线播放。M3U8文件使用UTF-8字符编码。M3U8是一种常见的流媒体…

基于SpringBoot的甜品店管理系统

作者&#xff1a;计算机学姐 开发技术&#xff1a;SpringBoot、SSM、Vue、MySQL、JSP、ElementUI等&#xff0c;“文末源码”。 专栏推荐&#xff1a;前后端分离项目源码、SpringBoot项目源码、SSM项目源码 系统展示 【2025最新】基于JavaSpringBootVueMySQL的蛋糕甜品店管理系…

下载docker镜像报错,dial tcp x.x.x.x:443: connect: connection refused

原因是:国外的连接超时了. 解决方案改为阿里云的数据源 打开阿里云 搜索&#xff1a;容器镜像服务 ACR 把你自己的这个直接复制在linux sudo mkdir -p /etc/docker sudo tee /etc/docker/daemon.json <<-EOF { "registry-mirrors": ["你自己的"] }…

接口发送 xml 格式的数据如何测试?

什么是 xml &#xff1f; xml 是一种和 html 非常类似的语言&#xff0c;采取一定的格式展示数据。比如&#xff1a; 这个例子非常形象的指明&#xff1a; 这是一个便条 便条是给你的 便条是我写的 标题是&#xff1a;提醒 内容是&#xff1a;今晚八点&#xff0c;不见不散…

【docker】docker 关键技术 —— 镜像制作

docker 镜像制作 镜像制作及原因Docker 镜像制作方式快照方式制作镜像制作命令 Dockerfile 制作镜像Dockerfile 是什么Dockerfile 格式为什么需要 Dockerfilegitee 详细使用 Dockerfile 教程 镜像制作及原因 镜像制作是因为某种需求&#xff0c;官方的镜像无法满足需求&#x…

云服务器和物理服务器的区别在哪

在当今数字化的时代&#xff0c;服务器在企业和个人的信息技术架构中扮演着至关重要的角色。其中&#xff0c;云服务器和物理服务器是两种主要的服务器类型&#xff0c;它们在多个方面存在着明显的区别。 一、硬件方面 物理服务器是实实在在的物理硬件设备&#xff0c;它由机…

写论文还在卡壳?教你用ChatGPT轻松搞定过渡段落!

AIPaperGPT&#xff0c;论文写作神器~ https://www.aipapergpt.com/ 在写论文的路上&#xff0c;最让人头疼的除了查重率飙升&#xff0c;估计就是文献综述了吧&#xff01; 想想看&#xff0c;文献一篇接着一篇&#xff0c;脑子都快炸了&#xff0c;还得想办法把它们连接得…

使用JLink V8烧写友善之臂Mini2440 Superboot2440.bin到NORflash里

1 开发环境 PC&#xff1a;Windows 11、开发板Mini2440、仿真器JLink V8、Jlink转接板、JLinkARM烧录工具V4.34版本Setup_JLinkARM_V434.exe 准备工作&#xff1a;安装好烧录工具JLinkARM&#xff0c;按照网上的接线方法将PC、开发板和JLink仿真器连接起来。 组网&#xff1a;…

Radware Alteon 负载均衡-基于URL Filetype的七层负载均衡

作者&#xff1a;Xiaolei Ren Radware Alteon作为一款高性能的负载均衡器&#xff0c;其基于URL Filetype的七层负载均衡功能为众多企业提供了灵活、高效的解决方案。 该案例实现如下需求&#xff1a;当客户端访问服务器时&#xff0c;默认访问10.200.1.100&#xff0c;在ht…

使用Let’s Encrypt 配置 SSL 证书去除浏览器不安全告警

Let’s Encrypt是什么 https://letsencrypt.org/zh-cn/about/如何操作进行配置实现ssl认证 使用 certbot 获取 Let’s Encrypt 的免费 SSL 证书 更新系统软件包 sudo yum update -y安装 EPEL 仓库(Certbot 通常位于 EPEL 仓库中): sudo yum

【C++】STL——vecot的模拟实现

目录 前言总体结构默认成员函数构造函数拷贝构造赋值重载析构函数 vector的相关容量空间以及访问的实现capacity()和size()迭代器实现operator[]reserve vector类对象的修改操作尾插尾删任意位置插入任意位置删除交换和清理 前言 前面我们已经学习了解了vector重要接口的使用&a…

Appium如何简化混合App的测试和自动化

背景&#xff1a;Hybrid App&#xff08;混合模式移动应用&#xff09;是指介于web-app、native-app这两者之间的app&#xff0c;兼具“Native App良好用户交互体验的优势”和“Web App跨平台开发的优势”。 什么是混合型应用&#xff08;Hybrid App&#xff09; 我们可以理解…

iPhone 16预售已开,沙漠金色最抢手,喜提新机后别忘了这件事!

9月13日20点&#xff0c;iPhone 16系列正式开启官方预购。今年全新的iphone16不仅新增相机按钮和AI功能&#xff0c;还增加了沙漠金配色。“加量不加价”的iPhone 16系列开售依旧火爆&#xff0c;iPhone 16系列开售1分钟内&#xff0c;苹果官方网站一度被消费者买到崩&#xff…