1、npm install vue-codemirror-lite, 安装vue-codemirrir-lite;
2、在需要用到的文件里面引入{codemirror}, codemirror/lib/codemirror.css, 语言:codemirror/mode/python/python.js,
主题样式:codemirror/theme/blackboard.css, codemirror/theme/elegant.css, 引入光标所在行是否高亮的包:codemirror/addon/selection/active-line.js;
import { codemirror } from 'vue-codemirror-lite'
import 'codemirror/lib/codemirror.css'
// language
import 'codemirror/mode/python/python.js'
// theme css
import 'codemirror/theme/blackboard.css'
import 'codemirror/theme/elegant.css'
// require active-line.js
import 'codemirror/addon/selection/active-line.js'
3、components里面注册codemirror;
4、脚本编辑区设置一个变量用来存放脚本,在data里面设置;
data () {
const code = ''
return {
code,
cmOption: {
tabSize: 2,
styleActiveLine: true,
lineNumbers: true,
line: true,
lineWrapping: true,
mode: