},methods:{initEditor(){// 初始化编辑器,确保dom已经渲染this.editor= monaco.editor.create(document.getElementById('container'), { value:'',//编辑器初始显示文字language:'sql',//语言支持自行查阅demoautomaticLayout:true,//自动布局theme:'vs-dark'//官方自带三种主题vs, hc-black, or vs-dark});...
我使用的日期是2020年3月18日,此时的vue-monaco-editor是存在一定的问题的,他的一些设置项是不生效的,追更溯源,封装的时候有点出入.所以我直接将下载好的vue-monaco-editor依赖从node_modules中拿出来,直接放入项目中引入. 具体使用如下 1.引入 import MonacoEditor from './vue-monaco-editor/src/Monaco' 2,使...
安装 npminstallmonaco-editor monaco-editor-webpack-plugin vue.config.js配置 这里我只添加了针对js的代码提示,如果只填写js的代码提示会发现并没有左右,后来在monaco-editor-webpack-plugin的介绍中发现了端倪: 就是说添加js的语法提示必须依赖ts,所以必须把ts也加上 chainWebpack: (config) => { config.plugi...
npm install editor@1.0.0 npm install monaco-editor@0.19.3 npm install monaco-editor-webpack-plugin@1.9.1 1. 2. 3. 二、配置vue.config.js文件 没有vue.config.js的话就在根目录新建一个 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { ...
npm install monaco-editor-webpack-plugin --save-dev vue.config.js文件配置 const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin') module.exports = { chainWebpack: (config) => { config.plugin('monaco').use(new MonacoWebpackPlugin()) ...
monaco-editor-vue用法 Monaco Editor在Vue中的使用方法如下: 1.安装Monaco Editor。 bashnpm install monaco-editor--save-dev npm install monaco-editor-webpack-plugin--save-dev 2.配置vue.config.js。 javascriptconstMonacoWebpackPlugin=require('monaco-editor-webpack-plugin'); module.exports= { ...
{monacoEditor:{},};},methods:{// 初始化init(){this.monacoEditor=monaco.editor.create(this.$refs.container,{value:this.code,// 代码readOnly:false,// 只读language:"mysql",// 语法theme:"vs-dark",// 主题 vs/vs-dark/hc-black (可使用defineTheme中的主题)folding:true,// 代码折叠position:...
monaco-editor-esm-webpack-plugin:针对汉化包所做的webpack插件,需要和汉化包配合使用。 js-beautify:是用来做代码美化的,主要是做一些格式化的工作。 安装完成之后,就可以配置到我们的项目中进行应用啦。 二、配置 首先要在vue.config.js这个文件中引入插件,并设置相应的配置项。
项目的框架是Vue,编辑器用的是Monaco Editor。 什么是Monaco Editor vscode是我们经常在用的编辑器,它的前身是微软的一个叫Monaco Workbench的项目,而Monaco Editor就是从这个项目中成长出来的一个web编辑器,他们很大一部分的代码都是共用的,所以Monaco Editor和VSCode在编辑代码,交互及UI上几乎是一摸一样的。不同的...