当前位置：首页 > news >正文

electron-vite vue3离线使用monaco-editor

news 来源：原创 2024/9/20 7:47:05

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 / YesScaffolding 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 组件

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>