近期在做一个oj项目，要使用代码编辑器，过程中碰到一些问题，现在记录下步骤。
参考文章：vue-codemirror 最全踩坑之路_VITAMIN的博客-CSDN博客
大致效果：
1.安装，直接在你的vue项目中使用npm指令npm install vue-codemirror --save2.引入和参数配置，这里直接参考vue-codemirror 最全踩坑之路_VITAMIN的博客-CSDN博客
（先都按照参考文章中配置，暂时不管其含义）
注意，新建的setting.js文件位置，以及在组件中引入他的位置要换成自己的
3.如果要更换主题在上一步引入的setting.js文件底部可以看到，我们现有的能够更换的主题只有这两个
此时，我们可以去官方的不同主题展示页选择你想要的主题
vue-codemirror | Homepage | Surmon's projects
可以看到，我最终选择的主题就是cobalt
我们需要在setting.js主题文件处引入
import 'codemirror/theme/cobalt.css'
引入后，更改配置参数中的主题：（改成我们选择的cobalt主题）
4.调整编辑器宽度此时，效果已经能看到了，但是宽度不是很合适
我们在官方的用户手册可以找到方法代码镜：用户手册 (codemirror.net)
该页面是英文的，我们先将其翻译成中文
点击配置，此时我们就能理解之前配置的各项参数和含义，也可以根据需求进行更改
当然，这里我们重点是要看外观，点击定制造型
我们要修改的就是CodeMirror这个类，宽度设置成你想要的值
.CodeMirror{ width: 900px !important; }
此时，我们在其中写点代码看看
5.编辑器语言的选择我们之前参考的文章是引入了javascript，我们这时需要其他的语言模式：
还是在官方查找：CodeMirror: Language Modes
在右边的模式中选择你想要的语言模式 ：现在举几个例子
1.C++模式：进去第一行可以看到我们要引入的模式名的clike,在我们vue项目的node_modules文件夹的codemirror中mode文件夹里可以看到所有的模式，我们可以找到clike
引入他，还是在setting.js中(如果已经引入，就不需要重复引入了，这里为了理解过程完整）
import 'codemirror/mode/clike/clike.js'
然后，我们去找刚刚页面最低端的MIME
于是，就可以修改配置参数中模式为对应的：
mode: 'text/x-c++src'
写一些c++代码试试：
2.html模式：点进去之后， 拉到最底下
因此，我们要除了要引入htmlmixed，之前还需引入xml：在setting.js文件中写就行，(如果已经引入，就不需要重复引入了，这里为了理解过程完整））
import 'codemirror/mode/xml/xml.js' import 'codemirror/mode/htmlmixed/htmlmixed.js'
mode:"text/html"
保存后，在编辑器中写一些html代码试试
最后，如果要根据选择的语言，更换模式，先将每一种可选择的语言模式的文件都引入完成，之后，根据选择的选项，动态更换mode就能实现
