vue2如何使用codemirror

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: 1
                lineNumbers: true, // 显示行号
                mode: 'text/x-yaml', // 语法model
                gutters: ['CodeMirror-lint-markers'], // 语法检查器
                theme: "ambiance",
                lint: true, // 开启语法检查
                }

            }
    
        },
 components: {
        codemirror
    },


}

</script>


<style scoped>
.information-box>>>.CodeMirror {
    font-family: monospace;
    height: 71vh;
    direction: ltr;
}
</style>

完成！