Vue cli2.0 项目中使用Monaco Editor编辑器 monaco-editor 是微软出的一条开源web在线编辑器 支持多种语言,代码高亮,代码提示等功能,与Visual Studio Code 功能几乎相同。 在项目中可能会用带代码编辑功能,或者展示代码。对于习惯使用vsCode的开发者来说使用monaco-editor是非常不错的选择。 安装依赖 1 2 3 cnpm in...
https://stackoverflow.com/q/71563507/6277151 7.0K views367 forks Files .vscode public src components MonacoEditor.vue App.vue custom-lang-monarch.js main.js .prettierrc .stackblitzrc package-lock.json package.json MonacoEditor.vue 1 2
准备工作 本文在vue-cli创建的项目中，使用vue2 需要安装两个包 "monaco-editor":"0.30.0",// 编辑器主体"monaco-editor-webpack-plugin":"6.0.1",// 帮我们处理语法高亮等问题 使用 yarn add 或者 npm install 等命令均可，但是版本会有很大的影响 monaco-editor 的版本与 monaco-editor-webpack-plugin...
接下来,你需要在Vue项目的Webpack配置文件中添加monaco-editor-webpack-plugin插件。如果你使用的是Vue CLI创建的项目,可以在vue.config.js文件中进行配置: javascript // vue.config.js const MonacoWebpackPlugin = require('monaco-editor-webpack-plugin'); module.exports = { configureWebpack: { plugins: ...
对于高版本vue-cli创建的项目,默认使用webpack5,或者使用vite创建的项目是可以支持最新的monaco-editor版本的。 对于版本的支持,做如下标示: 较低版本 monaco-editor@0.30.1 monaco-editor-webpack-plugin@6.0.0 monaco-editor-nls@2.0.0 1. 2. 3.
在vue项目中使用monaco-editor monaco-editor:https://github.com/Microsoft/monaco-editor 在ESM中的使用官方也有对应文档:https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md 现基于vue-cli2的项目做具体步骤说明: 1. 安装:
If usingVue CLIinstead of Webpack directly, you can add tovue.config.js: constMonacoWebpackPlugin=require('monaco-editor-webpack-plugin') module.exports={ chainWebpack:config=>{ config.plugin('monaco-editor').use(MonacoWebpackPlugin,[ ...
If usingVue CLIinstead of Webpack directly, you can add tovue.config.js: constMonacoWebpackPlugin=require('monaco-editor-webpack-plugin')module.exports={chainWebpack:config=>{config.plugin('monaco-editor').use(MonacoWebpackPlugin,[{// Languages are loaded on demand at runtimelanguages:['json...
vue cli2.x配置多环境打包 2019-12-12 14:14 −一、安装 npm install --save-dev cross-env 二、配置步骤 1、修改config下的文件 //test.env.js 'use strict' module.exports = { NODE_ENV: '"testing"', ENV_CONFIG: '"tes... 半亩花田i ...
2. 最终办法:使用AMD域名的方式引入(https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-amd-cross.md)。注意我这里还是在vue-cli2的项目中使用,只是不用之前ESM的方式了。 (1) index.html中引用并加载monaco-editor <!-- 使用并加载monaco-editor --> ...