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 options
        tabSize: 4,
        mode: 'text/javascript',
        theme: 'base16-light',
        lineNumbers: true,
        line: true,
      }
    }
  },
}
</script>