【前端插件库】Vue.js 使用 vue-codemirror 插件

<template>
  <div id="app">
    <codemirror ref="myCodeMirror" :value="code" :options="cmOptions" @input="updateCode"></codemirror>
  </div>
</template>
 
<script>
// 引入vue和vue-codemirror
import Vue from 'vue'
import { codemirror } from 'vue-codemirror'
 
// 引入codemirror的样式文件
import 'codemirror/lib/codemirror.css'
 
// 引入你需要的语言模式和主题文件
import 'codemirror/mode/javascript/javascript'
import 'codemirror/theme/base16-dark.css'
 
// 注册组件
Vue.use(codemirror)
 
export default {
  data() {
    return {
      code: 'console.log("Hello, World!");',
      cmOptions: {
        mode: 'text/javascript',
        theme: 'base16-dark',
        lineNumbers: true,
        line: true
      }
    }
  },
  methods: {
    updateCode(value) {
      this.code = value
    }
  },
  components: {
    codemirror
  }
}
</script>

这段代码展示了如何在Vue.js应用中使用vue-codemirror插件来创建一个代码编辑器。首先，引入了必要的Vue和vue-codemirror库，并注册了vue-codemirror组件。然后，引入了codemirror的样式文件和JavaScript模式及主题文件。最后，在Vue组件中定义了一个代码编辑器，并通过v-model进行了数据双向绑定。