标签：port 改变 说明 doc cnp import temp conf pre
monaco-editor： https://github.com/Microsoft/monaco-editor
在ESM中的使用官方也有对应文档：https://github.com/Microsoft/monaco-editor/blob/master/docs/integrate-esm.md
现基于vue-cli2的项目做具体步骤说明：
1. 安装：
cnpm install monaco-editor --save
cnpm install monaco-editor-webpack-plugin --save-dev
2. 修改webpack.base.conf.js配置文件
const MonacoWebpackPlugin = require(‘monaco-editor-webpack-plugin‘);
...
module.exports = {
...
plugins: [
...
new MonacoWebpackPlugin()
]
};
3. 在对应的组件中使用
.vue
<template> <div> <div id="container" ></div> </div> </template>
.ts
import { Vue, Component, Watch } from "vue-property-decorator"
import * as monaco from ‘monaco-editor‘;
@Component({
})
export default class Parent extends Vue {
...
value = ‘初始sql语句‘；
monacoEditor;
mounted() {
this.monacoEditor = monaco.editor.create(document.getElementById(‘container‘), {
value: this.value,
language: ‘sql‘
});
}
}
注意：要等container渲染成功才能monaco.editor.create
-------------------------------------------------------------------------------------------- 其他问题 -----------------------------------------------------------------------------------------
1. 怎么用代码方式改变this.monacoEditor的value值？
答： this.monacoEditor.setValue(newValue);
标签：port 改变 说明 doc cnp import temp conf pre
原文地址：https://www.cnblogs.com/XHappyness/p/9414177.html
