在vue里使用codemirror遇到的问题

前提小结：

第一次用codemirror，而且是在vue里面使用，看了官方文档，一大串都是英文，翻译后大概了解了这个插件，然后在项目中使用时出现过好几个问题：

1.新版的codemirror在lib目录下没有codemirror.js文件，旧版的有，所以网上的很多文章都是直接这样引：

 <scriptsrc="lib/codemirror.js"></script>
 <linkrel="stylesheet"href="../lib/codemirror.css" rel="external nofollow" >
<scriptsrc="mode/javascript/javascript.js"></script>

然而新手在新版的codemirror怎么引都报错，新版的codemirror把

codemirror.js

codemirror.js

2.在vue里面使用codemirror，动态创建编辑器，在关闭的时候会产生一种鬼知道是什么的错误，就是比如我新建了a，b两个编辑器，a在左，b在右，当我关闭a时，想要显示b的文档内容，却显示的是b的，肯呢个这是动态数据改变产生的错误，可是当关闭b，不关闭a时，就能显示a的文本内容。

3.路由跳转的时候，当打开的编辑器代码显示最顶层的内容的时候，切换到其他路由再切换回来还是能显示缓存的编辑器文本，当我把编辑器拉到最底层，显示最底层的文本内容，再切换到其他路由再切回来时，编辑器一片空白，鼠标点击编辑器或者鼠标滑轮滚动，文本内容出现，而且显示的内容是顶层的内容。

基于以上几点，我选择用vue-codemirror组件来实现。

实现

1.首先要先安装vue-codemirror

在npm的官网我找到了vue-codemirror

https://www.npmjs.com/package/vue-codemirror
npm install vue-codemirror --save

接着在main.js里使用

import { codemirror } from 'vue-codemirror'

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

再到组件中使用

 import { codemirror } from 'vue-codemirror'
 require("codemirror/mode/python/python.js")
 require('codemirror/addon/fold/foldcode.js')
 require('codemirror/addon/fold/foldgutter.js')								 
 1/5    1 2 3 4 5 下一页 尾页