简介：
Codemirror的vue3组件，开箱即用的代码编辑器组件。基于Codemirror5开发，仅支持vue3.

实现步骤

第一步：安装

// npm
npm install codemirror-editor-vue3 codemirror@5.x -S

// yarn
yarn add codemirror-editor-vue3 codemirror@^5.65.12

如果项目支持TS则还需要安装一个包

// npm
npm install @types/codemirror -D

// yarn
yarn add @types/codemirror

第二步：注册组件

import { InstallCodemirro } from "codemirror-editor-vue3" 


方式1： 
app.use(InstallCodemirro) 

方式2：
app.use(InstallCodemirro, { componentName: "customName" }) 

注意： 提示不建议全局注册组件，这会导致无法正确获取模板上的类型提示。

第三步：在组件中使用

Vue3+TS

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script lang="ts" setup>
  import { ref, onMounted, onUnmounted } from "vue"
  import "codemirror/mode/javascript/javascript.js"
  import Codemirror from "codemirror-editor-vue3"
  import type { CmComponentRef } from "codemirror-editor-vue3"
  import type { Editor, EditorConfiguration } from "codemirror"

  const code = ref(
    `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
  )
  const cmRef = ref<CmComponentRef>()
  const cmOptions: EditorConfiguration = {
    mode: "text/javascript"
  }

  const onChange = (val: string, cm: Editor) => {
    console.log(val)
    console.log(cm.getValue())
  }

  const onInput = (val: string) => {
    console.log(val)
  }

  const onReady = (cm: Editor) => {
    console.log(cm.focus())
  }

  onMounted(() => {
    setTimeout(() => {
      cmRef.value?.refresh()
    }, 1000)

    setTimeout(() => {
      cmRef.value?.resize(300, 200)
    }, 2000)

    setTimeout(() => {
      cmRef.value?.cminstance.isClean()
    }, 3000)
  })

  onUnmounted(() => {
    cmRef.value?.destroy()
  })
</script>

Vue3 不加TS不加setup

<template>
  <Codemirror
    v-model:value="code"
    :options="cmOptions"
    border
    ref="cmRef"
    height="400"
    width="600"
    @change="onChange"
    @input="onInput"
    @ready="onReady"
  >
  </Codemirror>
</template>
<script>
  import { ref, onMounted, onUnmounted } from "vue"
  import "codemirror/mode/javascript/javascript.js"
  import Codemirror from "codemirror-editor-vue3"
  export default {
    components: { Codemirror },
    setup() {
      const code = ref(
        `var i = 0;
for (; i < 9; i++) {
    console.log(i);
    // more statements
}
`
      )

      const cmRef = ref()
      const cmOptions = {
        mode: "text/javascript"
      }
      const onChange = (val, cm) => {
        console.log(val)
        console.log(cm.getValue())
      }

      const onInput = (val) => {
        console.log(val)
      }

      const onReady = (cm) => {
        console.log(cm.focus())
      }

      onMounted(() => {
        setTimeout(() => {
          cmRef.value?.refresh()
        }, 1000)

        setTimeout(() => {
          cmRef.value?.resize(300, 200)
        }, 2000)

        setTimeout(() => {
          cmRef.value?.cminstance.isClean()
        }, 3000)
      })

      onUnmounted(() => {
        cmRef.value?.destroy()
      })

      return {
        code,
        cmRef,
        cmOptions,
        onChange,
        onInput,
        onReady
      }
    }
  }
</script>

注意：可能会出现找不到模块‘ codemirror’ 或其相应类型声明

这里参考的这位大佬的文章：

找不到模块“react”或其相应的类型声明。ts(2307)_人非草木12的博客-CSDN博客

解决：

输入：

"typescript.tsdk": "./node_modules/typescript/lib"

 如果还是找不到模块  保存好文件 随后要做的就是关闭VScode 重新打开， 重新运行项

恭喜你，最后就实现最基本的demo

 最后 附上插件官网

codemirror-editor-vue3 | codemirror-editor-vue3