vue3 在线编辑预览 选用 CodeMirror

• Codemirror （用户最多，生态最好，插件也相对完备，能想到的基本都有，同时也被很多线上应用在用，有什么问题百度搜下基本都能搜到。） ：https://codemirror.net/examples/

• vue2-ace-editor（已长期未维护）

• vue-monaco-editor（已长期未维护）

• Vue-code-view （基于vue2+cli）https://andurils.github.io/vue-code-view/#/home

• Monaco Editor（微软开源的一个web代码编辑器，但是相关文档比较少）

Codemirror

CodeMirror 是一款 “Online Source Editor”，基于 Javascript，短小精悍，实时在线代码高亮显示，他不是某个富文本编辑器的附属产品，他是许多大名鼎鼎的在线代码编辑器的基础库。

Codemirror具备在线编辑、语法高亮、搜索、代码块折叠、只读预览、格式化代码、撤销、重置、重做、复制等功能。

使用的是基于Codemirror实现代码在线编辑功能，iframe进行预览视图。

1.插件地址：https://github.com/surmon-china/vue-codemirror

2.安装插件

npm install codemirror --save

↑（我的版本是5.65.11）

推荐安装@types/codemirror以支持类型推断

npm i @types/codemirror -D

3.repl文件夹放到utils下

4.component下创建组件

replcompnents.vue

5.在assets下创建js文件

6.在使用的页面里引入上面创建好的组件，此处用ReplComponent.vue来举例。引入js文件