vue-codemirror

Vue-Codemirror 是一个基于 Vue.js 的代码编辑器组件，它使用了 Codemirror 作为底层的编辑器。Codemirror 是一个功能强大的代码编辑器，支持多种编程语言和主题，并提供了丰富的编辑器功能，如语法高亮、自动完成、代码折叠等。

使用 Vue-Codemirror，你可以轻松地在 Vue.js 项目中添加一个可定制的代码编辑器。你可以通过 npm 或 yarn 安装 Vue-Codemirror，并在 Vue 组件中引入它。然后，你可以使用 Vue-Codemirror 提供的组件来展示和编辑代码。

以下是一个简单的示例，展示了如何在 Vue 中使用 Vue-Codemirror：

<template>
  <div>
    <codemirror v-model="code" :options="editorOptions"></codemirror>
  </div>
</template>

<script>
import VueCodemirror from 'vue-codemirror';

import 'codemirror/lib/codemirror.css';
import 'codemirror/theme/material.css';

export default {
  components: {
    Codemirror: VueCodemirror,
  },
  data() {
    return {
      code: '',
      editorOptions: {
        mode: 'javascript',
        theme: 'material',
        lineNumbers: true,
      },
    };
  },
};
</script>

在上面的示例中，我们首先引入了 `vue-codemirror` 和 Codemirror 的 CSS 文件。然后，在 Vue 组件中，我们将 `vue-codemirror` 导入为 `Codemirror` 组件，并在模板中使用它。我们通过 `v-model` 指令将 `code` 属性与编辑器的值绑定起来。我们还可以通过 `options` 属性传递编辑器的配置选项，例如指定编辑器的语言模式、主题和是否显示行号。

这只是一个简单的示例，你可以根据需要进一步定制 Vue-Codemirror 的使用。你可以参考 Vue-Codemirror 的文档以了解更多关于配置选项和功能的信息。