vue-codemirror 基于 Codemirror，适用于 Vue 的 Web 代码编辑器。

Codemirror官网：https://codemirror.net/

vue-codemirror官网：https://www.npmjs.com/package/vue-codemirror

第一步安装：npm install vue-codemirror --save

第二步引入：分为全局引入和组件引入

  全局引入：

// require lib
import Vue from 'vue'
import VueCodemirror from 'vue-codemirror'// require styles
import 'codemirror/lib/codemirror.css'// require more codemirror resource...// you can set default global options and events when use
Vue.use(VueCodemirror, /* { options: { theme: 'base16-dark', ... },events: ['scroll', ...]
} */)

组件引入：

// require component
import { codemirror } from 'vue-codemirror'// require styles
import 'codemirror/lib/codemirror.css'// require more codemirror resource...// component
export default {components: {codemirror}
}

案例：

<template><codemirror v-model="code" :options="cmOptions"></codemirror>
</template><script>
import { codemirror } from 'vue-codemirror'
import 'codemirror/lib/codemirror.css'
// language js
import 'codemirror/mode/javascript/javascript.js'
// theme css
import 'codemirror/theme/base16-dark.css'
// more codemirror resources
// import 'codemirror/some-resource...'
export default {components: {codemirror},data(){return {code: 'const a = 10',cmOptions: {// codemirror optionstabSize: 4,mode: 'text/javascript',theme: 'base16-light',lineNumbers: true,line: true,}}},
}
</script>