1.准备

现在如果你直接 

npm install vue-codemirror codemirror --save

那么你大概率在引用

import 'codemirror/lib/codemirror.css'

的时候会报错。因为在现在的版本是为vue3准备的。

那么你只要安装低版本的就行了

npm i codemirror@5.65.12
npm i vue-codemirror@4.0.6

下面就是如何使用：

2.使用

1.main.js

在入口函数中引用。

//codemirror
import VueCodemirror from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
Vue.use(VueCodemirror)

2.使用页面

<template><codemirror ref="mycode" :value="curCode" :options="cmOptions" class="code"></codemirror>
</template><script>
import { codemirror } from 'vue-codemirror'
import "codemirror/theme/ambiance.css"; // 这里引入的是主题样式，根据设置的theme的主题引入，一定要引入！！
require("codemirror/mode/javascript/javascript"); // 这里引入的模式的js，根据设置的mode引入，一定要引入！！export default {name: 'ExecuteAction',data() {return {curCode: '测试',cmOptions: {// autorefresh: true,// tabSize: 4,// mode: 'text/x-properties',// theme: 'ayu-mirage',// line: true,// viewportMargin: Infinity, //处理高度自适应时搭配使用// highlightDifferences: true,// autofocus: false,// indentUnit: 2,// smartIndent: true,// readOnly: true, // 只读// showCursorWhenSelecting: true,// firstLineNumber: 1lineNumbers: true, // 显示行号mode: 'text/x-yaml', // 语法modelgutters: ['CodeMirror-lint-markers'], // 语法检查器theme: "ambiance",lint: true, // 开启语法检查}}},components: {codemirror},}</script><style scoped>
.information-box>>>.CodeMirror {font-family: monospace;height: 71vh;direction: ltr;
}
</style>

完成！