1.下载
npm install vue-codemirror --save
2.需求及使用经验
需求：
仅用于代码的展示，有折叠功能，能够高亮代码。
使用经验：
下方代码为完整代码，唯一需要修改的地方在于父组件传过来的数据data是一个对象，然后在init()函数中使用flowJsonData接受使用JSON序列化的数据。
还有一个问题有可能出现，就是引入问题，如果提示路径不对，那你就看看你node_modules文件夹具体在哪里。
还有一个问题，我使用的功能并不多，而这个插件的功能有100+种，如果还需要继续增加功能，就在data中的option对象中添加配置参数即可。
3.使用
我是直接在组件中使用的，以下代码稍作修改即可运行
<template> <el-dialog title="流程数据信息" :visible.sync="dialogVisible" width="70%"> <el-alert title="使用说明" type="warning" description="nodeList 代表节点信息，lineList 代表连线信息" show-icon close-text="知道了" > </el-alert> <br /> <!--一个高亮显示的插件start--> <codemirror :value="flowJsonData" :options="options" class="code" ></codemirror> <!--一个高亮显示的插件end--> </el-dialog> </template> <script> import 'codemirror/lib/codemirror.css'//引入样式文件 import { codemirror } from 'vue-codemirror'//引入核心文件 require("codemirror/mode/javascript/javascript.js")//引入JavaScript格式结合option里面的mode使用 // 折叠功能需引入的文件start import 'codemirror/addon/fold/foldgutter.css' import 'codemirror/addon/fold/foldcode' import 'codemirror/addon/fold/foldgutter' import 'codemirror/addon/fold/brace-fold' import 'codemirror/addon/fold/comment-fold' // 折叠功能需引入的文件end export default { props: { data: Object,//父传子数据 }, data () { return { dialogVisible: false, flowJsonData: {},//将data序列化生成最终数据 options: { //配置项 mode: { name: "javascript", json: true },//设置语法格式这里是JavaScript lineNumbers: true, //显示行号 // 代码折叠功能配置项start foldGutter: true, lineWrapping: true, gutters: ['CodeMirror-linenumbers', 'CodeMirror-foldgutter', 'CodeMirror-lint-markers'], // 代码折叠功能配置项end } } }, components: { codemirror }, methods: { //初始化数据 init () { this.dialogVisible = true//打开弹框，与本功能无关无需理会 this.flowJsonData = JSON.stringify(this.data, null, 4).toString()//初始化核心代码 } } } </script> <style scoped> ::v-deep .el-dialog__header { padding: 10px !important; } </style>
4.效果展示
