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

最新推荐文章于 2025-10-25 10:17:35 发布

原创最新推荐文章于 2025-10-25 10:17:35 发布 · 3.2k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#vue #Codemirror

vue 专栏收录该内容

33 篇文章

订阅专栏

本文详细介绍了如何在Vue项目中集成Codemirror，包括安装、全局及组件级引入步骤，以及如何设置选项和事件。通过具体示例展示了如何在模板中使用Codemirror组件，设置代码模式、主题等特性。

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>