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

西安高端网站建设首选网络营销公司怎么注册

news 2026/4/6 17:37:31

西安高端网站建设首选,网络营销公司怎么注册,wordpress修改登录界面,建设银行官网首页网站vue3使用monaco编辑器（VSCode网页版） 文章说明参考文章核心代码效果展示实践说明源码下载文章说明一直在找网页版的编辑器，网页版的VSCode功能很强大，这个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>