electron-vite vue3离线使用monaco-editor

目录

[1.搭建一个 electron-vite 项目](#1.搭建一个 electron-vite 项目)

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

3.electron.vite.config.mjs配置

[4.创建 worker.js并在main.js 引入](#4.创建 worker.js并在main.js 引入)

[5.创建组件 MonacoVite.vue 组件](#5.创建组件 MonacoVite.vue 组件)

[6. App.vue中引入组件](#6. App.vue中引入组件)

7.运行测试


1.搭建一个 electron-vite 项目

javascript 复制代码
pnpm create @quick-start/electron

参考链接:

1.Getting Started | electron-vite

  1. Electron⚡️Vite | Electron⚡️Vite
    2.Electron⚡️Vite

然后按照提示操作即可!

javascript 复制代码
✔ 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

javascript 复制代码
pnpm install monaco-editor
javascript 复制代码
pnpm i vite-plugin-monaco-editor

3.electron.vite.config.mjs配置

javascript 复制代码
import monacoEditorPlugin from 'vite-plugin-monaco-editor';
javascript 复制代码
plugins: [vue(),monacoEditorPlugin ]

electron.vite.config.mjs

javascript 复制代码
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

javascript 复制代码
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

javascript 复制代码
import './worker.js'
javascript 复制代码
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 组件

javascript 复制代码
<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中引入组件

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

App.vue

javascript 复制代码
<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_技术博客

相关推荐
江号软件分享27 分钟前
有效保障隐私,如何安全地擦除电脑上的敏感数据
前端
web守墓人1 小时前
【前端】ikun-markdown: 纯js实现markdown到富文本html的转换库
前端·javascript·html
Savior`L2 小时前
CSS知识复习5
前端·css
许白掰2 小时前
Linux入门篇学习——Linux 工具之 make 工具和 makefile 文件
linux·运维·服务器·前端·学习·编辑器
中微子6 小时前
🔥 React Context 面试必考!从源码到实战的完整攻略 | 99%的人都不知道的性能陷阱
前端·react.js
中微子7 小时前
React 状态管理 源码深度解析
前端·react.js
加减法原则8 小时前
Vue3 组合式函数:让你的代码复用如丝般顺滑
前端·vue.js
yanlele9 小时前
我用爬虫抓取了 25 年 6 月掘金热门面试文章
前端·javascript·面试
lichenyang4539 小时前
React移动端开发项目优化
前端·react.js·前端框架
天若有情6739 小时前
React、Vue、Angular的性能优化与源码解析概述
vue.js·react.js·angular.js