electron-vite vue3离线使用monaco-editor

news2024/11/13 10:00:00

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>