vue-codemirror—全局引入路径报错问题

有人针对vue框架，封装了cm，提供了一个面向vue的cm组件：vue-codemirror，使用起来比较方便。

vue-codemirror的npm安装命令：npm install vue-codemirror --save

安装完成后，首先需要在全局或组件下引入vue-codemirror，这里演示的是在组件下引入。

报路径错误：搜索了很多网上的例子，结果复制很多都不能用（如：import ‘codemirror/lib/codemirror.css’），都是在引入后报路径错误。最后发现了问题所在可能是vue-codemirror对此做了封装，导致引用路径上多套了一层。一直报错以为是写得有问题反复查看后发现多加一层路径。

版本问题：vue-codemirror 引用在VUE2.0框架最好用V4版本，高版本的有兼容问题

main.js
js/css文件引入：

// 全局引入vue-codemirror
import { codemirror } from 'vue-codemirror'
import 'vue-codemirror/node_modules/codemirror/lib/codemirror.css'
// theme
import 'vue-codemirror/node_modules/codemirror/theme/abcdef.css'
import 'vue-codemirror/node_modules/codemirror/theme/monokai.css'
import 'vue-codemirror/node_modules/codemirror/theme/mdn-like.css'
// addon
import 'vue-codemirror/node_modules/codemirror/addon/lint/lint.css'
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter.css'

// lint
import 'vue-codemirror/node_modules/codemirror/addon/lint/lint.js'
import 'vue-codemirror/node_modules/codemirror/addon/lint/json-lint.js'

// mode
import 'vue-codemirror/node_modules/codemirror/mode/xml/xml.js'
import 'vue-codemirror/node_modules/codemirror/mode/javascript/javascript'
import 'vue-codemirror/node_modules/codemirror/mode/htmlmixed/htmlmixed.js'

// merge
import 'vue-codemirror/node_modules/codemirror/addon/merge/merge.js'
import 'vue-codemirror/node_modules/codemirror/addon/merge/merge.css'

// fold
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldcode.js'
import 'vue-codemirror/node_modules/codemirror/addon/fold/foldgutter.js'
import 'vue-codemirror/node_modules/codemirror/addon/fold/xml-fold.js'

import 'vue-codemirror/node_modules/codemirror/addon/edit/closebrackets.js'

window.jsonlint = require("vue-codemirror/node_modules/codemirror/addon/lint/json-lint.js");

在vue中引入cm后，接下来就可以使用了，下面是完整的例子：

  <codemirror
          ref="cmLint"
          :value="lintContent"
          :options="lintOptions"
          @input="changes">
      </codemirror>